A better coding convention for lists and object literals in JavaScript

comma-first-var.js

// See comments below.

// This code sample and justification brought to you by
// Isaac Z. Schlueter, aka isaacs

// standard style
var a = "ape",
  b = "bat",
  c = "cat",
  d = "dog",
  e = "elf",
  f = "fly",
  g = "gnu",
  h = "hat",
  i = "ibu";

// comma-first style
var a = "ape"
  , b = "bat"
  , c = "cat"
  , d = "dog"
  , e = "elf"
  , f = "fly"
  , g = "gnu"
  , h = "hat"
  , i = "ibu"
  ;

// error in standard style
var a = "ape",
  b = "bat",
  c = "cat",
  d = "dog"
  e = "elf",
  f = "fly",
  g = "gnu",
  h = "hat",
  i = "ibu";

// error in comma-first style
var a = "ape"
  , b = "bat"
  , c = "cat"
  , d = "dog"
  e = "elf"
  , f = "fly"
  , g = "gnu"
  , h = "hat"
  , i = "ibu"
  ;

// Objects:

// JSON.stringify style
var o = {
    a : "ape",
    b : "bat",
    c : "cat",
    d : "dog",
    e : "elf",
    f : "fly",
    g : "gnu",
    h : "hat",
    i : "ibu"
  },
  a = [
    [ "ape", "bat" ],
    [ "cat", "dog" ],
    [ "elf", "fly" ],
    [ "gnu", "hat" ],
    [ "ibu" ]
  ];
  

// comma-first
var o =
    { a : "ape"
    , b : "bat"
    , c : "cat"
    , d : "dog"
    , e : "elf"
    , f : "fly"
    , g : "gnu"
    , h : "hat"
    , i : "ibu"
    }
  , a = 
    [ [ "ape", "bat" ]
    , [ "cat", "dog" ]
    , [ "elf", "fly" ]
    , [ "gnu", "hat" ]
    , [ "ibu" ]
    ];

// errors in objects:

// JSON.stringify style
var o = {
    a : "ape",
    b : "bat",
    c : "cat",
    d : "dog"
    e : "elf",
    f : "fly",
    g : "gnu",
    h : "hat",
    i : "ibu"
  },
  a = [
    [ "ape", "bat" ],
    [ "cat", "dog" ],
    [ "elf", "fly" ]
    [ "gnu", "hat" ],
    [ "ibu" ]
  ];
  

// comma-first
var o =
    { a : "ape"
    , b : "bat"
    , c : "cat"
    , d : "dog"
    e : "elf"
    , f : "fly"
    , g : "gnu"
    , h : "hat"
    , i : "ibu"
    }
  , a = 
    [ [ "ape", "bat" ]
    , [ "cat", "dog" ]
    , [ "elf", "fly" ]
    [ "gnu", "hat" ]
    , [ "ibu" ]
    ];

// Addendum: effects on the return statement.
// It does not break.

return [ 1
       , 2
       , 3
       ] // returns [1,2,3]

return { a : "ape"
       , b : "bat"
       } // returns {a:"ape",b:"bat"}

// even just separating two values by commas is fine,
// though a bit silly
return 1
     , 2
     , 3
     , 4 // returns the last value, 4

// this, however is wrong:
return
    1
  , 2 // returns undefined, because of semicolon-insertion.

// so is this. otb == fail.
return
  { a : "ape"
  , b : "bat"
  } // returns undefined,
    // then creates a block with two named statements.

// this is ok:
return ( 1
       , 2
       ) // returns 2

// so is this:
return (
  { a : "ape"
  , b : "bat"
  }
) // returns {a:"ape",b:"bat"}


// Addendum 2: A function call

doSomething( aPrettyLongVariableName
           , "A string, which has some useful information"
           , "If you put these all together, it'd be too long"
           , { a: "is for antelope", b: "is for bat" }
           , 42
           )

// Addendum 3: More realistic error in standard style:

// leaks FIVE globals!
var a = "ape eat banana",
  b = "bat, allowed to fly",
  c = "cat toy",
  d = "dog chasing the mailman,"
  e = "elf lord",
  f = "fly through the air",
  g = "gnu is not unix",
  h = "hat goes on your head",
  i = "ibu isn't a cow";

// Error: Can't call method 'forEach' of undefined.
// not passing in undefined as an argument!??
mergeLists([ apple, [ penelope, granger ] ],
           [ fun ],
           [ 1, 2, 3, 4, 5, 6, 7, 8 ]
           [ "mary's store has many pies, and cookies, and eggs," ]
           [ function() { doSomething() } ]);

OMG. What a fun read.

@isaacs, @Potherca, @smaudet, @Mcfloy, @fischerflorian @happyteque, @KoJaMan, @waynebloss, @alanosman, @sophana, @bhubr, @alystair

I personally think you are all awsome. As awsome as humanly can be.

Did you know?

~99% chance that the keyboard in front of you is not optimal. Because 99% of the keyboards use the QUERTY layout.

There are keyboard layouts that make typing superiorly faster. And that's true for physical keyboard and touch screens.
But they are adopted by less than 1% of the population - at least in my circles (google dvorak or colemak to learn more).

Commas

An important distinction between keyboard layout and code style is that I don't want anybody else sitting on my keyboard, but I do want people to collaborate with me in my code.

I said before - I'm a comma-1st fan, I think it looks like a bullet list, it solves the trailing-comma debate better than anything we had to make the language put up with, and many more reasons. And I know I'm the minority in that.

Over the years the only practical case against it is - when you copy snippets of it to the REPL the shell does not expect another line and breaks. You have to wrap it with {} or something to force the REPL wait. But then again. REPL users are also a minority.

The discussion started when auto-format was in its infancy. Now, autoformat is prevalent.

The point of all this...

At least for me - this was a fun read. This discussion does stimulate some aesthetic urge in my brain, and I can see that for other people as well.

Certainly, tooling changed the scene. A lot.
What used to be an advantageous sharp edge of mine - a keen eye for formatting and reflexes around styling that aid human proofing - has become a liability. I had to adapt.
But still...

The Future

On one side, one can claim that now that we have strong autoformatters and linters we don't need to meticulously not-for-get-a-comma.
On the other hand - fixing all the commas in your codebase is changing a rule and running your formatter...

Well. We could go "woke", and explain to everybody why "coma last" hurts our feelings because it is discriminatory, or bigot, or racist, or something, and tie it to the war in Ukraine and/or Gaza, ... or explain why formatters are facists tools of the kremlin design to deprive you of creativity, yea. Good luck with that. Whoo.. <...shivers> 🤦‍♂️ (I actually shocked myself. How's that for scynisicm, @isaacs ?)

. . .

So I don't know. Maybe we'll hear more of this.

Until then, stay awsome, stay human, and be respectful.
Evidently, this is also a styling rule that makes things more readable... 😜

I joined this conversation hoping to discover a compelling reason to use trailing commas in code. While I haven't found one yet, I appreciate @osher's summary.
@waynebloss I believe there's at least 1 good reason we need a separator in code and that is to be able to separate items without being forced to place those items on a new line.
Me and my team will continue using comma first. In my opinion we use tools like formatters, linters etc to make code more readable and more manageable and not just to format in a standard manner.

On a separate note, I've observed that sometimes in technical discussions, those who disagree might resort to ridicule instead of providing constructive arguments.

And finally: I fully agree with @osher:
"...stay awesome, stay human, and be respectful.
Evidently, this is also a styling rule that makes things more readable... 😜"