JavaScript Code Conventions

30 Mar 2011

I've put together a list of JavaScript code conventions I use for personal and commercial projects.

In addition to this page, I've also created test cases that demonstrate the trickier bits of JavaScript. These are available on GitHub.

Basics

JavaScript files should be stored in .js files.

Indentation should be four spaces. Don't use tabs.

Avoid lines over 80 characters.

End all statements with a semicolon.

The amount of JavaScript on an HTML page should be kept to a minimum. Typically the page could start initialization code:

Liquid error: No such file or directory - posix_spawnp

Comments

Add useful comments to bits of code that might require explanation.

Liquid error: No such file or directory - posix_spawnp

Don't use comments where you should use proper naming.

Liquid error: No such file or directory - posix_spawnp

Don't use comments where you should use functions.

Liquid error: No such file or directory - posix_spawnp

Names

Variable name should use uppercase, lowercase and numbers. Avoid using special characters.

Variable names should start with a lowercase letter and use camelCase. Don't use underscores.

Liquid error: No such file or directory - posix_spawnp

Use meaningful names that indicate the function of a variable. Naming things is one of the hardest things in programming. Take time to figure out the proper names that represent what you're trying to achieve.

Namespaces

By default, everything in JavaScript ends up in the global namespace. This can cause conflicts between different libraries.

Encapsulate your variables, functions and objects in a custom namespace.

Liquid error: No such file or directory - posix_spawnp

Variable declaration

Be careful with declaring variables. Forgetting the var keyword creates an implicit global variable.

JSLint complains if you're initializing variables without the var keyword.

Liquid error: No such file or directory - posix_spawnp

Functions

Don't use function literals. They clutter up the global namespace. Use the var keyword to define functions.

Liquid error: No such file or directory - posix_spawnp

When returning from a function, start the returned object on the same line. Otherwise, the JavaScript parser will think the statement has finished and return without a value.

Liquid error: No such file or directory - posix_spawnp

Objects

Objects are different in JavaScript than in Python or Java. They don't use class-based inheritance, but prototype-based inheritance. This makes the object model more flexible, but also requires a bit more discipline.

An object can be created using the "new" keyword.

Liquid error: No such file or directory - posix_spawnp

When creating an object, always use the "new" keyword.

This has an effect on the meaning of the "this" variable. If you forget the "new" keyword, "this" will be set to the window, which means everything will end up in the global namespace.

Furthermore, since you don't return anything from the function, the result will be undefined.

To indicate that this is an object that should be instantiated with the "new" keyword, always start the name with an uppercase.

Liquid error: No such file or directory - posix_spawnp

To create methods on the object, add them to the function prototype.

Liquid error: No such file or directory - posix_spawnp

Inner functions don't have access to the object using this. Instead, their "this" points to the window global. To avoid conflicts, use "that".

Liquid error: No such file or directory - posix_spawnp

Scoping

JavaScript does not have block scope. It only has function scope. Variables declared in blocks remain available outside of the block.

To avoid confusion, declare all variables before you use them, at the top of the function.

JSLint will check for this.

Liquid error: No such file or directory - posix_spawnp

Various

Avoid using ++ and -- since they can create tricky code that is prone to errors.

Liquid error: No such file or directory - posix_spawnp

Unit Testing

QUnit makes testing JavaScript easy.

Organize tests into modules. One module = one file.

Here's a complete test example:

Liquid error: No such file or directory - posix_spawnp

Useful resources