JavaScript Style Guide

By Xah Lee. Date: . Last updated: .

JavaScript Best practice. Ordered roughly from most important to less.

Always Declare All Variables

Always declare all variables.

Avoid using var at top level of source code, because that creates global variables, and becomes a property of the window object. It contaminates the whole environment.

Use var inside functions.

〔►see JavaScript Variable Scope: Function Level vs Block Level

〔►see JavaScript: Variable/Function Declaration Order, Name Hoisting

If you are using ES2015, then, never use var. Use let instead.

〔►see JavaScript: let Declaration

Never Use “with” Statement

The with statement creates semantic ambiguity of code inside its curly brackets.

Using with clouds the semantics of your program. Because the object of the with can have properties that collide with local variables, it can drastically change the meaning of your program. For example, what does this do?

with (foo) {
  var x = 3;
  return x;
}

Answer: anything. The local variable x could be clobbered by a property of foo and perhaps it even has a setter, in which case assigning 3 could cause lots of other code to execute. Don't use with.

from http://google.github.io/styleguide/javascriptguide.xml

Never Use ==

• Never Use ==. The == does automatic type conversion.

// using == is unpredicable. Always use ===

console.log( [] == "" ); // true
console.log( "" == {} ); // false
console.log( "0" == 0 ); // true
console.log( "" == 0 ); // true
console.log( 1 == true );  // true

Use === instead.

// using == is unpredicable. Always use ===

console.log( [] === "" ); // false
console.log( "" === {} ); // false
console.log( "0" === 0 ); // false
console.log( "" === 0 ); // false
console.log( 1 === true );  // false

Always Use Semicolon

Always use semicolon. Omitting semicolon creates hard-to-find bugs.

var f = function() {
    return 3;
} // bad semicolon omission

(function() {
    return 4;
})();

// compiler error

〔►see JavaScript: Semicolon

Never Use the Property named “constructor”

Never use the property key "constructor". Because its value can be anything.

Every function f has a property key "prototype".

〔►see JavaScript: Property Key "prototype"

The value of it by default is {"constructor":f} (that is, a object with a property key "constructor", with value of the function itself).

〔►see JavaScript: Property Key "constructor"

Never use the “instanceof” Operator

Never use the instanceof operator. Because, what it actually does may not be what you expect, and there are better ways to do what you want.

obj instanceof f is basically the same as f.prototype.isPrototypeOf(obj).

〔►see JavaScript: “instanceof” Operator

Lots of things can go wrong, because:

To find a object's subtype, use Object.prototype.toString.call(x).

〔►see JavaScript: Determine Type of Object

To determine if a object is in the prototype chain of another, use isPrototypeOf.

〔►see JavaScript: Find Object's Prototype

Never use the Constructor named “Array”

Never use the constructor function Array, because its behavior is very complex, depending on the number of arguments and their type.

〔►see JavaScript: Array Constructor

Use array literal expression […] instead, then use “for loop” or array method “push” to fill or add elements.

〔►see JavaScript: Array.prototype.push

Never Use the Constructor Named “Object”

Never use the constructor function Object, because its behavior is complex.

〔►see JavaScript: Object Constructor

Use literal expression {…}, or use Object.create(…).

Avoid for-in Loop

When you use

for (x in obj) {…}

It goes thru the prototype-chain of obj. That's usually not what you want.

To go thru properties, use:

〔►see JavaScript: Object to Array

Avoid use the Constructor named “Function”

Avoid using the constructor function Function.

The only use of Function is for it to generate function at run-time. For normal function definition, just use function … {…}. 〔►see JavaScript: Function Constructor

Avoid Using “eval()”

Using eval is sort of meta programing. But it has several problems.

Avoid Using Keyword “this”

Avoid using this keyword. Because, its value is dependent on calling context in a complex way. 〔►see JavaScript: “this” Binding

You can use Object.create().

Douglas Crockford, said he stopped using this and new. 〔►see JavaScript: Douglas Crockford the Better Parts: the Bads Parts Reconsidered

Avoid Using Operator 「new」

Avoid using new F, because its behavior is extremely complex, and drags in all the extremely other complex parts, the keyword this, the function prototype property, and constructor property.

Douglas Crockford stopped using new, perhaps you should consider it too. JavaScript: Douglas Crockford the Better Parts: the Bads Parts Reconsidered.

〔►see JavaScript: Operator “new”

Instead, write a function that returns a object, and or use Object.create(). This way, you can more simply and reliably specify parent object or the prototype chain. 〔►see JavaScript: How to Use Object.create() to Emulate Constructor?

Avoid Using Exceptions

As a programing style in general, you might consider avoid using the {Throw Try Catch Finally}. 〔►see JavaScript: Throw Try Catch Finally

Because, they are implicit goto, and are prone to be abused. Meaning, it makes it hard to understand the program flow.

Write your program to handle error cases explicitly, locally.

For more detail, See: Programing: Why I Hate Exceptions.

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.