styl

Erik Royall's ECMAScript Style Guide

Erik Royall's style guide for the ECMAScript (JavaScript) programming language.

Note: This style is not project-specific and can be used on any project. This style guide is in puclic domain.

Indentation

Indentation must be of 2 (two) spaces (no tabs).

for (var _i in obj) {
  if (hasOwn.call(obj, _i)) {
    doSomethingWith(obj[_i]);
  }
}

Line length

A line must not be of more than 82 characters in length. If the line is more than 82 characters break the line into two or more lines appropriately. Don't use multi-line strings. Instead use += operator wherever needed.

document.getElementsById("#main-header")
  .innerHTML = input.trim().replace("badword", "*******");

Naming

• Loop variables

Variables used in loops must be prefixed with _ (underscore).

var _i, _l;

for (_i = 0, _l = document.all.length; _i < _l; _i += 1) {
  document.all[_i].style.display = "none";
}

• Constants

Constants must be all caps (or UPPERCASE).

var MAX_COUNT = 1000
  , start = performance.now()
  , elapsed
  , _i = 0;

for (; _i < MAX_COUNT; _i += 1) {
  // Do something
}

elapsed = performance.now() - start;

console.log("Execution completed in " + elapsed = "ms");

Variables

Variable names must be in camelCase

var getById = document.getElementsById
  , getByTag = document.getElementsByTagName
  , getByClass = document.getElementsByClassName
  , querySelector = document.querySelectorAll;

Declaration

All variables that are to be used in the scope must be declared beforehand.

(function () {
  if (somethingFails) {
    return;
  }

  var one = 1
    , two = one + 1
    , three = one + two
    , nums = [one, two, three];

  nums.forEach(function () {
    // Do something
  });
});

Curly Braces

Braces must go on their own line.

Bad:

if (someThingHasGoneWrong)
{
  throw new Error ("I'm sorry. It's out of my hands");
}
else
{
  doWhateverYouWantToDo();
}

Good:

if (someThingHasGoneWrong) {
  throw new Error ("I'm sorry. It's out of my hands");
} else {
  doWhateverYouWantToDo();
}

Spaces

Between lines

There should be an empty line between statements of different sort.

The sorts of statements are

• Blocks: Anything that starts with { and ends with }
• return, break, continue
• Comments

Conditionals and loops

There should be a space between the keyword and (

Bad:

if(itsMe){
  allow();
}else{
  disallow();
}

Good:

if (itsMe) {
  allow();
} else {
  disallow();
}

DocBlocks

There should be an empty line after the statement previous to a DocBlock. But there should be no empty line between the DocBlock and the statement to which it is associated

Bad:

function putCreamOn (item) {
  // ...
}
/**
 * Bakes an item given times
 * 
 * @method bake
 * @param {String} item The name of item to bake
 * @param {Number} times
 * @return {BakedItem}
 * 
 */
function bake (item, times) {
  // ...
}

Better:

function putCreamOn (item) {
  // ...
}

/**
 * Bakes an item given times
 * 
 * @method bake
 * @param {String} item The name of item to bake
 * @param {Number} times
 * @return {BakedItem}
 * 
 */

function bake (item, times) {
  // ...
}

Best (preferred):

function putCreamOn (item) {
  // ...
}

/**
 * Bakes an item given times
 * 
 * @method bake
 * @param {String} item The name of item to bake
 * @param {Number} times
 * @return {BakedItem}
 * 
 */
function bake (item, times) {
  // ...
}