Deterministic JavaScript Style Guide

This the style that I use and proselytize. Everything is derived from just a handful of core rules:

4 spaces for indentation.
Code block opening curly brackets (braces) are on the same line (as function, for, if, etc.)
Add spaces around operators and statements.
Add spaces inside brackets for array and object literals.
Don't add spaces inside parenthesis.

Rosetta stone

function named() {
    return 0;
}

function () {
    var x = 1,
        y = 2;
        
    if (1 + 2 !== 3) {
        throw 'hell froze over';
    } else if (cond) {
        //
    } else {
        //
    }

    do {
        //
    } while (cond);

    while (cond) {
        //
    }
    
    switch (cond) {
    case 1:
        //
        break;
    case 2:
        //
        break;
    default:
        //
        break;
    }
    
    try {
        //
    } catch (e) {
        //
    }
    
    var arr = [ 42, 43 ];
    
    var longerArr = [
        'apple',
        'orange',
        'kiwi'
    ];
    
    for (var i = 0; i < arr.length; i++) {
        if (cond) {
            continue;
        }
    }
    
    var obj = {
        a: 1,
        b: 2
    };
    
    for (var key in obj) {
        //
    }
}

Indentation

Use 4 spaces for indentation.

Tabs can be inconsistently rendered as 2, 4, 8 spaces based on different IDEs, consoles, printers.

2 spaces, while being more compact, are not as impactful as 4 spaces. If there is too much indentation in your code, the fix is to refactor the structure instead of cutting down on spaces used for intendation.

Stacked variables align perfectly with the var statement when 4 spaces is used:

var foo = 1,
    bar = 2;

Braces

For function definitions, open the brace on the same line:

function foo() {
}

/* not:

function foo()
{
}
*/

String literals

Use double quotes for strings, unless the project/team insists on using single quotes.

In several other languages double quotes are used. Single quotes are either not a thing or are used for character/byte literals.

var foo = "Hello";

While I prefere double quotes, I can also live with:

var foo = 'Hello';

I postulate that the only reason JavaScript is agnostic about single versus double quotes is the ocassional need to include HTML with double quotes inside JavaScript string literals:

var html = '<div class="foo"></div>';

/* easier on the fingers and eyes than:

var html = "<div class=\"foo\"></div>";
*/

Semicolons

Use them.

var foo = function () {
    bar();
};

/* not:

var foo = function () {
    bar()
}
*/

White space

Use white space liberally, but consistently.

Separate contextually related passages with empty lines. This has the same role as paragraphs in prose:

var x = 1,
    y = 2;
    
this.foo = true;
this.bar = false;

this.init();

/* not:

var x = 1,
    y = 2;
this.foo = true;
this.bar = false;
this.init();
*/

Operators

Always leave spaces around operators:

2 + 4 // not 2+4

Commas

Always leave a single space after a comma:

function foo(a, b) {
}

foo(3, 4);

/* not:

function foo(a,b) {
}

foo(3,4)
*/

Literals

Leave spaces inside array and object literals:

var even = [ 2, 4, 6 ],
    foo = { bar: 1, baz: 2 };
    
/* not:

var even = [2, 4, 6],
    foo = {bar: 1, baz: 2};
*/

You can also use multiple lines with indentation:

var even = [
        2,
        4,
        6
    ],
    foo = {
        bar: 1,
        baz: 2
    };

Parenthesis

Don't leave spaces inside parenthesis:

var foo = (2 + 3) * 5; // not ( 2 + 3 ) * 5

Special operators

Function call

The syntax for a function call operator (()) is:

<expression>()

So it's:

foo() // not foo ()

typeof

typeof is an operator, not a function:

typeof x // not typeof(x)

Function definitions

Function definitions should not look like a function call.

Their syntax is:

function [<function name>]([<argument list>])

Anonymous functions

function (a, b) {
}

/* not:

function(a, b) {
}

and certainly not:

function(a, b){
}
/*

A no-op function can be concisely written as:

function () {} // No point in wrapping the brace to another line

Named functions

function foo() {
}

/* not:

function foo () {
}
/*

Switch statements

case clauses are not indented. They work like labels:

switch (foo) {
case 1:
    bar();
    break;
case 2:
    baz();
    break;
default:
    qux();
}

/* not:

switch (foo) {
    case 1:
        bar();
        break;
    case 2:
        baz();
        break;
    default:
        qux();
}
*/

Object literals

var foo = {
    bar: 1,
    baz: 2,
    qux: 3
};

/* not:

var foo = {
    bar : 1,
    baz : 2,
    qux : 3
};

and certainly not:

var foo = {
    bar:1,
    baz:2,
    qux:3
};

and certainly not:

var foo = {
     bar: 1
    ,baz: 2
    ,qux: 3
};
*/

This compact form is OK for short passages:

var foo = { bar: 1, baz: 2 };

Array of objects literals

[{
    a: 1,
    b: 2
}, {
    a: 3,
    b: 4
}]

atesgoral/js-style-guide.md