Braces in JavaScript

https://www.spiraltrain.nl/javascript-programmeren/

https://www.spiraltrain.nl/advanced-javascript-programmeren/

https://www.spiraltrain.nl/jquery/

https://www.spiraltrain.nl/angularjs-programmeren/

In languages whose syntax is derived from C (e.g.: C ← C++ ← Java ← JavaScript), two brace styles are most common: Allman style and 1TBS.

Allman style

If a statement [1] contains a block, that block is considered as somewhat separate from the header of the statement: its opening brace is in a line of its own, at the same indentation level as the head. For example:

function foo(x, y, z)

{

if (x)

{

a();

} else {

b();

c();

}

}

1TBS (One True Brace Style)

Here, a block is more closely associated with the header of its statement, it starts after it, in the same line. For example:

function foo(x, y, z) {

if (x) {

a();

} else {

b();

c();

}

}

1TBS is a variant of the (older) K&R (Kernighan and Ritchie) style. In K&R style, functions are written in Allman style and braces are omitted where they are not necessary, e.g. around single-statement then-cases.

function foo(x, y, z)

{

if (x)

a();

else {

b();

c();

}

}

JavaScript

The de-facto standard in the JavaScript world is 1TBS, most style guides recommend it. One reason goes beyond taste and fitting in: If you return an object literal, you can’t put the opening brace in a separate line. An object literal is not a code block, but things look more consistent and you are less likely to make mistakes if both are formatted the same way. For example:

return {

name: ‘Jane’

};

If you formatted that in Allman style, you’d have:

// Don’t do this

return

{

name: ‘Jane’

};

However, JavaScript’s automatic semicolon insertion [2] adds a semicolon after return, if it is followed by a newline. The above code is thus equivalent to

return;

{

name: ‘Jane’

};

That’s an empty return statement, followed by a code block (not by an object literal!) whose insides consist of the label name and the expression statement [1] ‘Jane’. At the end, there is the empty statement, a semicolon (;) on its own.

The return statement is one of the few cases where newline is significant in JavaScript: it works as a terminator for statements. In the future, newlines might become more significant in JavaScript [3].

My preferences

My personal style is:

• 1TBS
• I omit braces in an if-statement if there is no else-case and the then-case has only one or two tokens. I write such if-statements in single lines. For example:
• if (x) return x;
• I indent 4 spaces. I never use tabs for indentation, as they are displayed too differently on various systems.

Obviously, whenever I contribute to an existing project, I stick to the coding style of that project.