Writing Idiomatic JavaScript

style-guide.js

1. Two space soft indents (fake tabs) OR tabs... BUT NEVER BOTH - DO NOT MIX

2. Whitespace, Parens, Braces, Linebreaks

  
  
  if/else/for/while/try always have spaces, braces and multiple lines.
  --------------------------------------------------------------------

  
  
  //  Bad
  
  if(condition) doSomething();
  
  while(condition) iterating++;
  
  for(var i=0;i<100;i++) someIterativeFn();
  
  
  //  Good
  if ( condition ) {
    
    doSomething();
  
  }
  
  //  Good
  while ( condition ) {
    
    iterating++;
    
  }

  //  Good  
  for ( var i = 0; i < 100; i++ ) {
    
    someIterativeFn();
    
  }
  
  

  //  Bad
  if ( true )
    foo();

  //  Good
  if ( true ) {
    foo();
  }  
  
  
  //  Bad
  if ( true ) return;
  if ( true ) blah();

  //  Good
  if ( true ) {
    return;
  }

  //  Good
  if ( true ) {
    blah();
  }  

  //  Good  
  if ( true ) {
    
    foo();
    
  } else {
    
    bar();
  }  
  
  
  
  
  Whitespace in Function declarations, assignments and expressions
  --------------------------------------------------------------------
  
  //  Good
  function foo( arg1, argN ) {
  
  }

  //  Good
  var f = foo( arg1, argN );
  
  //  Good
  function bar( arg1, callback ) {
  
  }
  
  //  Good
  var b = bar( arg1, function() {
  
  });
  
  //  Good
  function FooBar( arg1, argN ) {
    
  }
  
  //  Good
  var fooBar = new FooBar( arg1, argN );
  
  //  Good
  var a = [ 1, 2, 3, 4 ];
  
  //  Good
  foo( a[1] );
  
  
  
  Conditional Block Whitespace
  --------------------------------------------------------------------
  
  
  //  Bad
  if(blah==='foo'){
   foo('bar','baz',{zoo:1});
  }

  //  Good
  if ( blah === "foo" ) {
    foo( "bar", "baz", { zoo: 1 } );
  }  
  
  
  
  Don't use tabs inside a line.
  --------------------------------------------------------------------
  
  
  var a = true,
      // Bad
      c   = false,
      // Good
      b = false;


  
  EXCEPTIONS: Paren whitespace 
  --------------------------------------------------------------------

  //  Functions with callbacks 
  foo(function() { 
      ^ No space

  });
  ^ No space
  
  
  //  Functions accepting arrays
  foo([   ]);
  
  //  Functions accepting object
  foo({   });  
      ^    ^ No space
      
      
  //  Inner parens:
  if ( !("foo" in obj) ) {
         ^           ^ No Space
  }
  
  
3. Style  

  var Module = (function() {
                ^ No space
                
    // really private 
    var private = "secret";
    
    return {
      
      // pseudo private 
      _props: {
        
        bool: true, 
        
        string: "a string",
        
        array: [ 1, 2, 3, 4 ], 
        
        object: {
          
          lang: "en-Us"
          
        }
      }, 
      
      _method: function() {
        // pseudo private 
      }, 
      
      getBool: function() {
        // comments
        return this._props.bool;
      }
      setBool: function( arg1 ) {
        // comments
        return ( this._props.bool = arg1 );
      }
    };
  })();
  
  * NOTE: Comments are never at the end of the line, 
          always on the line above.
  
  
  
4. Naming

  `dog` is a string
  
  `dogs` is an array of `dog` strings
  
  
  camelCase; function and var declarations
  
  PascalCase; constructor function
  
  
  `idx` is an index
  
  `fn` is a function
  
  
  Use {} instead of new Object(). Use [] instead of new Array().
  
  

5. Conditions, Evaluation, Ducktyping, Etc.

  ALWAYS USE `===` OVER `==` (unless the case requires loose type evaluation )
  
  
  Truthy/Falsy Evaluation: (includes real `true` & `false` for explanation purpose)
  
  var truthy = ("foo" | 1 | true),
      falsy = (false | null | undefined | 0 | "" | NaN);

  //  BAD *
  if ( typeof undef === "undefined" ) {

  }
  
  // Good
  if ( !("undef" in window) ) {
  
  }

  //  Bad * 
  if ( falsy === false ) {

  }

  //  Good
  if ( !falsy ) {

  }
  
  //  Bad
  if ( array.length >= 1 ) {
  
  }
  
  //  Good
  if ( array.length ) {
    //  evaluates the same as above
  }
  
  //  Good
  if ( truthy ) {

  }
  

  * Unless the case requires a check for `false` where a match to `undefined` or `null`
    would be incorrect.



  Using `switch` should be avoided. 
  --------------------------------------------------------------------
  
  * Modern method tracing will blacklist functions with switch statements


  //  Bad:

  switch( foo ) {

    case "alpha":
      alpha();
      break;

    case "beta":
      beta();
      break;

    default:
      // something to default to
      break;
  }


  //  Really good:

  var module = (function () {

    return {

      alpha: function() {

      }, 
      beta: function() {

      }, 
      default: function() {

      }
    };        
  })();

  //  If `foo` is a property of `module`, execute the method 
  module[ foo ] && module[ foo ]();

  
  //  This pattern is also really good because it promotes code reusability.
  


  Early returns are nice perf boosts
  --------------------------------------------------------------------

  //  Instead of this:
  function returnLate( foo )  {
    var ret;

    if ( foo ) {

      ret = "foo";

    } else {

      ret = "quux";
    }  

    return ret;
  }

  //  Try this:

  function returnEarly( foo ) {

    if ( foo ) {

      return "foo";
    }

    return "quux";
  }




5. Comments

  JSDoc style is good
  
  
  Single line above the code that is subject
  
  
  End of line comments are prohibited.
  
  
  
6. Variable Declaration  

    BAD:
    
    var foo = "";
    var bar = "";
    var qux;
    
    
    GOOD:
    
    var foo = "", 
        bar = "", 
        qux;

  

good one... require some more,