JavaScript

All code in any code-base should look like a single person typed it, no matter how many people contributed.

The following list include the main principles that are recommended use for writing clear and understandable code.

Naming Conventions

Avoid single letter names. Be descriptive with your naming

• Use camelCase when naming objects, functions, and instances

// ☠️ bad
var PARTNERlist = {};
var new_rating = {};

// 🐬 good
var thisIsMyObject = {};
function thisIsMyFunction() {}

• Do not use trailing or leading underscores

// ☠️ bad
this.__firstName__ = 'Hezi';
this.firstName_ = 'Hezi';
this._firstName = 'Hezi';

// 🐬 good
this.firstName = 'Hezi';

• Avoid single letter names. Be descriptive with your naming.

// ☠️ bad
function q() ...
var o = {};

// 🐬 good
function query() ...

Assignments, Declarations

• Always use var to declare variables. Not doing so will result in global variables.

// ☠️ bad
author = 'Lewis Carroll';

// 🐬 good
var author = 'Lewis Carroll';

• Using only one var per scope (function) or one var for each variable.

// ☠️ bad
var firstValue = "",
    secondValue = "";
var otherOne;

// ☠️ bad
var firstValue = "",
    secondValue = "",
    otherOne;

// 🐬 good
var one = "";
var two = "";
var three;

• Declare unassigned variables last

// ☠️ bad
var i, nameLength, boostLink,
    chartPage = getChart(),
    sportsTeam = true;

// ☠️ bad
var i;
var chart = getChart();
var boostLink;
var sportsTeam = true;
var nameLength;

// 🐬 good
var chart = getChart();
var sportsTeam = true;
var boostLink;
var length;
var i;

• Assign variables at the top of their scope. This helps avoid issues with variable declaration and assignment hoisting related issues.

// ☠️ bad
function () {
  console.log('The next thing...');
  //..other thing..

  var name = getThing();

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

// 🐬 good
function () {
  var name = getThing();
  console.log('The next thing...');
  //..other thing..

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

Name your functions. This is helpful for stack traces.

// ☠️ bad
var log = function (msg) {
  console.log(msg);
};

// 🐬 good
var log = function log(msg) {
  console.log(msg);
};

Declarations

Object

// ☠️ bad
var item = new Object();

// 🐬 good
var item = {};

Array

// ☠️ bad
var items = new Array();

// 🐬 good
var items = [];

String

• Use single quotes '' for strings.

// ☠️ bad
var name = "Gowen Baratheon";

// 🐬 good
var items = 'Gowen Baratheon';

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

// ☠️ bad
var mobyDick = 'Now, the game having risen to leeward, he and the other three German boats that soon followed him, had considerably the start of the Pequods keels. There were eight whales, an average pod.';

// ☠️ bad
var mobyDick = 'Now, the game having risen to leeward, \
he and the other three German boats that soon followed him, \
had considerably the start of the Pequods keels. There were \
eight whales, an average pod.';

// 🐬 good
var mobyDick = 'Now, the game having risen to leeward,' +
  'he and the other three German boats that soon followed him,' +
  'had considerably the start of the Pequods keels. There were' +
  'eight whales, an average pod.';

Properties

Don't use reserved words as keys. It won't work in IE8

// ☠️ bad 
var character = {
  default: { name: 'Jon Snow' },
  private: true
};

// 🐬 good
var character = {
  defaults: { name: 'Jon Snow' },
  hidden: true
};

• Use dot notation when accessing properties

var greyjoy = {
  name:   "Balon",
  gender: "Male",
  died:   "299 AC, at Pyke"
};

// ☠️ bad
var isGreyjoy = greyjoy['name'];

// 🐬 good
var isGreyjoy = greyjoy.name;

Use subscript notation [] when accessing properties with a variable.

Comparison Operators & Equality

• Use === and !== over == and !=
• ALWAYS evaluate for the best, most accurate result - the above is a guideline, not a dogma.

"1" === 1;
// false
"1" == 1;
// true

• Use shortcuts.

// ☠️ bad
if (think !== '') ...

// 🐬 good
if (name) ...

// ☠️ bad
if (thinks.length > 0) ...

// 🐬 good
if (think.length) ...
if (!notThink.length) ...

Blocks

• Use braces with all multi-line blocks.

// ☠️ bad
if (!match)
  return false;

// 🐬 good
if (!match) return false;

// 🐬 good
if (!match) {
  return false;
}

// ☠️ bad
function () { return false; }

// 🐬 good
function () {
  return false;
}

• If you're using multi-line blocks with if and else, put else on the same line as your if block's closing brace.

// ☠️ bad
if (match) {
  overlap1();    
  overlap2();
}
else {
  thing3();
}

// 🐬 good
if (test) {
  overlap1();    
  overlap2();
} else {
  overlap3();
}

Comments

• Use /** ... */ for multi-line comments
• Use // for single line comments.

// ☠️ bad
// make() returns a new element
// based on the passed in tag name

// 🐬 good
/**
 * make() returns a new element
 * based on the passed in tag name
 */

Whitespace

• Never mix spaces and tabs.
• Use soft tabs set to 2 spaces.
• Place 1 space before the leading brace.

// ☠️☠️ Examples of really cramped syntax
if(condition) doSomething();
while(condition) iterating++;
for(var i=0;i<100;i++) someIterativeFn();

// ☠️ bad
function () {
∙∙∙∙var name;
}

// 🐬 good
function() {
∙∙var name;
}

for(var i=0; i<100; i++) {
  someIterativeFn();
}

• Place no space before the argument list in function calls and declarations.

// ☠️ bad
function right ()...

// 🐬 good
function right()...

• End files with a single newline character

// ☠️ bad
(function (variable) {
  // ...
})(this);↵
↵

// 🐬 good
(function (global) {
  // ...
})(this);↵

Indentation

• Use indentation when making long method chains.

// ☠️ bad
$('#chart-component').find('.label').parent().closes('.td').find('.odd').sortContent();

// 🐬 good
$('#chart-component')
  .find('.label')
     .parent()
     .closes('.td')
  .find('.odd')
     .sortContent();

Commas

// ☠️ bad
var sizes = [
    little
  , middle
  , large
];

// 🐬 good
var sizes = [
  little,
  middle,
  large
];

// ☠️ bad
var character = {
    firstName: 'Jon'
  , lastName: 'Snow'
  , culture: 'Northmen',
  , born": 'In 283 AC'
};

// 🐬 good
var character = {
  firstName: 'Jon',
  lastName:  'Snow',
  culture:   'Northmen',
  born":     'In 283 AC'
};

Semicolons

// ☠️ bad
(function () {
  var name = 'Skywalker'
  return name
})()

// 🐬 good
(function () {
  var name = 'Skywalker';
  return name;
})();

//  🐬 good 
;(function () {
  var name = 'Skywalker';
  return name;
})();