Brace styles and JavaScript

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.

References

1. Expressions versus statements in JavaScript
2. Automatic semicolon insertion in JavaScript
3. What JavaScript would be like with significant newlines