Effective JavaScript
- 2. Effective JavaScript Justin Tulloss Sr. Software Engineer April 24, 2010
- 3. Overview • JavaScript language properties • Effective closures • Effective objects • Interacting with the DOM • ECMAScript 5 • v8 optimizations
- 4. Prototypes
- 5. Assigning to a Prototype
- 7. Altering a Prototype Faster
- 8. Deriving an Object from Another Object
- 9. Deriving an Object with Object.create
- 10. Scope Resolution
- 11. What Is in the Resolution Chain? Functions dictate scope (with a few exceptions) • Local variables • Arguments • Enclosing function scopes • With Statement • Global
- 12. Each Step Is Like a Property Access locals.arguments.scope1Locals.scope1Args.globals
- 13. Example
- 14. Don’t Use with
- 16. The Power of Closures With great power comes great responsibility • Reduce typing • Make code cleaner • Provide some privacy • Sometimes they make things fast • Magic (AKA functional)
- 17. Building Objects with Closures
- 18. Same Thing Works for Constructors
- 19. Avoiding bind in Asynchronous Operations
- 21. Memoization
- 23. Using Objects Effectively • First, do what makes sense—don’t over-optimize • Every property access is slow • Breadth not depth • Use object literals • Make shortcuts • Inspectable
- 24. Use Object Literals Bad Good
- 25. Interacting with the DOM
- 26. Don’t
- 27. DOM Tips • Watch out for closures referencing nodes • These can leak • Reference nodes anyway • Using a reference is much faster than looking up a node • innerHTML is generally faster than the DOM API
- 28. ECMAScript 5
- 29. Exciting New Features • Function.prototype.bind • Object.create • Getters/setters • String.prototype.trim
- 31. v8 Optimizations
- 32. v8 Optimizations • Don’t use delete • Use object literals • Avoid altering objects after creating them • Don’t use eval
- 33. If it’s hard in C, it’s slow in
- 34. Q &A
Editor's Notes
- #12: No block scope. In general you reference enclosing functions and their arguments until you reach the global scope. With is an exception.
- #13: This isn’t as true in v8.
- #14: Referencing a is 4 steps away!
- #15: If something isn’t defined in the object in your with statement, you create a global. If it is, you overwrite that property. It’s difficult to tell from reading the code how an assignment might affect the program.
- #19: And you can combine the two!
- #20: This avoids a step on the scope chain.
- #21: Minimize your code, don’t keep functions around that are one-offs. On the other hand, this function is recreated every time.
- #22: As always with closures, watch for memory leaks.
- #31: Be careful though, unlike other languages with getters and setters, Javascript won’t warn you if you access an undefined property. It’ll just return undefined.