JS BEST PRACTICES@trevor_landau

INDENTATION AND SPACING

var beer;if(x>7 || type==='delicious beer'){ beer=getDeliciousBeer("Stella Artois");}else{beer=getCrummyBeer("Pabst Blue Ribbon");}

var beer;if( x > 7 || type === 'delicious beer' ) {

beer = getDeliciousBeer( "Stella Artois" );

} else {

beer = getCrummyBeer( "Pabst Blue Ribbon" );

}

WHERE DO I DECLARE VAR?

var javascript, php, python, ruby;javascript = 'SO AWESOME!';

// ... long code ...

if ( true ) { php = 'not that good';}

// ... more stuff ...python = 'pretty good, but not as awesome as js';

STAY CONSISTENT!

var dos_equis = beerFactory('mexican');me.drink_A_Beer( dos_equis );var isSober = check_if_sober( me );

var dosEquis = beerFactory('mexican');me.drinkBeer( dosEquis );var isSober = checkIfSober( me );

UPPERCASE CLASS NAMES

function Beer( size, potency ) { ....}var beer = new Beer( '40oz', '12.5%' );

GOOD NAMES

var z = new Beer( ... ); // Ew, grossvar frostyColdBeerThatWillGiveMeChills = new Beer( ... ); // Blech

var corona = new Beer( ... ); // Better!

var convertTextToHTMLusingAnAmazingAlgorithm = function ( ... ) { ... };var convertTextToHTML = function ( ... ) { // NICE! ...};

USE OPTIONS OBJECTS

function User( username, fname, lname, bday, age, ... ) { ... }

function User( options ) { this.fname = options.fname;}

var user = new User({ fname: 'Trevor', lname: 'Landau', username: 'tlandau', age: 26});

USE LITERALS

var arr;arr = new Array(1, 2, 3, 4);arr = new Array( 3 ); // [ undefined, undefined, undefined ]arr = [ 3 ]; // there we go

drinkBeerFlight( new Array('Heinekin', 'Guiness') );drinkBeerFlight( [ 'Heinekin', 'Guiness' ] );

var obj;obj = { favoriteBeer: 'Stella Artois'};obj = new Object({ favoriteBeer: 'Stella Artois'});

AVOID GLOBALS

window.app = { VERSION: 1.0, bar: { people: [ trevor, ohad, brad ], stock: [ StellaArtois, Corona, RedStripe ] }};var trevor = app.bar.people[0];trevor.drinkBeer();

"USE STRICT"

function makeVars() { "use strict"; var scrumptiousBeer = 'Kirin Ichiban';

crummyBeer = 'Natural Light'; // ReferenceError}

// Immediately Invoked Function Expression// IIFE ( If-E )(function () { "use strict"; // Everything is safely contained}());

USE COMMENTS!

/* * @class CollegeStudent * @description This class does some hardcore stuff */function CollegeStudent ( ... ) { this.tolerance = tolerance;}CollegeStudent.prototype = { /* * @method drinkBeer * @description Drinks a (hopefully) tasty beer * @param beer {Beer} * @param isBottled {Boolean} * @return {Boolean} */ drinkBeer: function ( beer, isBottled ) { // this complicated formula makes get you drunk return beer.alcoholLevel * this.tolerance; }};

CACHE, CACHE, CACHE!

function longCalc( num ) { if ( longCalc.cache[ num ] ) { return longCalc.cache[ num ]; } var i, val = 0; for ( i = 0; i < num; i += 1 ) { val += i; } longCalc.cache[ num ] = val; return val;}longCalc.cache = {};

MAKE REFERENCES

var bar = { beers: { stout: { Guiness: new Beer( ... ) } }};var ohadsBeer = new bar.beers.stout.Guiness();var trevorsBeer = new bar.beers.stout.Guiness();

var bar = { beers: { stout: { Guiness: new Beer( ... ) } }};var Guiness = bar.beers.stout.Guiness;var trevorsBeer = new Guiness();

MAKE REFERENCES CONT...

var beers = [ kirinIchiban, sapporo ];var i;for ( i = 0; i < beers.length; i += 1 ) { beers[ i ].beDelicious(); beers[ i ].isJapanese();}

var beers = [ kirinIchiban, sapporo ];var i, beer, len = beers.length;

for ( i = 0; i < len; i += 1 ) { beer = beers[ i ]; beer.beDelicious(); beer.isJapanese();}

CHAINING

SuperHero.prototype.fly = function () { // Code to fly};SuperHero.prototype.saveDay = function () { // Code to save day};hero.fly();hero.saveDay();

SuperHero.prototype.fly = function () { // Code to fly return this;};SuperHero.prototype.saveDay = function () { // Code to save day return this;};hero.fly().saveDay();

LINTINGDON'T FORGET YOUR SEMICOLONS

or jslint jshint

function reallyBadFn() { foulTastingBeer = 'Natural Light';

var listOfGoodBeers = [ 'Stella Artois' 'Corona', 'Sam Adams' ] ( 4 + 10 )}

ONE MORE THING...Documentation

Ask Questions

Don't Reinvent the Wheel

Don't Copy/PasteRead the source, Luke!

Mozilla Developer Networkw3schools (w3fools)

StackoverflowGoogle

DOM manipulation ( jQuery )MVC ( Backbone js )Data Visualizations ( d3 )

QUESTIONS?

THANK YOU

Twitter: @trevor_landauwww.trevorlandau.net/presentations/bestpractice

Javascript: The Good PartsJavascript: The Definitive GuideJavascript PatternsSecrets of the JavaScript NinjaPrecursor to Secrets of JS NinjaEloquent Javascript ( free )More Resources