javascript.md

JavaScript Style Guide

This guide applies only to JavaScript files. It assumes use of Babel to compile ES* features.

Table Of Contents

• Variables
• Objects
• Array
• Strings
• Variables
• Whitespace
• Commas
• Semicolons
• Block Statements
• Conditional Statements
• Properties
• Functions
• Arrow Functions
• Function Arguments
• Rest Parameters
• Destructuring
• Comments

Variables

• Use let instead of var.
• Use const for variables which aren't going to change.

Objects

• Use literal form for object creation.

let foo = {};

• Pad single-line objects with one space.

let bar = { color: 'orange' };

Arrays

• Use literal form for array creation (unless you know the exact length).

let foo = [];

• If you know the exact length and know that array is not going to grow, use Array.

let foo = new Array(16);

• Use push to add an item to an array.

let foo = [];
foo.push('bar');

• Follow commas with spaces, but don't pad single-line arrays.

let foo = [1, 2, 3];

Strings

• Use 'single quotes'.
• Use backticks with ${variables} for string interpolation.

Variables

• Put all non-assigning declarations on one line.

let a, b;

• Use a single let declaration for each assignment.

let a = 1;
let b = 2;

Whitespace

• Use soft tabs set to 2 spaces.

function() {
∙∙var name;
}

• Place 1 space before the leading brace.

obj.set('foo', {
  foo: 'bar'
});

test('foo-bar', function() {
});

• No spaces before semicolons.

let foo = {};

• Keep parenthesis adjacent to the function name when declared or called.

function foo() {
}

foo();

• Spaces are required around binary operators.

// assignments
let foo = bar + 'a';

// conditionals
if (foo === 'bara') {
}

// parameters
function(test, foo) {
}

Commas

• Skip trailing commas.

let foo = [1, 2, 3];
let bar = { a: 'a' };

• Skip leading commas.

var foo = [
  1,
  2,
  3
];

Semicolons

• Use semicolons.

Block Statements

• Use spaces.

// conditional
if (notFound) {
  return 0;
} else {
  return 1;
}

switch (condition) {
  case 'yes':
    // code
    break;
}

try {
  // code that throws an error
} catch(e) {
  // code that handles an error
}

• Opening curly brace should be on the same line as the beginning of a statement or declaration.

function foo() {
  let obj = {
    val: 'test'
  };

  return {
    data: obj
  };
}

if (foo === 1) {
  foo();
}

• Keep else and its accompanying braces on the same line.

if (foo === 1) {
  bar = 2;
} else {
  bar = '2';
}

if (foo === 1) {
  bar = 2;
} else if (foo === 2) {
  bar = 1;
} else {
  bar = 3;
}

Conditional Statements

• Use === and !==.
• Use curly braces.

if (notFound) {
  return;
}

• Use explicit conditions.

if (arr.length > 0) {
  // code
}

if (foo !== '') {
  // code
}

Properties

• Use dot-notation when accessing properties.

let foo = {
  bar: 'bar'
};

foo.bar;

• Use [] when accessing properties with a variable.

let propertyName = 'bar';
let foo = {
  bar: 'bar'
};

foo[propertyName];

Functions

• Make sure to name functions when you define them.

function fooBar() {
}

Arrow Functions

• Make sure arrow functions are done on multiple lines.

var foo = [1, 2, 3, 4].map((item) => {
  return item * 2;
});

Function Arguments

arguments object must not be passed or leaked anywhere. See the reference.

• Use a for loop with arguments (instead of slice).

function fooBar() {
  let args = new Array(arguments.length);

  for (let i = 0; i < args.length; ++i) {
    args[i] = arguments[i];
  }

  return args;
}

• Don't re-assign the arguments.

function fooBar() {
  arguments = 3;
}

function fooBar(opt) {
  opt = 3;
}

• Use a new variable if you need to re-assign an argument.

function fooBar(opt) {
  let options = opt;

  options = 3;
}

Rest Parameters

Since Babel implements Rest parameters in a non-leaking matter you should use them whenever applicable.

function foo(...args) {
  args.forEach((item) => {
    console.log(item);
  });
}

Destructuring

When decomposing simple arrays or objects, prefer destructuring.

// array destructuring
let fullName = 'component:foo-bar';
let [
  first,
  last
] = fullName.split(':');

// object destructuring
let person = {
  firstName: 'Stefan',
  lastName: 'Penner'
};

let {
  firstName,
  lastName
} = person;

Comments

• Use // for single line comments.

function foo() {
  let bar = 5;

  // multiplies `bar` by 2.
  fooBar(bar);

  console.log(bar);
}