JavaScript braces on new line or not?

Question

Hi,

At work, we place braces on the next line, but at home, I do the opposite. Which one do you prefer? (K&R vs OTBS)

function something() {
    // ...
}

function something()
{
    // ...
}

A lot of JavaScript libraries seem to use the OTBS (one true brace style). I'd like to follow them for consistence among other JavaScript projects, but doesn't K&R style look more readable?

Note: We know the problem with return and braces in JavaScript, that will always be an exception. However, that is only a single case.

Answer 1

Neither one is better than the other. Just choose one and use it consistently.

Answer 2

I prefer them on the same line, but mostly because I pass anonymous functions as arguments a lot...it saves some space and makes the function definition look less jarring. Of course, this is just an opinion, and I agree with Bytecode Ninja that consistency is the most important thing.

Answer 3

All subjective. Some are slightly better but the difference is negligible. The most important thing to do is stay consistent across all your code.

Personally, I prefer the tucked in style, with 2 space 0x20 tabs, as it looks neater and more compact:

function a() {
  if (b) {
    do;
  } else {
    do2;
  }
}

Answer 4

As stated in many answers, its mostly important that you find a style that you (and/or your team mates, if applicable) stick to. Personally I prefer same line as I've found that putting curly braces on the new line can lead to lots of near blank lines if you're working with closures and nested functions, which makes code less readable for me (although, probably not for most people...)

Answer 5

This is a Holy War to which you will never get a usable answer! Just stick with whatever everyone else in the project is using and don't argue!

For what it's worth, I'm a K&Rite. I find the OTBS puts a lot of visual space between an opening structure and the following statement, when those two lines are often strongly related so would be better presented together, without an intervening almost-blank line. I like to keep my blank lines reserved for separating blocks of related statements.

In a coding style which a lot of whitespace anyway, this may be relatively unimportant. But personally I value terseness, so I can keep more of the program on-screen.

I don't buy that having the open-brace on a different column to the close-brace is an issue. It's still easy to see the block shape just from the indents. Unless you're using hanging indents. Don't do that. But that's another Holy War entirely.

Answer 6

I follow Douglas Crockford's JavaScript coding convention, which was inspired by Sun's Java style guidelines.

Here's a link to it: http://javascript.crockford.com/code.html

Answer 7

In my opinion, it depends on who else will be working with your code. If you work on a C# team and share a lot of responsibilities, put it on a new line and avoid the inevitable bickering that would otherwise follow. If you work with a lot of PHP (or older JS programmers), put it on the first line for the exact same reason.

But if you're looking for something more authoritative, Douglas Crockford says that the opening brace should always be on the top line. His reasoning, if I remember correctly, is that it makes it consistent with the rest of the language. Basically, because this is valid but (probably) incorrect code:

function myFunc() 
{
    return 
    {
      ok: true
    };
} 

...you should universally avoid putting open-braces on a new line. Why? Because programming style should not lead to syntactic ambiguity.

The sample code above is valid because it is completely syntactically correct and no exceptions will be raised if you write this. However, instead of returning an object literal, {ok:true}, it will return undefined and the code below it will not be reached. Put the opening braces up one line and it will return the object literal you were, perhaps, expecting.

The question is, do you find that argument compelling enough?

Answer 8

Douglas Crockford gives a reason for choosing the K&R style¹:

I always use the K&R style, putting the { at the end of a line instead of the front, because it avoids a horrible design blunder in JavaScript's return statement.

The blunder he is referring to is how JavaScript handles the return statement differently in the following two scenarios:

return {
   'status': 'ok'
};

... and:

return 
{
   'status': 'ok'
};

The first one will return an object with a status property, while the latter will return undefined because of semicolon insertion.

---

¹ Douglas Crockford: JavaScript: The Good Parts: Style (page 96) - ISBN: 978-0596517748.

Answer 9

I prefer the K&R method for the same reasons listed above. It looks more compact, and the two relevant lines are grouped together.