by tommymontgomery § may 21 2010<br />How to Not Suck at JavaScript<br />
Why you should love JavaScript<br />
Why you should love JavaScript<br />It’s everywhere<br />
Why you should love JavaScript<br />It’s everywhere<br />You have to<br />
Why you should love JavaScript<br />It’s everywhere<br />You have to<br />
The most important thing<br />
The most important thing<br />Scope<br />JavaScript has no block scope<br />JavaScript has lots of lexical scope<br />Java...
JavaScript does not have block scope<br />
Firebug Confirms<br />
What about var?<br />var PREVENTS global scope inside functions<br />Scoping <br />
Lexical Scope<br />Language parsing happens in phases:<br />Phase 1: Lexing (tokenizing)<br />Phase 2: Parsing<br />Phase ...
Lexical Scope<br />Variables declared in the current lexical environment are in lexical scope<br />E.g. function parameter...
Dynamic Scope<br />Remember when we didn’t use varthat one time? That’s called dynamic scope.<br />Global stack of variabl...
Closures<br />Lexical scope allows us to use closures<br />
Closures<br />A closure is:<br />
Closures<br />A closure is: difficult to explain<br />
Closures<br />A closure is: difficult to explain<br />
Closure Example<br />
…<br />
Closure Example<br />How can this be more awesome?<br />
Closure Example<br />How can this be more awesome?<br />Problem: the symbols variable is global<br />
Closure Example<br />How can this be more awesome?<br />Problem: the symbols variable is global<br />Solution: be awesome<...
Closure Example<br />
Closure Example<br />symbols is no longer global because it’s scope is limited to the function<br />
Currying<br />Currying is:<br />
Currying<br />Currying is: difficult to explain<br />
Currying Example<br />So, I totally thought I had an example of where I used currying, but I was actually uncurrying. But ...
Triple your fun…<br />
Triple your fun…<br />
Solution #1<br />
Solution #1<br />Still a lot of duplicated code<br />Looks stupid<br />
Solution #2: Uncurrying<br />
Currying<br />Currying is when you have a function that takes two parameters, and you turn it into a function that takes o...
Currying (and uncurrying)<br />Currying is when you have a function that takes two parameters, and you turn it into a func...
lolcat<br />
The Module Pattern<br />Coined by Douglas Crockford of JSON/Yahoo! fame<br />A JavaScript design pattern for creating priv...
The Module Pattern<br />Makes heavy use of the fact that functions are the only way to create lexical scope<br />Creates p...
The Module Pattern<br />
The Module Pattern<br />
The Module Pattern<br />That’s all there is to it<br />But always remember…<br />
DON’T EVER POLLUTE THE GLOBAL NAMESPACE.<br />
Inheritance<br />Inheritance is tricky in JavaScript<br />There are two types:<br />Classical (like Java)<br />Prototypal ...
Classical Inheritance<br />Classical inheritance is hard in JavaScript<br />There is no extends<br />There is no implement...
Classical Inheritance<br />
Classical Inheritance<br />If you don’t use prototype, then evict is not defined on our Cat instance<br />Think of it as a...
Classical Inheritance<br />
Classical Inheritance<br />What’s missing?<br />Access to super/base/parent<br />Private/protected members<br />Interfaces...
Classical Inheritance<br />Don’t ever do it yourself<br />Use John Resig’s implementation<br />http://ejohn.org/blog/simpl...
The Juiciest Part<br />
Prototypal Inheritance<br />Scary<br />Unknown<br />Sounds cool<br />
Prototypal Inheritance<br />Inherit from object, rather than classes<br />
Prototypal Inheritance<br />
Prototypal Inheritance<br />Object.create() from Douglas Crockford<br />Everybody uses it<br />Because JavaScript’s new ke...
Inheritance<br />Classical<br />Classes inherit from classes<br />Prototypal<br />Objects inherit from objects<br />
How to not suck at JavaScript
Nächste SlideShare
Wird geladen in …5
×

How to not suck at JavaScript

6.348 Aufrufe
6.079 Aufrufe

Veröffentlicht am

Best practices in JavaScript

Veröffentlicht in: Technologie
0 Kommentare
4 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
6.348
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
138
Aktionen
Geteilt
0
Downloads
48
Kommentare
0
Gefällt mir
4
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

How to not suck at JavaScript

  1. 1. by tommymontgomery § may 21 2010<br />How to Not Suck at JavaScript<br />
  2. 2. Why you should love JavaScript<br />
  3. 3. Why you should love JavaScript<br />It’s everywhere<br />
  4. 4. Why you should love JavaScript<br />It’s everywhere<br />You have to<br />
  5. 5. Why you should love JavaScript<br />It’s everywhere<br />You have to<br />
  6. 6. The most important thing<br />
  7. 7. The most important thing<br />Scope<br />JavaScript has no block scope<br />JavaScript has lots of lexical scope<br />JavaScript has function scope<br />
  8. 8.
  9. 9. JavaScript does not have block scope<br />
  10. 10. Firebug Confirms<br />
  11. 11. What about var?<br />var PREVENTS global scope inside functions<br />Scoping <br />
  12. 12.
  13. 13.
  14. 14. Lexical Scope<br />Language parsing happens in phases:<br />Phase 1: Lexing (tokenizing)<br />Phase 2: Parsing<br />Phase 3: Other stuff, like compiling to machine code, etc.<br />
  15. 15. Lexical Scope<br />Variables declared in the current lexical environment are in lexical scope<br />E.g. function parameters are usually only available inside a function (function scope)<br />Also known as static scope, because it only requires static analysis<br />E.g. the runtime value of the variable is irrelevant<br />
  16. 16. Dynamic Scope<br />Remember when we didn’t use varthat one time? That’s called dynamic scope.<br />Global stack of variables<br />Any time a variable is referenced, it pushes (or pops) the global stack, always using the most recent value of the variable<br />
  17. 17. Closures<br />Lexical scope allows us to use closures<br />
  18. 18. Closures<br />A closure is:<br />
  19. 19. Closures<br />A closure is: difficult to explain<br />
  20. 20. Closures<br />A closure is: difficult to explain<br />
  21. 21. Closure Example<br />
  22. 22. …<br />
  23. 23. Closure Example<br />How can this be more awesome?<br />
  24. 24. Closure Example<br />How can this be more awesome?<br />Problem: the symbols variable is global<br />
  25. 25. Closure Example<br />How can this be more awesome?<br />Problem: the symbols variable is global<br />Solution: be awesome<br />
  26. 26. Closure Example<br />
  27. 27. Closure Example<br />symbols is no longer global because it’s scope is limited to the function<br />
  28. 28. Currying<br />Currying is:<br />
  29. 29. Currying<br />Currying is: difficult to explain<br />
  30. 30. Currying Example<br />So, I totally thought I had an example of where I used currying, but I was actually uncurrying. But it’s still awesome.<br />
  31. 31.
  32. 32. Triple your fun…<br />
  33. 33. Triple your fun…<br />
  34. 34. Solution #1<br />
  35. 35. Solution #1<br />Still a lot of duplicated code<br />Looks stupid<br />
  36. 36. Solution #2: Uncurrying<br />
  37. 37. Currying<br />Currying is when you have a function that takes two parameters, and you turn it into a function that takes one parameter, lexically binding one of them, and return that lexically bound function (closure).<br />
  38. 38. Currying (and uncurrying)<br />Currying is when you have a function that takes two parameters, and you turn it into a function that takes one parameter, lexically binding one of them, and return that lexically bound function (closure).<br />Uncurrying is exactly the opposite<br />
  39. 39. lolcat<br />
  40. 40. The Module Pattern<br />Coined by Douglas Crockford of JSON/Yahoo! fame<br />A JavaScript design pattern for creating private variables<br />Awesome<br />
  41. 41. The Module Pattern<br />Makes heavy use of the fact that functions are the only way to create lexical scope<br />Creates public APIs that use internal, private variables<br />
  42. 42. The Module Pattern<br />
  43. 43. The Module Pattern<br />
  44. 44. The Module Pattern<br />That’s all there is to it<br />But always remember…<br />
  45. 45. DON’T EVER POLLUTE THE GLOBAL NAMESPACE.<br />
  46. 46. Inheritance<br />Inheritance is tricky in JavaScript<br />There are two types:<br />Classical (like Java)<br />Prototypal (not like Java)<br />
  47. 47. Classical Inheritance<br />Classical inheritance is hard in JavaScript<br />There is no extends<br />There is no implements<br />The constructor is hidden<br />The constructor doesn’t do what you think it will<br />The new keyword doesn’t do what you think it will<br />The this keyword is not always in the scope you think it is<br />
  48. 48. Classical Inheritance<br />
  49. 49. Classical Inheritance<br />If you don’t use prototype, then evict is not defined on our Cat instance<br />Think of it as a static method, and you can’t execute a static method non-statically<br />
  50. 50.
  51. 51. Classical Inheritance<br />
  52. 52. Classical Inheritance<br />What’s missing?<br />Access to super/base/parent<br />Private/protected members<br />Interfaces<br />
  53. 53. Classical Inheritance<br />Don’t ever do it yourself<br />Use John Resig’s implementation<br />http://ejohn.org/blog/simple-javascript-inheritance/<br />
  54. 54. The Juiciest Part<br />
  55. 55. Prototypal Inheritance<br />Scary<br />Unknown<br />Sounds cool<br />
  56. 56. Prototypal Inheritance<br />Inherit from object, rather than classes<br />
  57. 57. Prototypal Inheritance<br />
  58. 58. Prototypal Inheritance<br />Object.create() from Douglas Crockford<br />Everybody uses it<br />Because JavaScript’s new keyword is eft up<br />
  59. 59. Inheritance<br />Classical<br />Classes inherit from classes<br />Prototypal<br />Objects inherit from objects<br />

×