diff --git a/README.md b/README.md
index 6c87267cce..7a4ffa568a 100644
--- a/README.md
+++ b/README.md
@@ -86,16 +86,16 @@
```javascript
// bad
var superman = {
- class: 'superhero',
- default: { clark: 'kent' },
- private: true
+ class: 'superhero',
+ default: { clark: 'kent' },
+ private: true
};
// good
var superman = {
- klass: 'superhero',
- defaults: { clark: 'kent' },
- hidden: true
+ klass: 'superhero',
+ defaults: { clark: 'kent' },
+ hidden: true
};
```
**[[⬆]](#TOC)**
@@ -120,12 +120,12 @@
// bad
for (i = 0; i < 100; i++) {
- hundredOdds.push(i * 2 + 1);
+ hundredOdds.push(i * 2 + 1);
}
// good
for (i = 0; i < 100; i++) {
- hundredOdds[i] = i * 2 + 1;
+ hundredOdds[i] = i * 2 + 1;
}
```
@@ -151,7 +151,7 @@
// bad
for (i = 0; i < len; i++) {
- itemsCopy[i] = items[i];
+ itemsCopy[i] = items[i];
}
// good
@@ -196,11 +196,11 @@
// good
var errorMessage = 'This is a super long error that ' +
- 'was thrown because of Batman.' +
- 'When you stop to think about ' +
- 'how Batman had anything to do ' +
- 'with this, you would get nowhere ' +
- 'fast.';
+ 'was thrown because of Batman.' +
+ 'When you stop to think about ' +
+ 'how Batman had anything to do ' +
+ 'with this, you would get nowhere ' +
+ 'fast.';
```
- When programatically building up a string, use Array#join instead of string concatenation. Mostly for IE: [jsPerf](http://jsperf.com/string-vs-array-concat/2).
@@ -225,24 +225,24 @@
// bad
function inbox(messages) {
- items = '
';
-
- for (i = 0; i < length; i++) {
- items += '- ' + messages[i].message + '
';
- }
-
- return items + '
';
+ items = '';
+
+ for (i = 0; i < length; i++) {
+ items += '- ' + messages[i].message + '
';
+ }
+
+ return items + '
';
}
// good
function inbox(messages) {
- items = [];
-
- for (i = 0; i < length; i++) {
- items[i] = messages[i].message;
- }
-
- return '';
+ items = [];
+
+ for (i = 0; i < length; i++) {
+ items[i] = messages[i].message;
+ }
+
+ return '';
}
```
@@ -256,17 +256,17 @@
```javascript
// anonymous function expression
var anonymous = function() {
- return true;
+ return true;
};
// named function expression
var named = function named() {
- return true;
+ return true;
};
// immediately-invoked function expression (IIFE)
(function() {
- console.log('Welcome to the Internet. Please follow me.');
+ console.log('Welcome to the Internet. Please follow me.');
})();
```
@@ -275,16 +275,16 @@
```javascript
// bad
if (currentUser) {
- function test() {
- console.log('Nope.');
- }
+ function test() {
+ console.log('Nope.');
+ }
}
// good
if (currentUser) {
- var test = function test() {
- console.log('Yup.');
- };
+ var test = function test() {
+ console.log('Yup.');
+ };
}
```
@@ -293,12 +293,12 @@
```javascript
// bad
function nope(name, options, arguments) {
- // ...stuff...
+ // ...stuff...
}
// good
function yup(name, options, args) {
- // ...stuff...
+ // ...stuff...
}
```
@@ -312,8 +312,8 @@
```javascript
var luke = {
- jedi: true,
- age: 28
+ jedi: true,
+ age: 28
};
// bad
@@ -327,12 +327,12 @@
```javascript
var luke = {
- jedi: true,
- age: 28
+ jedi: true,
+ age: 28
};
function getProp(prop) {
- return luke[prop];
+ return luke[prop];
}
var isJedi = getProp('jedi');
@@ -393,56 +393,58 @@
```javascript
// bad
function() {
- test();
- console.log('doing stuff..');
-
- //..other stuff..
-
- var name = getName();
-
- if (name === 'test') {
- return false;
- }
-
- return name;
+ 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;
+ var name = getName();
+
+ test();
+ console.log('doing stuff..');
+
+ //..other stuff..
+
+ if (name === 'test') {
+ return false;
+ }
+
+ return name;
}
// bad
function() {
- var name = getName();
-
- if (!arguments.length) {
- return false;
- }
-
- return true;
+ var name = getName();
+
+ if (!arguments.length) {
+ return false;
+ }
+
+ return true;
}
// good
function() {
- if (!arguments.length) {
- return false;
- }
-
- var name = getName();
-
- return true;
+ var name;
+
+ if (!arguments.length) {
+ return false;
+ }
+
+ name = getName();
+
+ return true;
}
```
@@ -457,7 +459,7 @@
// we know this wouldn't work (assuming there
// is no notDefined global variable)
function example() {
- console.log(notDefined); // => throws a ReferenceError
+ console.log(notDefined); // => throws a ReferenceError
}
// creating a variable declaration after you
@@ -465,17 +467,17 @@
// variable hoisting. Note: the assignment
// value of `true` is not hoisted.
function example() {
- console.log(declaredButNotAssigned); // => undefined
- var declaredButNotAssigned = true;
+ console.log(declaredButNotAssigned); // => undefined
+ var declaredButNotAssigned = true;
}
// The interpretor is hoisting the variable
// declaration to the top of the scope.
// Which means our example could be rewritten as:
function example() {
- var declaredButNotAssigned;
- console.log(declaredButNotAssigned); // => undefined
- declaredButNotAssigned = true;
+ var declaredButNotAssigned;
+ console.log(declaredButNotAssigned); // => undefined
+ declaredButNotAssigned = true;
}
```
@@ -483,13 +485,13 @@
```javascript
function example() {
- console.log(anonymous); // => undefined
-
- anonymous(); // => TypeError anonymous is not a function
-
- var anonymous = function() {
- console.log('anonymous function expression');
- };
+ console.log(anonymous); // => undefined
+
+ anonymous(); // => TypeError anonymous is not a function
+
+ var anonymous = function() {
+ console.log('anonymous function expression');
+ };
}
```
@@ -497,28 +499,28 @@
```javascript
function example() {
- console.log(named); // => undefined
-
- named(); // => TypeError named is not a function
-
- superPower(); // => ReferenceError superPower is not defined
-
- var named = function superPower() {
- console.log('Flying');
- };
-
-
- // the same is true when the function name
- // is the same as the variable name.
- function example() {
console.log(named); // => undefined
-
+
named(); // => TypeError named is not a function
-
- var named = function named() {
- console.log('named');
+
+ superPower(); // => ReferenceError superPower is not defined
+
+ var named = function superPower() {
+ console.log('Flying');
};
- }
+
+
+ // the same is true when the function name
+ // is the same as the variable name.
+ function example() {
+ console.log(named); // => undefined
+
+ named(); // => TypeError named is not a function
+
+ var named = function named() {
+ console.log('named');
+ };
+ }
}
```
@@ -526,11 +528,11 @@
```javascript
function example() {
- superPower(); // => Flying
-
- function superPower() {
- console.log('Flying');
- }
+ superPower(); // => Flying
+
+ function superPower() {
+ console.log('Flying');
+ }
}
```
@@ -554,8 +556,8 @@
```javascript
if ([0]) {
- // true
- // An array is an object, objects evaluate to true
+ // true
+ // An array is an object, objects evaluate to true
}
```
@@ -564,22 +566,22 @@
```javascript
// bad
if (name !== '') {
- // ...stuff...
+ // ...stuff...
}
// good
if (name) {
- // ...stuff...
+ // ...stuff...
}
// bad
if (collection.length > 0) {
- // ...stuff...
+ // ...stuff...
}
// good
if (collection.length) {
- // ...stuff...
+ // ...stuff...
}
```
@@ -590,19 +592,19 @@
## Blocks
- - Use braces with all multi-line blocks.
+ - Always use braces
```javascript
// bad
if (test)
- return false;
+ return false;
- // good
+ // bad
if (test) return false;
// good
if (test) {
- return false;
+ return false;
}
// bad
@@ -610,7 +612,7 @@
// good
function() {
- return false;
+ return false;
}
```
@@ -630,9 +632,9 @@
// @return element
function make(tag) {
- // ...stuff...
-
- return element;
+ // ...stuff...
+
+ return element;
}
// good
@@ -645,9 +647,9 @@
*/
function make(tag) {
- // ...stuff...
-
- return element;
+ // ...stuff...
+
+ return element;
}
```
@@ -663,21 +665,21 @@
// bad
function getType() {
- console.log('fetching type...');
- // set the default type to 'no type'
- var type = this._type || 'no type';
-
- return type;
+ 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;
+ console.log('fetching type...');
+
+ // set the default type to 'no type'
+ var type = this._type || 'no type';
+
+ return type;
}
```
@@ -686,12 +688,12 @@
## Whitespace
- - Use soft tabs set to 2 spaces
+ - Use soft tabs set to 4 spaces
```javascript
// bad
function() {
- ∙∙∙∙var name;
+ ∙∙var name;
}
// bad
@@ -701,7 +703,7 @@
// good
function() {
- ∙∙var name;
+ ∙∙∙∙var name;
}
```
- Place 1 space before the leading brace.
@@ -709,24 +711,24 @@
```javascript
// bad
function test(){
- console.log('test');
+ console.log('test');
}
// good
function test() {
- console.log('test');
+ console.log('test');
}
// bad
dog.set('attr',{
- age: '1 year',
- breed: 'Bernese Mountain Dog'
+ age: '1 year',
+ breed: 'Bernese Mountain Dog'
});
// good
dog.set('attr', {
- age: '1 year',
- breed: 'Bernese Mountain Dog'
+ age: '1 year',
+ breed: 'Bernese Mountain Dog'
});
```
- Place an empty newline at the end of the file.
@@ -734,14 +736,14 @@
```javascript
// bad
(function(global) {
- // ...stuff...
+ // ...stuff...
})(this);
```
```javascript
// good
(function(global) {
- // ...stuff...
+ // ...stuff...
})(this);
```
@@ -756,11 +758,11 @@
// good
$('#items')
- .find('.selected')
- .highlight()
- .end()
- .find('.open')
- .updateCount();
+ .find('.selected')
+ .highlight()
+ .end()
+ .find('.open')
+ .updateCount();
// bad
var leds = stage.selectAll('.led').data(data).enter().append("svg:svg").class('led', true)
@@ -770,13 +772,13 @@
// good
var leds = stage.selectAll('.led')
- .data(data)
+ .data(data)
.enter().append("svg:svg")
- .class('led', true)
- .attr('width', (radius + margin) * 2)
+ .class('led', true)
+ .attr('width', (radius + margin) * 2)
.append("svg:g")
- .attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")")
- .call(tron.led);
+ .attr("transform", "translate(" + (radius + margin) + "," + (radius + margin) + ")")
+ .call(tron.led);
```
## Leading Commas
@@ -804,10 +806,10 @@
// good
var hero = {
- firstName: 'Bob',
- lastName: 'Parr',
- heroName: 'Mr. Incredible',
- superPower: 'strength'
+ firstName: 'Bob',
+ lastName: 'Parr',
+ heroName: 'Mr. Incredible',
+ superPower: 'strength'
};
```
@@ -821,20 +823,20 @@
```javascript
// bad
(function() {
- var name = 'Skywalker'
- return name
+ var name = 'Skywalker'
+ return name
})()
// good
(function() {
- var name = 'Skywalker';
- return name;
+ var name = 'Skywalker';
+ return name;
})();
// good
;(function() {
- var name = 'Skywalker';
- return name;
+ var name = 'Skywalker';
+ return name;
})();
```
@@ -920,12 +922,12 @@
```javascript
// bad
function q() {
- // ...stuff...
+ // ...stuff...
}
// good
function query() {
- // ..stuff..
+ // ..stuff..
}
```
@@ -938,14 +940,14 @@
var this-is-my-object = {};
function c() {};
var u = new user({
- name: 'Bob Parr'
+ name: 'Bob Parr'
});
// good
var thisIsMyObject = {};
function thisIsMyFunction() {};
var user = new User({
- name: 'Bob Parr'
+ name: 'Bob Parr'
});
```
@@ -954,20 +956,20 @@
```javascript
// bad
function user(options) {
- this.name = options.name;
+ this.name = options.name;
}
var bad = new user({
- name: 'nope'
+ name: 'nope'
});
// good
function User(options) {
- this.name = options.name;
+ this.name = options.name;
}
var good = new User({
- name: 'yup'
+ name: 'yup'
});
```
@@ -987,26 +989,26 @@
```javascript
// bad
function() {
- var self = this;
- return function() {
- console.log(self);
- };
+ var self = this;
+ return function() {
+ console.log(self);
+ };
}
// bad
function() {
- var that = this;
- return function() {
- console.log(that);
- };
+ var that = this;
+ return function() {
+ console.log(that);
+ };
}
// good
function() {
- var _this = this;
- return function() {
- console.log(_this);
- };
+ var _this = this;
+ return function() {
+ console.log(_this);
+ };
}
```
@@ -1015,12 +1017,12 @@
```javascript
// bad
var log = function(msg) {
- console.log(msg);
+ console.log(msg);
};
// good
var log = function log(msg) {
- console.log(msg);
+ console.log(msg);
};
```
@@ -1051,12 +1053,12 @@
```javascript
// bad
if (!dragon.age()) {
- return false;
+ return false;
}
// good
if (!dragon.hasAge()) {
- return false;
+ return false;
}
```
@@ -1064,17 +1066,17 @@
```javascript
function Jedi(options) {
- options || (options = {});
- var lightsaber = options.lightsaber || 'blue';
- this.set('lightsaber', lightsaber);
+ options || (options = {});
+ var lightsaber = options.lightsaber || 'blue';
+ this.set('lightsaber', lightsaber);
}
Jedi.prototype.set = function(key, val) {
- this[key] = val;
+ this[key] = val;
};
Jedi.prototype.get = function(key) {
- return this[key];
+ return this[key];
};
```
@@ -1087,41 +1089,41 @@
```javascript
function Jedi() {
- console.log('new jedi');
+ console.log('new jedi');
}
// bad
Jedi.prototype = {
- fight: function fight() {
- console.log('fighting');
- },
-
- block: function block() {
- console.log('blocking');
- }
+ fight: function fight() {
+ console.log('fighting');
+ },
+
+ block: function block() {
+ console.log('blocking');
+ }
};
// good
Jedi.prototype.fight = function fight() {
- console.log('fighting');
+ console.log('fighting');
};
Jedi.prototype.block = function block() {
- console.log('blocking');
+ console.log('blocking');
};
```
- - Methods can return `this` to help with method chaining.
+ - Methods that have no expected return value should return `this` to allow for method chaining.
```javascript
// bad
Jedi.prototype.jump = function() {
- this.jumping = true;
- return true;
+ this.jumping = true;
+ return true;
};
Jedi.prototype.setHeight = function(height) {
- this.height = height;
+ this.height = height;
};
var luke = new Jedi();
@@ -1130,19 +1132,19 @@
// good
Jedi.prototype.jump = function() {
- this.jumping = true;
- return this;
+ this.jumping = true;
+ return this;
};
Jedi.prototype.setHeight = function(height) {
- this.height = height;
- return this;
+ this.height = height;
+ return this;
};
var luke = new Jedi();
luke.jump()
- .setHeight(20);
+ .setHeight(20);
```
@@ -1150,16 +1152,16 @@
```javascript
function Jedi(options) {
- options || (options = {});
- this.name = options.name || 'no name';
+ options || (options = {});
+ this.name = options.name || 'no name';
}
Jedi.prototype.getName = function getName() {
- return this.name;
+ return this.name;
};
Jedi.prototype.toString = function toString() {
- return 'Jedi - ' + this.getName();
+ return 'Jedi - ' + this.getName();
};
```
@@ -1177,19 +1179,19 @@
// fancyInput/fancyInput.js
!function(global) {
- 'use strict';
-
- var previousFancyInput = global.FancyInput;
-
- function FancyInput(options) {
- this.options = options || {};
- }
-
- FancyInput.noConflict = function noConflict() {
- global.FancyInput = previousFancyInput;
- };
-
- global.FancyInput = FancyInput;
+ 'use strict';
+
+ var previousFancyInput = global.FancyInput;
+
+ function FancyInput(options) {
+ this.options = options || {};
+ }
+
+ FancyInput.noConflict = function noConflict() {
+ global.FancyInput = previousFancyInput;
+ };
+
+ global.FancyInput = FancyInput;
}(this);
```
@@ -1213,25 +1215,25 @@
```javascript
// bad
function setSidebar() {
- $('.sidebar').hide();
-
- // ...stuff...
-
- $('.sidebar').css({
- 'background-color': 'pink'
- });
+ $('.sidebar').hide();
+
+ // ...stuff...
+
+ $('.sidebar').css({
+ 'background-color': 'pink'
+ });
}
// good
function setSidebar() {
- var $sidebar = $('.sidebar');
- $sidebar.hide();
-
- // ...stuff...
-
- $sidebar.css({
- 'background-color': 'pink'
- });
+ var $sidebar = $('.sidebar');
+ $sidebar.hide();
+
+ // ...stuff...
+
+ $sidebar.css({
+ 'background-color': 'pink'
+ });
}
```
@@ -1251,11 +1253,8 @@
// good
$('.sidebar > ul').hide();
- // good (slower)
+ // good
$sidebar.find('ul');
-
- // good (faster)
- $($sidebar[0]).find('ul');
```
**[[⬆]](#TOC)**
@@ -1274,7 +1273,7 @@
```javascript
function() {
- return true;
+ return true;
}
```