Best practices in JavaScript

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

9. JavaScript does not have block scope

10. Firebug Confirms

11. What about var? var PREVENTS global scope inside functions Scoping 

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.

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

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