JavaScript Standards

Basic Formatting

• Use braces always, even for one-line blocks.

// bad
if (test)
  return false;

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

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

Strings

• For consistency single-quotes (') are preferred to double-quotes ("). This is helpful when creating strings that include HTML.

let msg = 'This is some HTML';

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

// bad
let 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
let 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
let 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.';

Naming Conventions

• Avoid single letter names. Be descriptive with your naming.
• In general:

1. functionNamesLikeThis
2. variableNamesLikeThis
3. ClassNamesLikeThis
4. EnumNamesLikeThis
5. methodNamesLikeThis
6. CONSTANT_VALUES_LIKE_THIS
7. foo.namespaceNamesLikeThis.bar
8. filenameslikethis.js.

• When saving a reference to this use _this.

// bad
function() {
  let self = this;
  return function() {
    console.log(self);
  };
}

// bad
function() {
  let that = this;
  return function() {
    console.log(that);
  };
}

// good
function() {
  let _this = this;
  return function() {
    console.log(_this);
  };
}

• Use a leading underscore _ when naming private properties

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';

// good
this._firstName = 'Panda';

Functions

• 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.
• 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) {
  // ...stuff...
}

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

• On callback functions and nested functions, use arrow functions instead of the function keyword, looks better and fixes a number of dificulties.

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

Variables

• We used to use var to declare variables, but it has been falling out of use since is the weakest signal to define a JS variable, as stated here, for example, so now we opt to use let. Not doing so will result in global variables.

// bad
superPower = 'My awesome power';

// bad
var superPower = 'My awesome power';

// good
let superPower = 'My awesome power';

• Asign variables at the top of their scope.

// bad
function() {
  test();
  console.log('doing stuff..');

  //..other stuff..

  let name = getName();

  if (name === 'test') {
    return false;
  }

  return name;
}

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

  test();
  console.log('doing stuff..');

  //..other stuff..

  if (name === 'test') {
    return false;
  }

  return name;
}

// bad
function() {
  let name = getName();

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

  return true;
}

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

  let name = getName();

  return true;
}

Conditional Expressions

• Use === and !== over == and !=.
• Conditional expressions are evaluated using coercion with the ToBoolean method and always follow these simple rules (try yo always use them as shortcuts):

1. Objects evaluate to true
2. Undefined evaluates to false
3. Null evaluates to false
4. Booleans evaluate to the value of the boolean
5. Numbers evaluate to false if +0, -0, or NaN, otherwise true
6. Strings evaluate to false if an empty string '', otherwise true

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

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

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

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

Comments

• Use // for one line comments and /** ... */ for multi-line comments.
• Use prefixes like FIXME and TODO to point out issues. The actions are FIXME -- need to figure this out or TODO -- need to implement.

Some helpful links

• 13 Noteworthy points from Google's Javascript Style Guide
• 45 Useful JavaScript Tips, Tricks and Best Practices
• The Essentials of Writing High Quality JavaScript