Personal JavaScript Style Guide

style_guide.md

JavaScript Style Guide

##Indentation

4 spaces for indent

##"Classes" and Variable names For "classes" and constructors, use UpperCaseClassNames.

var Animal = function() {};

For variables, use lowerCamelCase

var appOutput = "hello world";

Use parentheses when using the new keyword

new Animal();

Variables that should return a boolean value should be prefixed

var isAwesome = true;
var hasPotatoes = false;

##Language Quirks Always use curly braces for if statements

if (isJavaScript) {
  // do stuff    
}

Always use === and !==. If types need to be coerced, do so explicitly.

##Style

###Globals and namespacing Stop leaking into the global namespace: use the module pattern http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

(function(){
	var useModulePattern = "http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth";
})();

##Whitespace Use whitespace liberally

Use empty lines between functions and between the return Spaces between operators

Use spaces between the statement, opening parens, and opening brace. Don't cram them together.

Good:

function example() {
	var thisFunction = "this function";
	var canBe = "can be";
	var reallyLong = "really long"

	return thisFunction + canBe + reallyLong;
}

if (what) {
	// breather
}

Bad:

function aBadExample() {
	var thisFunction="this function";
	var canBe="can be";
	var reallyLong="really long";
	var andUnreadable="and unreadable";
	return thisFunction&&canBe&&reallyLong&&andUnreadable?thisFunction+canBe+reallyLong+andUnreadable:'';
}

if(what){
	//y u no spaces?
}

####Braces

Opening braces should be on the same line, else should be on the closing braces of the if

if (condition) {
	console.log('we have a condition');
}

if (condition) {
	console.log('hi');
} else {
	console.log('bye');
}

##Random Stuff

Limit lines to 80 characters

don't use href="javascript:methodCall()" (why are you using globals anyway?)

don't declare your variables all over the place, put them at the top to be clearer

cache array lengths for use in loops

Bad:

for(var i=0; i< myArray.length;i++){  
	/*do stuff*/  
}

Good:

var len = myArray.length;
for (var i = 0; i < len; i++) {

}

/*cached inside loop*/
for (var i = 0, len = myArray.length; i < len; i++) {

}

/*cached outside loop using while*/
var len = myArray.length;
while (len--) {

}

##Require.js stuff

###Filenames modules that can be called with the new keyword can be considered "classes". Filenames should be UpperCamelCase if they are "classes"

/app/models/Animal.js

This allows for consistency in the consumption of these modules

// filename `Animal` is the same as the function parameter `Animal`
define(['backbone', 'models/Animal'], function (Backbone, Animal) {
	var AnimalCollection = Backbone.Collection.extend({
		model: Animal
	});
	return AnimalCollection;
});

###Module Naming Set the module's name as a variable up top to be returned for clarity, rather than returning immediately

// `Animal` module, at the path /app/models/Animal.js
define(['backbone'],function(Backbone) {
	// set the module to be returned as `Animal`
	// the name of the module
	var Animal = Backbone.Model.extend({
		initialize: function() {
			//
		}
	});
	// return the `Animal` module
	return Animal;
});

##Useful Tools http://jshint.com/

##Examples of Style Guides: http://docs.jquery.com/JQuery_Core_Style_Guidelines

http://guides.sproutcore.com/style_guide.html

http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml

https://github.com/airbnb/javascript