Effective JavaScript
          Justin Tulloss
     Sr. Software Engineer
         April 24, 2010
Overview

• JavaScript language properties
• Effective closures
• Effective objects
• Interacting with the DOM
• ECMAScrip...
Prototypes
Assigning to a Prototype
Altering a Prototype
Altering a Prototype Faster
Deriving an Object from Another
Object
Deriving an Object with
Object.create
Scope Resolution
What Is in the Resolution Chain?
Functions dictate scope (with a few exceptions)



• Local variables
• Arguments
• Enclos...
Each Step Is Like a Property Access




locals.arguments.scope1Locals.scope1Args.globals
Example
Don’t Use with
Effective Closures
The Power of Closures
With great power comes great responsibility



• Reduce typing
• Make code cleaner
• Provide some pr...
Building Objects with Closures
Same Thing Works for Constructors
Avoiding bind in Asynchronous
Operations
Avoiding Unnecessary Methods
Memoization
Effective Objects
Using Objects Effectively

• First, do what makes sense—don’t over-optimize
• Every property access is slow
• Breadth not ...
Use Object Literals


 Bad




 Good
Interacting with
    the DOM
Don’t
DOM Tips

• Watch out for closures referencing nodes
  • These can leak
• Reference nodes anyway
  • Using a reference is ...
ECMAScript 5
Exciting New Features

• Function.prototype.bind
• Object.create
• Getters/setters
• String.prototype.trim
Getters and Setters
v8 Optimizations
v8 Optimizations

• Don’t use delete
• Use object literals
• Avoid altering objects after creating them
• Don’t use eval
If it’s hard in C,
    it’s slow in
Q &A
Effective JavaScript
Effective JavaScript
Upcoming SlideShare
Loading in...5
×

Effective JavaScript

3,063

Published on

Slides from the Effective JavaScript talk at Palm DevDay.

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

No Downloads
Views
Total Views
3,063
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
130
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide










  • No block scope. In general you reference enclosing functions and their arguments until you reach the global scope. With is an exception.
  • This isn’t as true in v8.
  • Referencing a is 4 steps away!
  • 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.



  • And you can combine the two!
  • This avoids a step on the scope chain.
  • Minimize your code, don’t keep functions around that are one-offs. On the other hand, this function is recreated every time.
  • As always with closures, watch for memory leaks.








  • 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.





  • Effective JavaScript

    1. 1. Effective JavaScript Justin Tulloss Sr. Software Engineer April 24, 2010
    2. 2. Overview • JavaScript language properties • Effective closures • Effective objects • Interacting with the DOM • ECMAScript 5 • v8 optimizations
    3. 3. Prototypes
    4. 4. Assigning to a Prototype
    5. 5. Altering a Prototype
    6. 6. Altering a Prototype Faster
    7. 7. Deriving an Object from Another Object
    8. 8. Deriving an Object with Object.create
    9. 9. Scope Resolution
    10. 10. What Is in the Resolution Chain? Functions dictate scope (with a few exceptions) • Local variables • Arguments • Enclosing function scopes • With Statement • Global
    11. 11. Each Step Is Like a Property Access locals.arguments.scope1Locals.scope1Args.globals
    12. 12. Example
    13. 13. Don’t Use with
    14. 14. Effective Closures
    15. 15. 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)
    16. 16. Building Objects with Closures
    17. 17. Same Thing Works for Constructors
    18. 18. Avoiding bind in Asynchronous Operations
    19. 19. Avoiding Unnecessary Methods
    20. 20. Memoization
    21. 21. Effective Objects
    22. 22. 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
    23. 23. Use Object Literals Bad Good
    24. 24. Interacting with the DOM
    25. 25. Don’t
    26. 26. 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
    27. 27. ECMAScript 5
    28. 28. Exciting New Features • Function.prototype.bind • Object.create • Getters/setters • String.prototype.trim
    29. 29. Getters and Setters
    30. 30. v8 Optimizations
    31. 31. v8 Optimizations • Don’t use delete • Use object literals • Avoid altering objects after creating them • Don’t use eval
    32. 32. If it’s hard in C, it’s slow in
    33. 33. Q &A
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×