2013-01-07

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

No comments: