Stop Programming in JavaScript By Luck

1,630 views

Published on

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

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
1,630
On SlideShare
0
From Embeds
0
Number of Embeds
349
Actions
Shares
0
Downloads
0
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Stop Programming in JavaScript By Luck

  1. 1. Stop Programming JavaScript by Luck<br />Iowa Code Camp<br />November 7th 2009<br />Sergio Pereira<br /> sergio@sergiopereira.com<br /> http://sergiopereira.com/blog<br /> @sergiopereira<br />
  2. 2. null vs. undefined<br />Same thing, right?<br />
  3. 3. null vs. undefined<br />They&apos;re Different things<br />
  4. 4. null vs. undefined<br />null<br />varparentNode = null;<br />bartSimpson.homeState = null;<br />null is intentional<br />
  5. 5. null vs. undefined<br />undefined<br />var list = [&apos;a&apos;, &apos;b&apos;, &apos;c&apos;];<br />list[3]  undefined<br />function echo(p1, p2, p3){<br />return [p1, p2, p3];<br />}<br />echo(11, 22)  [11, 22, undefined]<br />
  6. 6. null vs. undefined<br />undefined<br />var list;<br />list  undefined<br />list = [&apos;a&apos;, &apos;b&apos;, &apos;c&apos;];<br />list.length 3<br />list.count undefined<br />list[&apos;count&apos;]  undefined<br />Omission or mistake<br />
  7. 7. null vs. undefined<br />undefined vs. <br />not declared<br />var list, obj = new Object();<br />alert(list)  undefined<br />alert(obj.bogusProp)  undefined<br />alert(bogusVar) error!<br />alert(typeof list)  undefined<br />alert(typeofbogusVar)  undefined<br />
  8. 8. == , !=, ===, !==<br />Triple equals? Seriously?<br />
  9. 9. == , !=, ===, !==<br />Watch out for <br />Type Coercion<br />
  10. 10. == , !=, ===, !==<br /> 0 == falsetrue!<br /> 0 == &apos;&apos;true!<br /> 0 == &apos;0&apos;true!<br />&apos;&apos; == &apos;0&apos; false<br /> 1 == true true!<br /> 100 == true  false<br /> 1 == &apos;1&apos;true!<br />&apos;1&apos; == true true!<br />&apos;100&apos; == true  false<br />undefined == nulltrue!<br />
  11. 11. == , !=, ===, !==<br /> 0 === false false<br /> 0 === &apos;&apos; false<br /> 0 === &apos;0&apos; false<br />&apos;&apos; === &apos;0&apos; false<br /> 1 === true  false<br /> 100 === true  false<br /> 1 === &apos;1&apos; false<br />&apos;1&apos; === true  false<br />&apos;100&apos; === true  false<br />undefined === null false<br />
  12. 12. Boolean Expressions<br />Any expression will resolve <br />to a boolean value<br />if( someValue ){<br /> alert(someValue + &apos;resolved to true&apos;);<br />} else {<br /> alert(someValue + &apos;resolved to false&apos;);<br />}<br />
  13. 13. Boolean Expressions<br />Truthy and Falsy<br />Values that resolve to false<br />false, 0, null, <br />undefined, NaN, &apos;&apos;<br />They&apos;re Falsy<br />
  14. 14. Boolean Expressions<br />Truthy and Falsy<br />Values that resolve to true<br />Everything else<br />
  15. 15. Boolean Expressions<br />Truthy and Falsy<br />true, new Object(), 123,<br />&apos;any string&apos;, &apos;false&apos;, &apos;0&apos;<br />They&apos;re Truthy<br />
  16. 16. Variable scope: function<br />if(condition){<br />var v1 = 123;<br />// ...<br />while(something){<br />var v2 = getNext();<br />// ...<br /> }<br />}<br />alert(v1 + v2);<br />Watch out for bugs<br />
  17. 17. Variable scope: function<br />function print(price){<br />var tax = computeTaxes(price);<br />function format(number){<br />var dot = decSeparator();<br />// ... tax visible here<br /> }<br />// ... dotnot visible here<br />return format(price + tax);<br />}<br />
  18. 18. Variables: don&apos;t forget var<br />function getTotal(items){<br /> weight = getTotalWeight(items);<br /> sum = 0;<br />for(i=0; i&lt;items.length; i++){<br /> sum += items[i].price;<br /> }<br />shipCost = getShipCost(weight);<br /> return sum + shipCost;<br />}<br />
  19. 19. Variables: don&apos;t forget var<br />function getTotal(items){<br />var weight = getTotalWeight(items);<br />var sum = 0;<br />for(vari=0; i&lt;items.length; i++){<br /> sum += items[i].price;<br /> }<br />varshipCost = getShipCost(weight);<br /> return sum + shipCost;<br />}<br />
  20. 20. Functions rock in JS<br />They are 1st class objects<br />Assigned to variables<br />Passed to other functions<br />Return value of other functions<br />They have properties<br />They have methods<br />
  21. 21. Function Overloads<br />Now that&apos;s a best practice!<br />
  22. 22. Function Overloads<br />JavaScript doesn&apos;t have function overloads<br />
  23. 23. Function Overloads<br />functionshowMessage(msg){<br />showMessage(msg, false);<br />}<br />functionshowMessage(msg, isHtml){<br />if(isHtml) {<br /> $(&apos;#message&apos;).html(msg);<br /> } else {<br /> $(&apos;#message&apos;).text(msg);<br /> }<br />}<br />showMessage(&apos;plain text&apos;);<br />showMessage(&apos;&lt;b&gt;formatted&lt;/b&gt;&apos;);<br />
  24. 24. The problem with this<br />Declarations <br />and <br />Call Sites<br />
  25. 25. The problem with this<br />A Simple Function<br />function echo(p1, p2){<br />return [this, p1, p2];<br />}<br />A Simple Invocation<br />echo(10, 20)  [window, 10, 20]<br />
  26. 26. The problem with this<br />Method Invocation<br />function echo(p1, p2){<br />return [this, p1, p2];<br />}<br />var repeater = new Object();<br />repeater.getData = echo;<br />repeater.getData(&apos;a&apos;, &apos;b&apos;); <br /> [repeater, &apos;a&apos;, &apos;b&apos;] <br />
  27. 27. The problem with this<br />Call/Apply<br />function echo(p1, p2){<br />return [this, p1, p2];<br />}<br />var today = new Date();<br />echo.call(today, &apos;a&apos;, &apos;b&apos;); <br /> [today, &apos;a&apos;, &apos;b&apos;] <br />echo.apply(today, [&apos;a&apos;, &apos;b&apos;]); <br /> [today, &apos;a&apos;, &apos;b&apos;] <br />
  28. 28. The problem with this<br />Constructors<br />functionFaderEffect(element, duration){<br />this.target = element;<br />this.duration = duration;<br />this.start = function() {<br />//...snip<br /> }<br />}<br />var effect = newFaderEffect();<br />
  29. 29. The problem with this<br />5 Ways to Call A Function<br />echo(10, 20);<br />repeater.getData(&apos;a&apos;, &apos;b&apos;); <br />echo.call(today, &apos;a&apos;, &apos;b&apos;); <br />echo.apply(today, [&apos;a&apos;, &apos;b&apos;]); <br />var effect = newFaderEffect();<br />5 Bindings FOR this<br />
  30. 30. Some Advice<br />
  31. 31. The DOM IS scary<br />Use a good library<br />
  32. 32. Parsing numbers:<br />Specify the radix<br />parseInt(&apos;182&apos;)  182<br />parseInt(&apos;0182&apos;)  1<br />parseInt(&apos;0x182&apos;)  386<br />parseInt(&apos;09&apos;)  0<br />parseInt(&apos;182&apos;, 10)  182<br />parseInt(&apos;0182&apos;, 10)  182<br />parseInt(&apos;0x182&apos;, 16)  386<br />parseInt(&apos;09&apos;, 10)  9<br />parseInt(&apos;1101&apos;, 2)  13<br />
  33. 33. Careful with Dates<br />new Date()  right now<br />new Date(2009, 11, 25)  Xmas 2009<br />new Date(2009, 12, 25)  Jan 25th 2010<br />new Date(&apos;11/10/2009&apos;)  Nov 10th 2009<br />
  34. 34. Any good books?<br />
  35. 35. Yes, the newer ones<br />
  36. 36. if(questions){<br /> // or comments<br />}<br />
  37. 37. Thanks!<br />Don&apos;t forget to fill the evaluation forms<br />Sergio Pereira, sergio@sergiopereira.com<br />sergiopereira.com/blog<br />Twitter: @sergiopereira<br />

×