1.by tommymontgomery may 21 2010
How to Not Suck at JavaScript

2. Why you should love JavaScript
3. Why you should love JavaScript
Its everywhere
4. Why you should love JavaScript
Its everywhere
You have to
5. Why you should love JavaScript
Its 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 didnt use varthat one time? Thats 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 its 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 its 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
Thats all there is to it
But always remember
45. DONT 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 doesnt do what you think it will
The new keyword doesnt 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 dont use prototype, then evict is not defined on our Cat instance
Think of it as a static method, and you cant execute a static method non-statically
50. 51. Classical Inheritance
52. Classical Inheritance
Whats missing?
Access to super/base/parent
Private/protected members
Interfaces
53. Classical Inheritance
Dont ever do it yourself
Use John Resigs 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 JavaScripts new keyword is eft up
59. Inheritance
Classical
Classes inherit from classes
Prototypal
Objects inherit from objects