This JS Style Guide is based on Airbnb’s ES5 Style Guide (as of late April 2015), but it aims to be more thorough. Also, where my opinions are considerably different from (or even opposed to) the given reference, a “:warning:” icon indicates that. Moreover, a “:lipstick:” icon indicates cosmetical preferences.
💥 There are six primitive types in JS: Boolean, Number, String, Null, Undefined & Symbol (new in ES6), and a complex one: Object, that includes Arrays, Functions, RegExps, Dates, etc. When referring to them (e.g. in JSDoc), use PascalCase.
💥 Use the literal syntax to create Objects:
// GOOD:
var foo = {};
// BAD:
var foo = new Object();
💥 { 'class': 'ns-Block-element' }
, or like this: $el['class'] = 'ns-Block-element'
, if needed.
💥 💄 For empty & one-property Object literals, use one line of code. Otherwise, split lines:
var foo = {};
var bar = { baz: 'foo' }; // Note the spaces inside the curly braces.
var someObject = {
foo: 'bar',
baz: true
};
💥 Use the literal syntax to create Arrays:
// GOOD:
var foo = [];
// BAD:
var foo = new Array();
💥 Use Array#push()
to append elements to an Array:
// GOOD:
foo.push('bar');
// BAD:
foo[foo.length] = 'bar';
💥 To copy an Array, use Array#slice()
:
// GOOD:
var fooCopy = foo.slice();
// BAD:
var fooCopy = [];
for (var index = 0, length = foo.length; index < length; ++index) {
fooCopy[index] = foo[index];
}
💥 To convert an Array-like Object (e.g. Arguments) to an Array, also use Array#slice()
:
var someFunction = () => {
var args = Array.prototype.slice.call(arguments);
// ...
};
💥 💄 For zero-length & one-element Array literals, use one line of code. Otherwise, split lines:
var foo = [];
var bar = [ 'baz' ]; // Note the spaces inside the square brackets.
var someArray = [
'foo',
'bar',
'baz'
];
💥 💄 Write foo[index]
(without spaces inside the square brackets) for property accessors, just like for Objects. But write var foo = [ 'bar' ];
(with spaces) for the literal Array syntax.
💥 Don’t leave a trailing comma after an Array’s last element:
// GOOD:
var someArray = [
'foo',
'bar'
];
// BAD:
var someArray = [
'foo',
'bar',
];
💥 Use single quotes for Strings:
💥 Write Strings longer than 100 characters on multiple lines, using concatenation:
var foo = 'The twins of Mammon quarrelled. Their warring plunged the world into a new darkness, and the beast ' +
'abhorred the darkness. So it began to move swiftly, and grew more powerful, and went forth and ' +
'multiplied. And the beasts brought fire and light to the darkness.';
💥 Array#join()
, if that would negatively impact readability.
💥 Use only Function expressions, never Function statements. Use ES6’s fat arrow notation for Function expressions, whenever possible:
// GOOD:
var square = (x) => {
return x * x;
};
var cube = function() { // Note there’s no space between `function` and `()`.
return x * x * x;
};
// BAD:
function someFunction() {
// ...
}
💥 💄 Use the (...)(...)
notation for IIFEs instead of (...(...))
:
// GOOD:
(() => {
// ...
})();
(function($) {
// ...
})(jQuery);
// BAD:
(function($) {
// ...
}(jQuery));
💥 Never name a Function parameter arguments
. That’ll take precedence over the arguments
Object that’s given to every Function scope.
💥 Use the dot notation when accessing properties, and the subscript notation only when accessing properties with a variable or a reserved word:
// GOOD:
var foo = {
bar: 'baz',
'class': false
};
var barProperty = 'bar';
if (foo['class']) {
console.log(foo.bar);
foo[barProperty] = 'foobarbaz';
}
// BAD:
if (foo.class) {
console.log(foo['bar']);
}
💥 Use ES6’s shorthand notation for Function properties, whenever possible:
var someMixin = {
getDefaultProperties() {
// ...
},
fooMethod(bar, baz) {
// ...
}
};
...