How to not suck at JavaScript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

How to not suck at JavaScript

on

  • 6,309 views

Best practices in JavaScript

Best practices in JavaScript

Statistics

Views

Total Views
6,309
Views on SlideShare
6,175
Embed Views
134

Actions

Likes
4
Downloads
43
Comments
0

3 Embeds 134

http://www.redditmedia.com 117
http://www.slideshare.net 15
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How to not suck at JavaScript Presentation Transcript

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