JavaScript is an easy to learn programming language. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.
In this article, we’ll look at how to format file source code for readability.
We also look at how variables should be declared.
Indentation of Continuation Lines
If our line continues from the previous line, then we indent at least 4 spaces so that we can distinguish the line from the previous line.
Spacing
We should think about spacing when we’re writing our code.
Some spaces are required and some are not. Even though they aren’t required, we may want to have them.
Vertical Whitespace
We should have a single blank line between consecutive methods in a class or object literal.
Method bodies should have line breaks between logic groups.
However, we shouldn’t have blank lines at the start or end of the function.
We may have an empty line before the first and last method in a class or object literal.
Horizontal Whitespace
Horizontal whitespace usage depends on location.
We should never have trailing whitespaces.
We should have whitespace to separate reserved words like if , for , or catch .
function and super don’t need a space between them and the opening parentheses.
else or catch are used to separate reserved words from a closing curly brace preceding it.
We should put a space before an opening curly brace.
Also, we shouldn’t have any space in the opening of a template string expression.
So we shouldn’t have:
`a $ {y} b`
Instead, we should write:
`a ${y} b`
Both sides of any binary or ternary expression should also have a space between operands.
Commas and semicolons should also be added.
Colon in the object literal should also have one space after it.
Both sides of double slash that start an end of line comment should also have space before it.
Open-block comment character and both sides of those characters also have spaces.
No Horizontal Alignment
We shouldn’t have horizontal alignment in our code.
They’re hard to maintain.
For instance, we can just write:
{
foo: 1,
longer: 2,
};
instead of:
{
foo: 1,
longer: 2,
};
Function Arguments
We should wrap function arguments so that each line width is 100 characters or less.
For instance, we can write:
doSomething(
fooArgumentOne,
fooArgumentTwo,
fooArgumentThree
)
Grouping Parentheses
We may have parentheses to group expressions that may be misinterpreted without them.
However, they’re unnecessary for expressions that follow delete , typeof , void , return , throw , case , in , of , or yield .
Comments
We may want to put comments in some of our code.
Block Comments
We can add comments as blocks with /* ... */ for multiline comments.
For single-line comments, we start with // .
Parameter Name Comments
We should comment on the naming of parameters if they don’t convey their meaning clearly enough.
For instance, we can write:
foo(obviousParam, /* greeting= */ 'hello');
Language Features
JavaScript has many dubious or dangerous features that we should avoid.
We should avoid the bad ones as much as possible.
Variable Declarations
There are much better ways to declare variables than others.
We should use them as much as possible.
Use let or const
We should use let or const to declare variables.
This way, they’re block-scoped and won’t be available outside the block.
Unless a variable needs to be reassigned, const should be used.
var keyword must never be used.
One Variable Per Declaration
We should never have more than one variable per declaration.
Therefore, something like let a = 3, b = 2; should never be used.
Declare Variables When Needed
We should declare variables right before they’re needed.
This way, we don’t have to follow the usage of one variable for too many lines.
Initialize as Soon as Possible
We should initialize variables as soon as possible.
This way, we won’t forget about them and get variable not initialized or undefined errors.
Conclusion
We should group or expressions with parentheses to clarify how they’re called.
Indentation should be added to blocks.
Vertical and horizontal whitespaces are both important.
Variables should be declared only when they’re needed. And they should be declared with let or const .
