Skip to content

javascript.md

Latest commit

 

History

History
420 lines (302 loc) · 5.56 KB

javascript.md

File metadata and controls

420 lines (302 loc) · 5.56 KB

JavaScript Style Guide

Table Of Contents

Grammar

Objects

Arrays

Functions

Block Statements

  • Use spaces before leading brace.
// conditional
if (notFound) {
  return 0;
} else {
  return 1;
}

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

// loops
for (var key in keys) {
  // code
}

for (var i = 0, l = keys.length; i < l; i++) {
  // code
}

while (true) {
  // code
}

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() {
  var obj = {
    val: 'test'
  };

  return {
    data: obj
  };
}

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

for (var key in keys) {
  bar(e);
}

while (true) {
  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 strict equality (=== and !==).
  • Use curly braces for all conditional blocks.
if (notFound) {
  // code
}
  • Use explicit conditions when checking for non null, undefined, true, false values.
if (arr.length > 0) {
  // code
}

if (foo !== '') {
  // code
}
  • Use multiline format.
if (foo === 'bar') {
  return;
}

Commas

  • Skip trailing commas.
var foo = [1, 2, 3];
var bar = { a: 'a' };
  • Skip trailing and leading commas.
var foo = [1, 2, 3];
var bar = {
  a: 'a',
  b: 'b'
};

Semicolons

  • Use semicolons.

Comments

  • Use multiline comments with two leading asterisks for documentation.
/**
  This is documentation for something just below.
*/
  • Use YUIDoc comments for documenting functions.
  • Use // for non-documenting comments (both single and multiline).
function foo() {
  var bar = 5;

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

  console.log(bar);
}
  • Pad comments with a space.

Variables

  • Put all non-assigning declarations on one line.
var a, b;
  • Use a single var declaration for each assignment.
var a = 1;
var b = 2;
  • Declare variables at the top of their block scope.
function foo() {
  var bar;

  console.log('foo bar!');

  bar = getBar();
}

function bar() {
  var coolList;

  // code

  for (var index = 0, length = coolThing.length; index < length; index++) {
    // code
  }
}

Whitespace

  • Use soft tabs set to 2 spaces.
function() {
∙∙var name;
}
  • Place 1 space before a leading brace ({).
obj.set('foo', {
  foo: 'bar'
});

test('foo-bar', function() {
});
  • No spaces before semicolons.
var foo = {};
  • Keep parenthesis adjacent to the function name when declared or called.
function foo() {
}

foo();
  • No trailing whitespace.

Objects

  • Use literal form for object creation.
var foo = {};
  • Pad single-line objects with white-space.
var bar = { color: 'orange' };

Arrays

  • Use literal form for array creation (unless you know the exact length).
var foo = [];
  • Use new Array if you know the exact length of the array and know that its length will not change.
var foo = new Array(16);
  • Use push to add an item to an array.
var foo = [];
foo.push('bar');
  • Join single line array items with a space.
var foo = ['a', 'b', 'c'];

Properties

  • Use dot-notation when accessing properties.
var foo = {
  bar: 'bar'
};

foo.bar;
  • Use [] when accessing properties via a variable.
var propertyName = 'bar';
var foo = {
  bar: 'bar'
};

foo[propertyName];

Functions

  • Make sure to name functions when you define them.
function fooBar() {
}

var foo = {
  bar: function foo_bar() {
    // code
  }
};

var foo = function foo() {
  // code
};
  • Use scope to lookup functions (not variables).
// GOOD:
function foo() {
  function bar() {
    // code
  }

  bar();
}

// BAD:
function foo() {
  var bar = function bar() {
    // code
  }

  bar();
}

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() {
  var args = new Array(arguments.length);

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

  return args;
}
  • Don't re-assign the arguments.
// Don't re-assigning the arguments
function fooBar() {
  arguments = 3;
}

// Don't re-assigning the arguments
function fooBar(opt) {
  opt = 3;
}

// Use a new variable if you need to assign the value of an argument
function fooBar(_opt) {
  var opt = _opt;

  opt = 3;
}
  • Use a new variable if you need to re-assign an argument.
function fooBar(opt) {
  var options = opt;

  options = 3;
}