Stop Programming in JavaScript By Luck

Stop Programming JavaScript by LuckIowa Code CampNovember 7th 2009Sergio Pereira sergio@sergiopereira.com http://sergiopereira.com/blog @sergiopereira

null vs. undefinedSame thing, right?

null vs. undefinedThey're Different things

null vs. undefinednullvarparentNode = null;bartSimpson.homeState = null;null is intentional

null vs. undefinedundefinedvar list = ['a', 'b', 'c'];list[3]  undefinedfunction echo(p1, p2, p3){return [p1, p2, p3];}echo(11, 22)  [11, 22, undefined]

null vs. undefinedundefinedvar list;list  undefinedlist = ['a', 'b', 'c'];list.length 3list.count undefinedlist['count']  undefinedOmission or mistake

null vs. undefinedundefined vs. not declaredvar list, obj = new Object();alert(list)  undefinedalert(obj.bogusProp)  undefinedalert(bogusVar) error!alert(typeof list)  undefinedalert(typeofbogusVar)  undefined

== , !=, ===, !==Triple equals? Seriously?

== , !=, ===, !==Watch out for Type Coercion

== , !=, ===, !== 0 == falsetrue! 0 == ''true! 0 == '0'true!'' == '0' false 1 == true true! 100 == true  false 1 == '1'true!'1' == true true!'100' == true  falseundefined == nulltrue!

== , !=, ===, !== 0 === false false 0 === '' false 0 === '0' false'' === '0' false 1 === true  false 100 === true  false 1 === '1' false'1' === true  false'100' === true  falseundefined === null false

Boolean ExpressionsAny expression will resolve to a boolean valueif( someValue ){ alert(someValue + 'resolved to true');} else { alert(someValue + 'resolved to false');}

Boolean ExpressionsTruthy and FalsyValues that resolve to falsefalse, 0, null, undefined, NaN, ''They're Falsy

Boolean ExpressionsTruthy and FalsyValues that resolve to trueEverything else

Boolean ExpressionsTruthy and Falsytrue, new Object(), 123,'any string', 'false', '0'They're Truthy

Variable scope: functionif(condition){var v1 = 123;// ...while(something){var v2 = getNext();// ... }}alert(v1 + v2);Watch out for bugs

Variable scope: functionfunction print(price){var tax = computeTaxes(price);function format(number){var dot = decSeparator();// ... tax visible here }// ... dotnot visible herereturn format(price + tax);}

Variables: don't forget varfunction getTotal(items){ weight = getTotalWeight(items); sum = 0;for(i=0; i<items.length; i++){ sum += items[i].price; }shipCost = getShipCost(weight); return sum + shipCost;}

Variables: don't forget varfunction getTotal(items){var weight = getTotalWeight(items);var sum = 0;for(vari=0; i<items.length; i++){ sum += items[i].price; }varshipCost = getShipCost(weight); return sum + shipCost;}

Functions rock in JSThey are 1st class objectsAssigned to variablesPassed to other functionsReturn value of other functionsThey have propertiesThey have methods

Function OverloadsNow that's a best practice!

Function OverloadsJavaScript doesn't have function overloads

Function OverloadsfunctionshowMessage(msg){showMessage(msg, false);}functionshowMessage(msg, isHtml){if(isHtml) { $('#message').html(msg); } else { $('#message').text(msg); }}showMessage('plain text');showMessage('<b>formatted</b>');

The problem with thisDeclarations and Call Sites

The problem with thisA Simple Functionfunction echo(p1, p2){return [this, p1, p2];}A Simple Invocationecho(10, 20)  [window, 10, 20]

The problem with thisMethod Invocationfunction echo(p1, p2){return [this, p1, p2];}var repeater = new Object();repeater.getData = echo;repeater.getData('a', 'b');  [repeater, 'a', 'b']

The problem with thisCall/Applyfunction echo(p1, p2){return [this, p1, p2];}var today = new Date();echo.call(today, 'a', 'b');  [today, 'a', 'b'] echo.apply(today, ['a', 'b']);  [today, 'a', 'b']

The problem with thisConstructorsfunctionFaderEffect(element, duration){this.target = element;this.duration = duration;this.start = function() {//...snip }}var effect = newFaderEffect();

The problem with this5 Ways to Call A Functionecho(10, 20);repeater.getData('a', 'b'); echo.call(today, 'a', 'b'); echo.apply(today, ['a', 'b']); var effect = newFaderEffect();5 Bindings FOR this

The DOM IS scaryUse a good library

Parsing numbers:Specify the radixparseInt('182')  182parseInt('0182')  1parseInt('0x182')  386parseInt('09')  0parseInt('182', 10)  182parseInt('0182', 10)  182parseInt('0x182', 16)  386parseInt('09', 10)  9parseInt('1101', 2)  13

Careful with Datesnew Date()  right nownew Date(2009, 11, 25)  Xmas 2009new Date(2009, 12, 25)  Jan 25th 2010new Date('11/10/2009')  Nov 10th 2009

if(questions){ // or comments}

Thanks!Don't forget to fill the evaluation formsSergio Pereira, sergio@sergiopereira.comsergiopereira.com/blogTwitter: @sergiopereira

Stop Programming in JavaScript By Luck

More Related Content

What's hot (20)

Viewers also liked (16)

Similar to Stop Programming in JavaScript By Luck (20)

Recently uploaded (20)

Stop Programming in JavaScript By Luck