Your SlideShare is downloading. ×
0
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
How to not suck at JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to not suck at JavaScript

5,696

Published on

Best practices in JavaScript

Best practices in JavaScript

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,696
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
47
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. by tommymontgomery § may 21 2010<br />How to Not Suck at JavaScript<br />
  • 2. Why you should love JavaScript<br />
  • 3. Why you should love JavaScript<br />It’s everywhere<br />
  • 4. Why you should love JavaScript<br />It’s everywhere<br />You have to<br />
  • 5. Why you should love JavaScript<br />It’s everywhere<br />You have to<br />
  • 6. The most important thing<br />
  • 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.
  • 9. JavaScript does not have block scope<br />
  • 10. Firebug Confirms<br />
  • 11. What about var?<br />var PREVENTS global scope inside functions<br />Scoping <br />
  • 12.
  • 13.
  • 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. 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. 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. Closures<br />Lexical scope allows us to use closures<br />
  • 18. Closures<br />A closure is:<br />
  • 19. Closures<br />A closure is: difficult to explain<br />
  • 20. Closures<br />A closure is: difficult to explain<br />
  • 21. Closure Example<br />
  • 22. …<br />
  • 23. Closure Example<br />How can this be more awesome?<br />
  • 24. Closure Example<br />How can this be more awesome?<br />Problem: the symbols variable is global<br />
  • 25. Closure Example<br />How can this be more awesome?<br />Problem: the symbols variable is global<br />Solution: be awesome<br />
  • 26. Closure Example<br />
  • 27. Closure Example<br />symbols is no longer global because it’s scope is limited to the function<br />
  • 28. Currying<br />Currying is:<br />
  • 29. Currying<br />Currying is: difficult to explain<br />
  • 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.
  • 32. Triple your fun…<br />
  • 33. Triple your fun…<br />
  • 34. Solution #1<br />
  • 35. Solution #1<br />Still a lot of duplicated code<br />Looks stupid<br />
  • 36. Solution #2: Uncurrying<br />
  • 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. 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. lolcat<br />
  • 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. 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. The Module Pattern<br />
  • 43. The Module Pattern<br />
  • 44. The Module Pattern<br />That’s all there is to it<br />But always remember…<br />
  • 45. DON’T EVER POLLUTE THE GLOBAL NAMESPACE.<br />
  • 46. Inheritance<br />Inheritance is tricky in JavaScript<br />There are two types:<br />Classical (like Java)<br />Prototypal (not like Java)<br />
  • 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. Classical Inheritance<br />
  • 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.
  • 51. Classical Inheritance<br />
  • 52. Classical Inheritance<br />What’s missing?<br />Access to super/base/parent<br />Private/protected members<br />Interfaces<br />
  • 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. The Juiciest Part<br />
  • 55. Prototypal Inheritance<br />Scary<br />Unknown<br />Sounds cool<br />
  • 56. Prototypal Inheritance<br />Inherit from object, rather than classes<br />
  • 57. Prototypal Inheritance<br />
  • 58. Prototypal Inheritance<br />Object.create() from Douglas Crockford<br />Everybody uses it<br />Because JavaScript’s new keyword is eft up<br />
  • 59. Inheritance<br />Classical<br />Classes inherit from classes<br />Prototypal<br />Objects inherit from objects<br />

×