Table of Contents

Types

Objects

Arrays

Strings

Functions

Properties

Variables

Hoisting

Conditional Expressions & Equality

Blocks

Comments

  **[[⬆]](#TOC)**## <a name='whitespace'>Whitespace</a>- Use soft tabs set to 4 spaces  ```javascript  // bad  function() {  ∙∙var name;  }  // bad  function() {  ∙var name;  }  // good  function() {  ∙∙∙∙var name;  }  ```- Place 1 space before the leading brace.  ```javascript  // bad  function test(){      console.log('test');  }  // good  function test() {      console.log('test');  }  // bad  dog.set('attr',{      age: '1 year',      breed: 'Bernese Mountain Dog'  });  // good  dog.set('attr', {      age: '1 year',      breed: 'Bernese Mountain Dog'  });  ```- Place an empty newline at the end of the file.  ```javascript  // bad  (function(global) {      // ...stuff...  })(this);  ```  ```javascript  // good  (function(global) {      // ...stuff...  })(this);  ```  **[[⬆]](#TOC)**## <a name='commas'>Commas</a>- Leading commas: **Nope.**  ```javascript  // bad  var once    , upon    , aTime;  // good  var once,      upon,      aTime;  // bad  var hero = {      firstName: 'Bob'    , lastName: 'Parr'    , heroName: 'Mr. Incredible'    , superPower: 'strength'  };  // good  var hero = {      firstName: 'Bob',      lastName: 'Parr',      heroName: 'Mr. Incredible',      superPower: 'strength'  };  ```- Additional trailing comma: **Nope.** This can cause problems with IE6/7 and IE9 if it's in quirksmode. Also, in some implementations of ES3 would add length to an array if it had an additional trailing comma. This was clarified in ES5 ([source](http://es5.github.io/#D)):> Edition 5 clarifies the fact that a trailing comma at the end of an ArrayInitialiser does not add to the length of the array. This is not a semantic change from Edition 3 but some implementations may have previously misinterpreted this.  ```javascript  // bad  var hero = {      firstName: 'Kevin',      lastName: 'Flynn',  };  var heroes = [      'Batman',      'Superman',  ];  // good  var hero = {      firstName: 'Kevin',      lastName: 'Flynn'  };  var heroes = [      'Batman',      'Superman'  ];  ```  **[[⬆]](#TOC)**## <a name='semicolons'>Semicolons</a>- **Yup.**  ```javascript  // bad  (function() {      var name = 'Skywalker'      return name  })()  // good  (function() {      var name = 'Skywalker';      return name;  })();  ```  **[[⬆]](#TOC)**## <a name='type-coercion'>Type Casting & Coercion</a>- Perform type coercion at the beginning of the statement.- Strings:  ```javascript  //  => this.reviewScore = 9;  // bad  var totalScore = this.reviewScore + '';  // good  var totalScore = '' + this.reviewScore;  // bad  var totalScore = '' + this.reviewScore + ' total score';  // good  var totalScore = this.reviewScore + ' total score';  ```- Use `parseInt` for Numbers and always with a radix for type casting, if you want invalid value to be NaN or the radix is not 10.- If you want invalid values to return 0 and it is a decimal value, use Grooveshark's custom method ```_.toInt()```  ```javascript  var inputValue = '4';  // bad  var val = new Number(inputValue);  // bad  var val = +inputValue;  // bad  var val = inputValue >> 0;  // bad  var val = parseInt(inputValue);  // good  var val = Number(inputValue);  // good  var val = parseInt(inputValue, 10);  // good  var val = _.toInt(inputValue);  ```- If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), don't.- Use Grooveshark's custom method _.toInt() instead - it uses bitshifting for performance in the browsers for which it makes a difference.- Booleans:  ```javascript  var age = 0;  // bad  var hasAge = new Boolean(age);  // good  var hasAge = Boolean(age);  // good  var hasAge = !!age;  ```  **[[⬆]](#TOC)**## <a name='naming-conventions'>Naming Conventions</a>- Avoid single letter names. Be descriptive with your naming.  ```javascript  // bad  function q() {      // ...stuff...  }  // good  function query() {      // ..stuff..  }  ```- Use headlessCamels when naming objects, functions, and instances  ```javascript  // bad  var OBJEcttsssss = {};  var this_is_my_object = {};  var this-is-my-object = {};  function c() {};  var u = new user({      name: 'Bob Parr'  });  // good  var thisIsMyObject = {};  function thisIsMyFunction() {};  var user = new User({      name: 'Bob Parr'  });  ```- Use ProudCamels when naming constructors or classes  ```javascript  // bad  function user(options) {      this.name = options.name;  }  var bad = new user({      name: 'nope'  });  // good  function User(options) {      this.name = options.name;  }  var good = new User({      name: 'yup'  });  ```- Use a leading underscore `_` when naming private properties or methods  ```javascript  // bad  this.__firstName__ = 'Panda';  this.firstName_ = 'Panda';  // good  this._firstName = 'Panda';  ```- When saving a reference to `this` use `_this`.  ```javascript  // bad  function() {      var self = this;      return function() {          console.log(self);      };  }  // bad  function() {      var that = this;      return function() {          console.log(that);      };  }  // good  function() {      var _this = this;      return function() {          console.log(_this);      };  }  ```- Name your functions. This is helpful for stack traces.  ```javascript  // bad  var log = function(msg) {      console.log(msg);  };  // good  var log = function log(msg) {      console.log(msg);  };  ```  **[[⬆]](#TOC)**## <a name='accessors'>Accessors</a>- Accessor functions for properties are not required- If you do make accessor functions use getVal() and setVal('hello')- Grooveshark Note: Nope - Use a Backbone Model if you need getters/setters  ```javascript  // bad  dragon.age();  // good  dragon.getAge();  // bad  dragon.age(25);  // good  dragon.setAge(25);  ```- If the property is a boolean, use isVal() or hasVal()  ```javascript  // bad  if (!dragon.age()) {      return false;  }  // good  if (!dragon.hasAge()) {      return false;  }  ```- It's okay to create get() and set() functions, but be consistent.  ```javascript  function Jedi(options) {      options || (options = {});      var lightsaber = options.lightsaber || 'blue';      this.set('lightsaber', lightsaber);  }  Jedi.prototype.set = function(key, val) {      this[key] = val;  };  Jedi.prototype.get = function(key) {      return this[key];  };  ```  **[[⬆]](#TOC)**## <a name='constructors'>Constructors</a>- Assign methods to the prototype object, instead of overwriting the prototype with a new object. Overwriting the prototype makes inheritance impossible: by resetting the prototype you'll overwrite the base!- Grooveshark Note: Usually you'll never have to worry about this, because Backbone  ```javascript  function Jedi() {      console.log('new jedi');  }  // bad  Jedi.prototype = {      fight: function fight() {          console.log('fighting');      },      block: function block() {          console.log('blocking');      }  };  // good  Jedi.prototype.fight = function fight() {      console.log('fighting');  };  Jedi.prototype.block = function block() {      console.log('blocking');  };  ```- Methods can return `this` to help with method chaining.  ```javascript  // bad  Jedi.prototype.jump = function() {      this.jumping = true;      return true;  };  Jedi.prototype.setHeight = function(height) {      this.height = height;  };  var luke = new Jedi();  luke.jump(); // => true  luke.setHeight(20) // => undefined  // good  Jedi.prototype.jump = function() {      this.jumping = true;      return this;  };  Jedi.prototype.setHeight = function(height) {      this.height = height;      return this;  };  var luke = new Jedi();  luke.jump()    .setHeight(20);  ```- It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects.  ```javascript  function Jedi(options) {      options || (options = {});      this.name = options.name || 'no name';  }  Jedi.prototype.getName = function getName() {      return this.name;  };  Jedi.prototype.toString = function toString() {      return 'Jedi - ' + this.getName();  };  ```  **[[⬆]](#TOC)**## <a name='events'>Events</a>- When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of:  ```js  // bad  $(this).trigger('listingUpdated', listing.id);  ...  $(this).on('listingUpdated', function(e, listingId) {      // do something with listingId  });  ```  prefer:  ```js  // good  $(this).trigger('listingUpdated', { listingId : listing.id });  ...  $(this).on('listingUpdated', function(e, data) {      // do something with data.listingId  });  ```**[[⬆]](#TOC)**## <a name='jquery'>jQuery</a>- Prefix jQuery object variables with a `$`.  ```javascript  // bad  var sidebar = $('.sidebar');  // good  var $sidebar = $('.sidebar');  ```- Cache jQuery lookups.  ```javascript  // bad  function setSidebar() {      $('.sidebar').hide();      // ...stuff...      $('.sidebar').css({          'background-color': 'pink'      });  }  // good  function setSidebar() {      var $sidebar = $('.sidebar');      $sidebar.hide();      // ...stuff...      $sidebar.css({          'background-color': 'pink'      });  }  ```- For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16)- Use `find` with scoped jQuery object queries.  ```javascript  // bad  $('.sidebar', 'ul').hide();  // bad  $('.sidebar').find('ul').hide();  // good  $('.sidebar ul').hide();  // good  $('.sidebar > ul').hide();  // good (slower)  $sidebar.find('ul');  // good (faster)  $($sidebar[0]).find('ul');  ```  **[[⬆]](#TOC)**## <a name='es5'>ECMAScript 5 Compatibility</a>- Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.com/es5-compat-table/)**[[⬆]](#TOC)**## <a name='testing'>Testing</a>- **Yup.**  ```javascript  function() {      return true;  }  ```  **[[⬆]](#TOC)**## <a name='performance'>Performance</a>- [On Layout & Web Performance](http://kellegous.com/j/2013/01/26/layout-performance/)- [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2)- [Try/Catch Cost In a Loop](http://jsperf.com/try-catch-in-loop-cost)- [Bang Function](http://jsperf.com/bang-function)- [jQuery Find vs Context, Selector](http://jsperf.com/jquery-find-vs-context-sel/13)- [innerHTML vs textContent for script text](http://jsperf.com/innerhtml-vs-textcontent-for-script-text)- [Long String Concatenation](http://jsperf.com/ya-string-concat)- Loading...**[[⬆]](#TOC)**## <a name='resources'>Resources</a>**Read This**- [Annotated ECMAScript 5.1](http://es5.github.com/)**Other Styleguides**- [Google JavaScript Style Guide](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)- [jQuery Core Style Guidelines](http://docs.jquery.com/JQuery_Core_Style_Guidelines)- [Principles of Writing Consistent, Idiomatic JavaScript](https://github.com/rwldrn/idiomatic.js/)**Other Styles**- [Naming this in nested functions](https://gist.github.com/4135065) - Christian Johansen- [Conditional Callbacks](https://github.com/airbnb/javascript/issues/52)**Further Reading**- [Understanding JavaScript Closures](http://javascriptweblog.wordpress.com/2010/10/25/understanding-javascript-closures/) - Angus Croll**Books**- [#"hidden" data-csrf="true" value="4d7SynlxGiwyMEh4E9K5dcu9N38VeGaifh40y+/SCf10aalxWrEhAM9dKoj6DF9xNvlZZ03jf7T57JbrFZfJzg==" />