JavaScript Style Guide

Adapted from the Airbnb JavaScript Style Guide and Callback Hell.

Formatting

Strings

• Use single quotes '' for strings

  // bad
  var name = "Bob Parr";
  
  // good
  var name = 'Bob Parr';
  
  // bad
  var fullName = "Bob " + this.lastName;
  
  // good
  var fullName = 'Bob ' + this.lastName;

• Strings longer than 80 characters should be written across multiple lines using string concatenation.

• Note: If overused, long strings with concatenation could impact performance. (jsPerf & Discussion)

  // bad
  var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
  
  // bad
  var errorMessage = 'This is a super long error that was thrown because \
  of Batman. When you stop to think about how Batman had anything to do \
  with this, you would get nowhere \
  fast.';
  
  // good
  var errorMessage = 'This is a super long error that was thrown because ' +
    'of Batman. When you stop to think about how Batman had anything to do ' +
    'with this, you would get nowhere fast.';

• 80-character width lines. Newline at the end of each file. Use 2 spaces to indent.

Functions

• Use capitalizationLikeThis for named functions.

• Function expressions:

  // anonymous function expression
  var anonymous = function() {
    return true;
  };
  
  // named function expression
  var named = function namedFunc() {
    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.

• Note: ECMA-262 defines a block as a list of statements. A function declaration is not a statement. Read ECMA-262's note on this issue.

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

• Use /* comment */ for multi-line comments. Use // otherwise.

• Use semicolons.

When working with callbacks, put the brace on the same line as the paren:

function setCallback(obj) {
  obj.onComplete(function(data) {
    send(data);
  });
}

• If a function is going to be called from another file, use function callMeMaybe(). Otherwise, use var donotcallme = function()

Variables

• Use capitalizationlikethis for variables.

• Use one var declaration per variable. It's easier to add new variable declarations this way, and you never have to worry about swapping out a ; for a , or introducing punctuation-only diffs.

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

Blocks

• Use braces with all multi-line blocks.

  // bad
  if (test)
    return false;
  
  // good
  if (test) return false;
  
  // good
  if (test) {
    return false;
  }
  
  // bad
  function() { return false; }
  
  // good
  function() {
    return false;
  }

Commas

• Leading commas: Nope.

  // bad
  var story = [
      once
    , upon
    , aTime
  ];
  
  // good
  var story = [
    once,
    upon,
    aTime
  ];
  
  // bad
  var hero = {
      firstName: 'Bob'
    , lastName: 'Parr'
    , heroName: 'Mr. Incredible'
    , superPower: 'strength'
  };
  
  // good
  var hero = {
    firstName: 'Bob',
    lastName: 'Parr',
    heroName: 'Mr. Incredible',
    superPower: 'strength'
  };

Naming Conventions

• When saving a reference to this use _this.

  // bad
  function() {
    var self = this;
    return function() {
      console.log(self);
    };
  }
  
  // bad
  function() {
    var that = this;
    return function() {
      console.log(that);
    };
  }
  
  // good
  function() {
    var _this = this;
    return function() {
      console.log(_this);
    };
  }

Miscellaneous

• Semicolons! Always use them! Never rely on the implicit semicolon insertion.

• Use === and !== instead of == and !=.

• Single-letter variable names are fine if it is blatantly obvious what they are. Although they are almost never that obvious.

• If you have to write something nasty (it's JavaScript, it happens), write a little apology and explanation. If it's really gross, and you can prove that it's the best way to do it, we'll buy you a beer (or Soda of your choice) as a way to help you deal with the pain.