JavaScript Style Guide

Primitives

When you access a primitive type, you work directly on its value.

• string
• number
• boolean
• null
• undefined

var foo = 1,
    bar = foo;


bar = 9;


console.log(foo, bar); // => 1, 9

Complex

When you access a complex type, you work on a reference to its value.

• object
• array
• function

var foo = [1, 2],
    bar = foo;


bar[0] = 9;


console.log(foo[0], bar[0]); // => 9, 9

Use the literal syntax for array creation.

// bad
var items = new Array();


// good
var items = [];

If you don't know array length, use Array.push().

var someStack = [];


// bad
someStack[someStack.length] = 'abracadabra';


// good
someStack.push('abracadabra');

When you need to copy an array, use Array.slice().

var len = items.length,
    itemsCopy = [],
    i;


// bad
for (i = 0; i < len; i+=1) {
  itemsCopy[i] = items[i];
}


// good
itemsCopy = items.slice();

To convert an array-like object to an array, use Array.slice().

var args = Array.prototype.slice.call(arguments);

Function expressions:

// anonymous function expression
var anonymous = function() {
  return true;
};


// named function expression
var named = function named() {
  return true;
};


// immediately-invoked function expression (IIFE)
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears.

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}


// good
var test;
if (currentUser) {
  test = function test() {
    console.log('Yup.');
  };
}

Never name a parameter arguments, this will take precedence over the arguments object that is given to every function scope.

// bad
function nope(name, options, arguments) {}


// good
function yup(name, options, args) {}

Always use var to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.

// bad
superPower = new SuperPower();


// good
var superPower = new SuperPower();

Use one var declaration for multiple variables and declare each variable on a new line.

// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';


// good
var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

Declare unassigned variables last. This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables.

// bad
var i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;


// bad
var i, items = getItems(),
    dragonball,
    goSportsTeam = true,
    len;


// good
var items = getItems(),
    goSportsTeam = true,
    dragonball,
    length,
    i;

Assign variables at the top of their scope. This helps avoid issues with variable declaration and assignment hoisting related issues.

// bad
function() {
  if (!arguments.length) {
    return false;
  }


  var name = getName();


  return true;
}


// good
function() {
  var name = getName();


  if (!arguments.length) {
    return false;
  }


  return true;
}

Use === and !== over == and !=.

Conditional expressions are evaluated using coercion with the ToBoolean method and always follow these simple rules:

• Objects evaluate to true
• Undefined evaluates to false
• Null evaluates to false
• Booleans evaluate to the value of the boolean
• Numbers evalute to false if +0, -0, or NaN, otherwise true
• Strings evaluate to false if an empty string ' ', otherwise true

if ([0]) {
  // true
  // An array is an object, objects evaluate to true
}

Use shortcuts.

// bad
if (name !== '') {
  // ...stuff...
}


// good
if (name) {
  // ...stuff...
}


// bad
if (collection.length > 0) {
  // ...stuff...
}


// good
if (collection.length) {
  // ...stuff...
}

Use // for comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment.

// bad
var active = true;  // is current tab


// good
// is current tab
var active = true;


// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  var type = this._type || 'no type';


  return type;
}


// good
function getType() {
  console.log('fetching type...');


  // set the default type to 'no type'
  var type = this._type || 'no type';


  return type;
}

Prefixing your comments with FIXME or TODO helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are FIXME -- need to figure this out or TODO -- need to implement.

Use // FIXME: to annotate problems.

function Calculator() {


  // FIXME: shouldn't use a global here
  total = 0;


  return this;
}

Use // TODO: to annotate solutions to problems.

function Calculator() {


  // TODO: total should be configurable by an options param
  this.total = 0;


  return this;
}

Leading commas: Nope.

// bad
var once
  , upon
  , aTime;


// good
var once,
    upon,
    aTime;

Additional trailing comma: Nope.

// bad
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn',
};


var heroes = [
  'Batman',
  'Superman',
];


// good
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn'
};


var heroes = [
  'Batman',
  'Superman'
];

Perform type coercion at the beginning of the statement.

//  => this.reviewScore = 9;


// bad
var totalScore = this.reviewScore + '';


// good
var totalScore = '' + this.reviewScore;


// bad
var totalScore = '' + this.reviewScore + ' total score';


// good
var totalScore = this.reviewScore + ' total score';

Use parseInt for Numbers and always with a radix for type casting.

var inputValue = '4';


// bad
var val = new Number(inputValue);


// bad
var val = +inputValue;


// bad
var val = inputValue >> 0;


// bad
var val = parseInt(inputValue);


// good
var val = Number(inputValue);


// good
var val = parseInt(inputValue, 10);

Booleans

var age = 0;


// bad
var hasAge = new Boolean(age);


// good
var hasAge = Boolean(age);


// good
var hasAge = !!age;

Prefix jQuery object variables with a $.

// bad
var sidebar = $('.sidebar');


// good
var $sidebar = $('.sidebar');

Cache jQuery lookups.

// bad
function setSidebar() {
  $('.sidebar').hide();


  // ...stuff...
  $('.sidebar').css({
    'background-color': 'pink'
  });
}


// good
function setSidebar() {
  var $sidebar = $('.sidebar');
  $sidebar.hide();


  // ...stuff...


  $sidebar.css({
    'background-color': 'pink'
  });
}

For DOM queries use Cascading $('.sidebar ul') or parent > child $('.sidebar > ul').

Use find with scoped jQuery object queries.

// bad
$('ul', '.sidebar').hide();


// bad
$('.sidebar').find('ul').hide();


// good
$('.sidebar ul').hide();


// good
$('.sidebar > ul').hide();


// good
$sidebar.find('ul');