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 = ''; + 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; } ```