Why do lots of programmers move commas to the next line?

Lots of great answers already. Allow me to give you my own one, to make things as clear as possible.

I personally call this way of writing code 'Haskel style', since it's a common style to use in Haskell. Let me give you a Haskell example first:

data Settings = -- The user settings
    { has_sound     :: Bool   -- Determines if the user has sound
    , has_power     :: Bool   -- Determines if the user has electricity
    , has_graphics  :: Bool   -- Determines if the user has graphics
    , user_name     :: String -- The name of the user
    , user_password :: String -- The hashed password of the user
    , user_email    :: Email  -- The email address of the user
    , stylesheet    :: Style  -- The stylesheet to use
    }

And a Javascript snippet from one of my projects:

var events // Holds the events to generate a event handler for.
  , var2   // Quick description for var2.
  , var3   // Quick description for var3.
  , ...    // ...
  ;
events = // Event handlers will be generated for the following events:
    [ "onmousedown"  // Works outside of the window element
    , "onmouseup"    // Works outside of the window element
    , "onmousemove"  // Works outside of the window element
    , "onmousewheel" // This will handle DOMMouseScroll aswell
    ];

Benefits of 'Haskell style'

Easy to read

'Haskell style' takes advantage of the column style layout. This column style makes your code more readable. In fact, it makes your code so much more readable that you use it all the time. Imagine writing code without tabs or leading spaces!

By taking advantage of column style layout, variable names, types, etc. are easier to read aswell. By grouping up variables by prefix, our future reader will easily find what he is looking for, without using a advanced search query.

Easy to document

Column style layout has more advantages. By grouping up our code we can add a column reserved for comments. Now you can read your code without even needing color highlighting, and adding information to your comment is as easy as finding the right column and modifying it. Besides, this column-like style of documenting your code is pretty much what you get after using a documentation generator like Doxygen, removing the necessity for this kind of tool.

Easy to notice mistakes

Noticing a missing comma is a piece of cake using this style of coding. Simply look for a line that doesn't start with it! On the other side of the spectrum, we have the comma's at the end of the line. We missed one? Nope, because it is the last element, or because the expression continues on the next line. And finding the first element in a list is as easy as could be. When dealing with long lines, the first element is easily overlooked, but by placing the first element on it's own line and puting a [ or { instead of a , right in front of it, it's easy to spot.

Easily scalable

You might say "But this layout style will get imposible to handle once the expression gets big!", which is quite true, but is this any different for the rest of your code? I think that by using column style you will at least keep your code readable, which in the long run is worth more than the struggle you might have to fit it into a column layout.

All in one example!

var scalable = // This is a example variable
    [
        [ new MyObject // This is how I would style Object Allocation
              ( "11"
              , "This is the first element"
              , function // This is a very secret function...
                  ( secret   // ..with secret..
                  , variable // ..variable..
                  , names    // ..names!
                  )
                {
                    // <-- Use spaces, not tabs :)
                }
              )
        , "12"
        ]
    ,
        [ { id:   21                          // Where's 20?
          , name: "This is the third element" // It sure is
          , func: function() { /* My body feels empty :c */ }
          }
        , "22" // Notice how 21 is a integer, not a string. Sneaky!
        ]
    ];

TL; DR

This style of placing comma's, 'Haskell style', has a couple of advantages:

  • Easy to read
  • Easy to document
  • Easy to notice mistakes
  • Easily scalable

If you have an extra comma in the end of the last line it will work in some browsers but not in all browsers. Making the error harder to detect than a extra comma at the beginning (which fails on all browsers). And most developers prefer to see the error right away (so they can fix it), instead of risking a production issue for inadvertently not supporting some browsers. Especially if the solution is as easy as removing a comma.

Plus, having the comma at the beginning of the line, make it simpler to add a line at the end and you will have to touch only that line (you will not need to add the comma in the line before). Which is important if you are using version control (e.g. diff, annotate, bisect). Someone can argue that adding a line at beginning of the array or object will need the same extra work of touching 2 lines (if you use commas at the beginning), but in my experience, inserting a line at the beginning is much less likely that inserting a line at the end.

Tags:

Javascript

Recent Posts