Skip to content

Instantly share code, notes, and snippets.

@rwaldron
Created January 24, 2011 18:20
Show Gist options
  • Save rwaldron/793649 to your computer and use it in GitHub Desktop.
Save rwaldron/793649 to your computer and use it in GitHub Desktop.
Writing Idiomatic JavaScript
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;
@prashantbirajdar999
Copy link

good one... require some more,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment