Sunday, February 27, 2011

Code Formatting and New Lines

Last week I had a healthy debate with some co-workers about code formatting, which to a lot of developers can be a pretty religious subject. While you could argue that coding style should be a personal preference, I believe it's more important to use consistent coding practices when working in a team environment.

One formatting style we discussed was the use of new lines in code blocks. Here are three common formatting styles for the same code:

Style 1

if (true) {
console.log('yay!');
} else {
console.log('boo!');
}


Style 2

if (true) {
console.log('yay!');
}
else {
console.log('boo!');
}


Style 3

if (true)
{
console.log('yay!');
}
else
{
console.log('boo!');
}


When I first starting coding, I preferred Style 3, since it provides more visual separation. Currently I prefer Style 2, although it's not even a formatting option at http://jsbeautifier.org/, which makes me question my choice a little. Douglas Crockford seems to prefer Style 1, so maybe I should consider making the switch.

Which do you prefer?

20 comments:

  1. Number one all the way. No idea what makes me prefer this one. If you like extra vertical space, sometimes I put a line break between the curly braces and statements within (both top and bottom of each respective block).

    ReplyDelete
  2. I use style 2. I like the else starting on a new line but don't feel the need to have the opening braces on separate lines themselves. I started with style 3 years ago too and still feel when you're starting out programming that it's a good thing as it helps you better keep track of your code blocks and bracket placement (visually aligning them.) I found that as I became more proficient and was able to skim through code faster I'd trim the style down. I didn't need the more verbose use of white space as my mind/eyes were more used to catching the patterns.

    Each of these styles are totally readable and understandable by any programmer, so I'd say just stick with the one you are most comfortable in using and reading yourself. After all, other opinions are just that: opinions.

    ReplyDelete
  3. Personally I always go with style one. For me too many line breaks makes the code as hard to read and too few line breaks.

    ReplyDelete
  4. I always code as style 1. Although a similar style debate, can be over sql code formatting. Although I don't mind sharing of opinions, as long as we don't force other's to agree with us :)

    ReplyDelete
  5. While it looks like Style 1 is the favorite, I'm still not sold. I tend to look at the code as two separate conditional statements (which obviously it is).

    First Condition:

    if (true) {
    console.log('yay!');
    }

    Second Condition:

    else {
    console.log('boo!');
    }

    When you put the else statement on the same line as the curly brace in Style 1, the second condition starts bleeding into the first condition. Granted I might be the only person that thinks of it in these terms, but that's just how I see it.

    @Craig, I don't even want to get started on SQL formatting, which can easily turn into the ugliest mess of indented code out there.

    ReplyDelete
  6. I definitely prefer sytle 1.

    While I understand why some people prefer #3 (because you can comment out the if condition to force it to run, that just doesn't seem to crop up enough for me to change what I find more appeasing to the eye.

    ReplyDelete
  7. I got with option #1; but, I typically put a line break within each block (leading and trailing). I love me some white-space :)

    ReplyDelete
  8. Style 3 is how I learnt at University, and I always work this way.

    I find it much cleaner to read. I can't stand { one the same line.

    But hey - different horses for different courses.

    ReplyDelete
  9. @Mark,

    If I tried #3, I'd probably agree with you. I've just never tried it before... and I use tags a lot :)

    ReplyDelete
  10. Definitely count me among those that use style 1 both because I am used to it and (as WilGeno said), too much white space is as bad as too little (I'm looking at you Nadel! ;)

    Actually, I think most options are pretty readable (as is Ben Nadel's code, of course) - just personal preference mostly.

    ReplyDelete
  11. I used to use Style 3 mostly but now go with Style 2 so I have fewer lines with just a brace on them. I expect I may eventually end up going all the way to style 1. ;-)

    ReplyDelete
  12. Funny you mention it because as of last week I was style 2 and I just recently switched to style 1. I can't recall what prompted this but I like the look of it and the line I save.

    ReplyDelete
  13. Style is not subjective in JavaScript (only style one and two work well); to learn why, fast-forward to 30 minutes and 37 seconds of Douglas Crockford's "JavaScript: The Good Parts" Google Tech Talk (http://www.youtube.com/watch?v=hQVTIJBZook).

    Regardless, I have always preferred style two -- as Tony stated, I see 'else' and 'if else' as separate statements and to me they read better on their own lines.

    ReplyDelete
  14. @Ryan,

    Wow I had no idea. Thanks for the link.

    ReplyDelete
  15. I started doing development in C/C++ originally. At the time it was common for a missing curly brace to cause all SORTS of headaches. Usually this was because a) the compilers didn't include as many helpful warnings as they do now, and b) I was a junior developer and prone to messing up simple things like closing an if() block in the wrong place. :)

    Cut to the chase: style 3 is what I have always gone with. It's just easier (for me) to see where the code branches start and stop, and makes me faster when debugging complex code.

    ReplyDelete
  16. I'm a #2 guy myself, and after watching the video from Ricard, I'm glad.

    ReplyDelete