Javascript Styleguide

This Javascript style guide references the idiomatic.js guide.

Browsers officially supported by MapStory:

• IE 9+
• FF 31+
• Chrome 52.5+

Idiomatic Style

• Never mix spaces and tabs.
• Whitespace can ruin diffs and make changesets impossible to read. Consider incorporating a pre-commit hook that removes end-of-line whitespace and blanks spaces on empty lines automatically.
• When beginning a project, before you write any code, choose between soft indents (spaces) or real tabs, consider this law.
• For readability, set your editor's indent size to two characters — this means two spaces or two spaces representing a real tab.
• if/else/for/while/try statements always have spaces, braces and span multiple lines.

if ( condition ) {
// statements
}

while ( condition ) {
// statements
}

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

// Even better:

var i,
length = 100;

for ( i = 0; i < length; i++ ) {
// statements
}

• Exceptions

// Functions with callbacks
foo(function() {
  // Note there is no extra space between the first paren
  // of the executing function call and the word "function"
});

// Function accepting an array, no space
foo([ "alpha", "beta" ]);

// Function accepting an object, no space
foo({
  a: "alpha",
  b: "beta"
});

// Single argument string literal, no space
foo("bar");

// Expression parens, no space
if ( !("foo" in obj) ) {
  obj = (obj.bar || defaults).baz;
}

• Use only one var per scope (function) or one var for each variable. Don't mix the two.

// Bad
var foo = "",
  bar = "";
var qux;

// Good
var foo = "";
var bar = "";
var qux;

// Also good
var foo = "",
  bar = "",
  qux;

// Also good
var // Comment on these
foo = "",
bar = "",
quux;

• var statements should always be in the beginning of their respective scope (function).

// Bad
function foo() {

  // some statements here

  var bar = "",
    qux;
}

// Good
function foo() {
  var bar = "",
    qux;

  // all statements after the variables declarations.
}

• Use UpperCamelCase for constructor declaration

function FooBar( options ) {
  this.options = options;
}

• Never mix single and double quotes in the same project. Pick one style and stick with it.

• Type Checking (Courtesy jQuery Core Style Guidelines)

  • Actual Types
    • String: typeof variable === "string"
    • Number: typeof variable === "number"
    • Boolean: typeof variable === "boolean"
    • Object: typeof variable === "object"
    • Array: Array.isArray( arrayLikeObject )

• Naming conventions:

// Naming strings

`dog` is a string

// Naming arrays

`dogs` is an array of `dog` strings

// Naming functions, objects, instances, etc

camelCase; function and var declarations

// Naming constructors, prototypes, etc.

PascalCase; constructor function

// Naming regular expressions

rDesc = //;

functionNamesLikeThis;
variableNamesLikeThis;
ConstructorNamesLikeThis;
EnumNamesLikeThis;
methodNamesLikeThis;
SYMBOLIC_CONSTANTS_LIKE_THIS;