Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A better coding convention for lists and object literals in JavaScript
// 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() } ]);
@bhubr
Copy link

bhubr commented May 18, 2019

@Mcfloy I feel you!

I cringe every time I see this comma-first garbage. And I think I have the best reason not to use comma-first: I used to work in a team where one developer, working alone on a project, had put them all around.

The guy was fired (for other reasons, the main one being that he had done a poor job). I was hired to replace him, and was then joined by two other developers. Every dev in the company, including others not working on this project - that is 15 persons roughly - kind of screamed in horror when I showed them the codebase we had inherited.

So if you want a single reason why not to use this crap, here it is: no one in his right mind does it, and no one wants to hear your explanation about why it's so brilliant, because it's just an insult to their eyes. If you do use it, you'll be looked upon by your teammates as being an insufferable know-it-all who thinks he's just invented hot water.

Thank God, common ESLint rules have banished this creature of doom from our world (hopefully).

@alystair
Copy link

alystair commented Apr 5, 2020

Not a chance @bhubr, some of us like our "comma-style":[2,"first"] rule ;)

The only place I've seen it cause issues is with JSDOC blocks not being identified correctly by the IDE.

A lot of the examples in this thread are using variables values of same/same character lengths. When line length is random it becomes much more obvious that comma-first adds value.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment