JavaScript Style Guide

A reasonable style guide for modern JavaScript development.

Functions

Function expressions:

// Anonymous function expression
var anonymous = function() {
    return true;
};

// Named function expression
var named = function named() {
    return true;
};

// Immediately-invoked function expression (IIFE)
(function() {
    console.log('Welcome to the Internet. Please follow me.');
})();

Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news.

// Bad
if (currentUser) {
    function test() {
        console.log('Nope.');
    }
}

// Good
if (currentUser) {
    var test = function test() {
        console.log('Yup.');
    };
}

Never name a parameter arguments, this will take precendence over the arguments object that is given to every function scope.

// Bad
function nope(name, options, arguments) {
    // ...stuff...
}

// Good
function yup(name, options, args) {
    // ...stuff...
}

[⬆]

Properties

Use dot notation when accessing properties.

var luke = {
    jedi: true,
    age: 28
};

// Bad
var isJedi = luke['jedi'];

// Good
var isJedi = luke.jedi;

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

var luke = {
    jedi: true,
    age: 28
};

function getProp(prop) {
    return luke[prop];
}

var isJedi = getProp('jedi');

[⬆]

Variables

Always use var to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that.

// Bad
superPower = new SuperPower();

// Good
var superPower = new SuperPower();

Use one var declaration for multiple variables and declare each variable on a newline.

// Bad
var items = getItems();
var goSportsTeam = true;
var drangonball = 'z';

// Good
var items = getItems(),
    goSportsTeam = true,
    drangonball = 'z';

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

// Bad
function() {
    test();
    console.log('doing stuff...');

    // ...other stuff...

    var name = getName();

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

    return name;
}

// Good
function() {
    var name = getName();

    test();
    console.log('doing stuff...');

    // ...other stuff...

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

    return name;
}

[⬆]

Layout

All JavaScript written by both front and back end developers is laid out in the same pattern to ensure that it is easy to quickly identify the purpose of the file. A standard .js file should use the following format:

var tangent = window.tangent || {};
    tangent.feedback = {
        init: function() {
            chameleon.feedback.setupSomeThing();
        }

        setupSometThing: function() {
            // Set up the thing
        }
    }

    $.ready(function() {
        tangent.feedback.init();
    });

The purpose here is two-fold. Firstly it places all non-private functions in the same scope, making them easy to access and secondly, because at a glance any developer can see what the purpose of the JS in the file is (as long as functions are properly names). It is also a neat layout and encourages consistently throughout.

[⬆]

Conditional Evaluation

Use === and !== over == and !=. Conditional expressions are evaluated using coercion with the ToBoolean method and always follow these simple rules:

Objects evaluate to true
Undefined evaluates to false
Null evaluates to false
Booleans evaluate to the value of the boolean
Numbers evalute to false if +0, -0, or NaN, otherwise true
Strings evaluate to false if an empty string '', otherwise true

Use shortcuts

// Bad
if (name !== '') {
    // ...stuff...
}

// Good
if (name) {
    // ...stuff...
}

// Bad
if (collection.length > 0) {
    // ...stuff...
}

// Good
if (collection.length) {
    // ...stuff...
}

[⬆]

Blocks

Use braces with all multi-line blocks.

// Bad
if (test)
    return false;

// Good
if (test) {
    return false;
}

// Bad
function() { return false; }

// Good
function() {
    return false;
}

[⬆]

Whitespace

Use soft tabs set to 4 spaces.

// Bad
function() {
..var name;
}

// Good
function() {
....var name;
}

Place 1 space before the leading brace.

// Bad
function test(){
    console.log('test');
}

// Good
function test() {
    console.log('test');
}

Place an empty newline at the end of the file.

// Bad
(function(global) {
    // ...stuff...
})(this);

// Good
(function(global) {
    // ...stuff...
})(this);

[⬆]

Leading Commas

Nope.

// Bad
var once
  , upon
  , aTime;

// Good
var once,
    upon,
    aTime;

// Bad
var hero = {
    firstName: 'Bob'
  , lastName: 'Parr'
  , heroName: 'Mr. Incredible'
  , superPower: 'strength'
};

// Good
var hero = {
    firstName: 'Bob',
    lastName: 'Parr',
    heroName: 'Mr. Incredible',
    superPower: 'strength'
};

[⬆]

Semicolons

Yup.

// Bad
(function() {
    var name = 'Skywalker'
    return name
})()

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

[⬆]

Naming Conventions

Avoid single letter names. Be descriptive with your naming.

// Bad
function q() {
    // ...stuff...
}

// Good
function query() {
    // ...stuff...
}

Use camelCase when naming objects, functions, and instances.

// Bad
var OBJEcttsssss = {};
var this_is_my_object = {};
var this-is-my-object = {};
function c() {};
var u = new user({
    name: 'Bob Parr'
});

// Good
var thisIsMyObject = {};
function thisIsMyFunction() {};
var user = new User({
    name: 'Bob Parr'
});

Use PascalCase when naming constructors or classes.

// Bad
function user(options) {
    this.name = options.name;
}

var bad = new user({
    name: 'nope'
});

// Good
function User(options) {
    this.name = options.name;
}

var good = new User({
    name: 'yup'
});

[⬆]

Comments

Use // for single line comments. Place single line comments on a newline above the subject of the comment. Put an emptyline before the comment.

// Bad
var active = true; // Is current tab

// Good
// Is current tab
var active = true;

// Bad
function getType() {
    console.log('fetching type...');
    // Set the default type to 'no type'
    var type = this._type || 'no type';

    return type;
}

// Good
function getType() {
    console.log('fetching type...');

    // Set the default type to 'no type'
    var type = this._type || 'no type';

    return type;
}

Use /** ... */ for multiline comments.

// Bad
// make() returns a new element
// based on the passed in tag name
function make(tag) {

    // ...stuff...

    return element;
}

// Good
/**
 * make() returns a new element
 * based on the passed in tag name
 */
function make(tag) {

    // ...stuff...

    return element;
}

[⬆]

jQuery

Prefix jQuery object variables with a $.

// Bad
var container = $('#container');

// Good
var $container = $('#container');

Cache jQuery lookups.

// Bad
function setContainer() {
    $('#container').hide();

    // ...stuff...

    $('#container').show();
}

// Good
function setContainer() {
    var $container = $('#container');

    $container.hide();

    // ...stuff...

    $container.show();
}

[⬆]

Resources

The Spec

Annotated ECMAScript 5.1

Books

JavaScript: The Good Parts - Douglas Crockford
Eloquent JavaScript (online version) - Marijn Haverbeke
Learning JavaScript Design Patterns (online version) - Addy Osmani

Blogs

Paul Irish
Addy Osmani
Rebecca Murphey
JavaScript, JavaScript...
Adequately Good

Tutorials

30 Days to Learn jQuery

Other Styleguides

Airbnb JavaScript Style Guide (which this guide was based on)
Google JavaScript Style Guide
jQuery Core Style Guidelines
Principles of Writing Consistent, Idiomatic JavaScript

[⬆]

License

(The MIT License)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

[⬆]

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

javascript.md

javascript.md

JavaScript Style Guide

Table of Contents

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

Objects

Arrays

Strings

Functions

Properties

Variables

Layout

Conditional Evaluation

Blocks

Whitespace

Leading Commas

Semicolons

Naming Conventions

Comments

jQuery

Resources

License

Files

javascript.md

Latest commit

History

javascript.md

File metadata and controls

JavaScript Style Guide

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