jsgreat
Our JavaScript code will (mostly) follow the Google JavaScript Style Guide. A few slight variations and additions are laid out below. There will also be exceptions to these rules in some existing code, but where possible, existing code should be updated as it is edited to conform to the style guide.
Many of these options will be enforced by this .jshintrc file. This file can be used by tools that support JSHint integration. For most projects, it is strongly recommended to use Grunt and the grunt-contrib-jshint plugin to run jshint.
The following additions and variations will be enforced:
Strings
The guide prefers '
over "
. We only require that quotes are used consistently within the file. This will be enforced by jshint.
Indentation
Prefer 2-space indentation for all Javascript and JSON files.
Multiple Vars
Prefer multiple var
statements, each on their own line, for any variables that have assignments. Multiple variables without assignments can be var
ed together on a single line.
Don't do this:
var foo = 'foo',
bar = 'bar',
baz = 'baz';
Do this instead:
var foo = 'foo';
var bar = 'bar';
var baz = 'baz';
This is okay, too:
var foo, bar, baz;
Function Declarations vs. Function Expressions
Prefer var
ed function expressions over function declarations.
Don't do this:
function() {
function foo() { ... };
}();
Do this instead:
function() {
var foo = function() { ... };
}();
Aligning Assignments
Variable assignments should not be aligned by value.
Don't do this:
var foo = 'foo';
var bar = 'bar';
var fizzbuzz = 'fizzbuzz';
var obj = {
foo : 'foo',
bar : 'bar',
fizzbuzz: 'fizzbuzz'
};
Do this instead:
var foo = 'foo';
var bar = 'bar';
var fizzbuzz = 'fizzbuzz';
var obj = {
foo: 'foo',
bar: 'bar',
fizzbuzz: 'fizzbuzz'
};
Anonymous Callback Functions
Prefer var
ed function expressions over anonymous functions for callbacks where it makes sense.
Don't do this:
$('.someElement').click(function(){
console.log('It was clicked!');
});
Do this instead:
var logItWasClicked = function(){
console.log('It was clicked!');
});
$('.someElement').click(logItWasClicked);
This is especially important in new
ed objects like Backbone Models and Views, where scope is important, and callbacks often reference other properties on the instance.
Manipulating this
context
Prefer calling functions in the required scope vs. saving this
in a that
or self
variable.
Don't do this:
var MyModule = {
message: 'Hello World!',
doGetAndCallback: function(callback){
var that = this;
$.get('some/ajax/request', function(){
callback(that.message);
});
}
};
Do either of these instead:
var MyModule = {
message: 'Hello World!',
doGetAndCallback: function(callback){
var message = this.message;
$.get('some/ajax/request', function(){
callback(message);
});
}
};
var MyModule = {
message: 'Hello World!',
doGetAndCallback: function(callback){
$.get('some/ajax/request', _.bind(function(){
callback(this.message);
}, this));
}
};
Or, better yet, return a Deferred/Promise, and let the caller setup the callback on their end:
var MyModule={
message: 'Hello World!',
doGet: function(){
return $.get('some/ajax/request');
}
};
Curly Braces
Curly braces are required around blocks in loops and conditionals. This is enforced by jshint.
Don't do this:
if(foo)
console.log('bar');
Do this instead:
if(foo){
console.log('bar');
}
Strict Mode
All modules should be wrapped in IIFEs or RequireJS CommonJS define calls, and use strict mode. This will be enforced by JSHint
(function(){
'strict mode';
})();
Or
define(function(require, exports, module)){
'strict mode';
});
Unused Variables
Unused variables should be removed from the code when they are no longer needed. This will be enforced by jshint.
Because some libraries expect function arguments with specific names and signatures, function parameters that are not used will not be ignored.
Don't do this:
var x;
But this is okay:
define(function(require, exports, module){
});
Coerced Types and Equality
Prefer ===
over ==
. This will be enforced by JShint.
However, there is an exception for null
comparisons. i.e. == null
is acceptable.
Undefined Variables
All variables must be explicitly defined. This option will be enforced by JSHint.
This is a simple way to catch mistyped variable names and copy/paste errors, but it also helps to prevent over-dependence on the global namespace, and forces modules to be more explicit about their dependencies.
One specific example of why this can be important is in Backbone views, which use a scoped $
function to find elements inside the view. If you accidentally use the global $('.selector')
instead of this.$('.selector')
, you're searching the full DOM instead of just your view.
Using Variables Before Definition
Variables must be defined earlier in the code than they are used. (Hoisting makes it possible to accidentally use a variable before it's defined.) This will be enforced by JSHint.
Trailing Whitespace
Lines shouldn't have whitespace at the end. We've always enforced this. Now JSHint will enforce it.
80 Column Limit
Although the style guide isn't fully explicit about it, lines should not exceed 80 characters.