Sergio Pereira's presentation at the Iowa Code Camp on September 7th 2009.

1. Stop Programming JavaScript by Luck Iowa Code Camp November 7th 2009 Sergio Pereira sergio@sergiopereira.com http://sergiopereira.com/blog @sergiopereira

2. null vs. undefined Same thing, right?

3. null vs. undefined They're Different things

4. null vs. undefined null varparentNode = null; bartSimpson.homeState = null; null is intentional

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

6. null vs. undefined undefined var list; list  undefined list = ['a', 'b', 'c']; list.length 3 list.count undefined list['count']  undefined Omission or mistake

7. null vs. undefined undefined vs. not declared var list, obj = new Object(); alert(list)  undefined alert(obj.bogusProp)  undefined alert(bogusVar) error! alert(typeof list)  undefined alert(typeofbogusVar)  undefined

8. == , !=, ===, !== Triple equals? Seriously?

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

10. == , !=, ===, !== 0 == falsetrue! 0 == ''true! 0 == '0'true! '' == '0' false 1 == true true! 100 == true  false 1 == '1'true! '1' == true true! '100' == true  false undefined == nulltrue!

11. == , !=, ===, !== 0 === false false 0 === '' false 0 === '0' false '' === '0' false 1 === true  false 100 === true  false 1 === '1' false '1' === true  false '100' === true  false undefined === null false

12. Boolean Expressions Any expression will resolve to a boolean value if( someValue ){ alert(someValue + 'resolved to true'); } else { alert(someValue + 'resolved to false'); }

13. Boolean Expressions Truthy and Falsy Values that resolve to false false, 0, null, undefined, NaN, '' They're Falsy

14. Boolean Expressions Truthy and Falsy Values that resolve to true Everything else

15. Boolean Expressions Truthy and Falsy true, new Object(), 123, 'any string', 'false', '0' They're Truthy

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

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

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

19. Variables: don't forget var function 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; }

20. Functions rock in JS They are 1st class objects Assigned to variables Passed to other functions Return value of other functions They have properties They have methods

21. Function Overloads Now that's a best practice!

22. Function Overloads JavaScript doesn't have function overloads

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

24. The problem with this Declarations and Call Sites

25. The problem with this A Simple Function function echo(p1, p2){ return [this, p1, p2]; } A Simple Invocation echo(10, 20)  [window, 10, 20]

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

27. The problem with this Call/Apply function 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']

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

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

30. Some Advice

31. The DOM IS scary Use a good library

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

33. Careful with Dates new Date()  right now new Date(2009, 11, 25)  Xmas 2009 new Date(2009, 12, 25)  Jan 25th 2010 new Date('11/10/2009')  Nov 10th 2009

34. Any good books?

35. Yes, the newer ones

36. if(questions){ // or comments }

37. Thanks! Don't forget to fill the evaluation forms Sergio Pereira, sergio@sergiopereira.com sergiopereira.com/blog Twitter: @sergiopereira