Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 102 lines (55 sloc) 5.946 kb
6f32301 @creationix Write new article about JavaScript using object graphs.
authored
1 Title: Learning Javascript with Object Graphs
2 Author: Tim Caswell
3 Date: Thu Sep 30 2010 13:48:55 GMT-0700 (PDT)
4 Node: v0.2.2
5
6 One of the secrets to being a super effective JavaScript developer is to truly understand the semantics of the language. This article will explain the basic elemental parts of JavaScript using easy to follow diagrams.
7
8 ## References Everywhere
9
10 A variable in JavaScript is simply a label that references a value in memory somewhere. These values can be primitives like strings, numbers, and booleans. They can also be objects or functions.
11
12 ### Local Variables
13
14 In the following example, we will create four local variables in the top-level scope and point them to some primitive values:
15
16 <object-graphs/variables.js*>
17
18 ![variables](object-graphs/variables.dot)
19
20 Notice that the two boolean variables point to the same value in memory. This is because primitives are immutable and so the VM can optimize and share a single instance for all references to that particular value.
21
22 In the code snippet we checked to see if the two references pointed to the same value using `===` and the result was `true`.
23
24 The outer box represents the outermost closure scope. These variables are top-level local variables, not to be confused with properties of the global/window object.
25
26 <br style="clear:left"/>
27
28 ### Objects and Prototype Chains
29
30 Objects are just collections of more references to new objects and prototypes. The only special thing they add is the prototype chain for when you try to access a property that's not in the local object, but is in a parent object.
31
32 <object-graphs/objects.js*>
33
34 ![shared-function](object-graphs/objects.dot)
35
36 <br style="clear:left"/>
37
38 Here we have one object with four properties referenced by the `tim` variable. Also we created a new object that inherits from the first object and referenced it from `jack`. Then we overrode two properties in the local object.
39
40 Now when looking up `jack.likesJavaScript`, we first find the object that `jack` references. Then we look for the `likesJavaScript` property. Since it's not there, we look at the parent object and find it there. Then we find the `true` value it references.
41
42 ### The Global Object
43
44 Ever wondered why tools like [jslint][] always tell you to not forget to put `var` statements before your variables. Well, here is what happens if you forget.
45
46 <object-graphs/globals.js>
47
48 ![variables](object-graphs/globals.dot)
49
50 Notice that `likesJavaScript` is now a property of the global object instead of a free variable in the outer closure. This only really matters if you're going to be mixing several scripts. But in any real program that's exactly what you're going to be doing.
51
707e1dc @thenbrent Removing rogue apostrophes on posessive its
thenbrent authored
52 Always remember to put those `var` statements in there to keep your variable's scope to the current closure and its children. You'll be much happier by following this simple rule.
6f32301 @creationix Write new article about JavaScript using object graphs.
authored
53
54 If you must put something on the global object, do it explicitly with `window.woo` in the browser or `global.goo` in node.js.
55
56 <br style="clear:left"/>
57
58 ## Functions and Closures
59
5c1993b @creationix Update the object-graph article to see closures better.
authored
60 JavaScript isn't just a series of chained data structures. It contains executable, callable code known as functions. These functions create chained scopes and closures.
6f32301 @creationix Write new article about JavaScript using object graphs.
authored
61
62 ### Visualizing Closures
63
5c1993b @creationix Update the object-graph article to see closures better.
authored
64 Functions can be drawn as special objects that contain executable code as well as properties. Every function has a special `[scope]` property that represents the environment it was in when it was defined. If a function is returned from another function then this reference to the old environment is closed over by the new function in a "closure".
6f32301 @creationix Write new article about JavaScript using object graphs.
authored
65
66 In this example we will create a simple factory method that generates a closure and returns a function.
67
68 <object-graphs/closure.js*>
69
70 ![variables](object-graphs/closure.dot)
71
72 <br style="clear:left"/>
73
707e1dc @thenbrent Removing rogue apostrophes on posessive its
thenbrent authored
74 When we call `description1()`, the VM looks up the function that it references and executes it. Since that function looks for a local variable named `name`, it finds it in the closure scope. This factory method is nice since each generated function has its own space for local variables.
6f32301 @creationix Write new article about JavaScript using object graphs.
authored
75
707e1dc @thenbrent Removing rogue apostrophes on posessive its
thenbrent authored
76 See the article [why use closure][] for more in-depth reading on this topic and its many uses.
6f32301 @creationix Write new article about JavaScript using object graphs.
authored
77
78 ### Shared Functions and `this`
79
80 Sometimes for performance reasons, or because you just plain prefer the style, JavaScript provides a `this` keyword that allows you to reuse a function object in different scopes depending on how it was called.
81
82 Here we'll create a few objects that all share a common function. This function will reference `this` internally to show how it changes from call to call.
83
84 <object-graphs/functions.js*>
85
86 ![variables](object-graphs/functions.dot)
87
88 <br style="clear:left"/>
89
707e1dc @thenbrent Removing rogue apostrophes on posessive its
thenbrent authored
90 In the diagram, we see that even though `Fred.description` was set to `Lane.description`, it's really only referencing the function. Thus all three references have equal ownership of the anonymous function. This is why I try to not call functions on constructor prototypes "methods", because that implies some sort of binding of the function to the constructor and its "class". *(see [what is this][] for more details on the dynamic nature of `this`)*
6f32301 @creationix Write new article about JavaScript using object graphs.
authored
91
92 ## Conclusion
93
94 I've had tons of fun using diagrams to visualize these data structures. My hope is that this helps those of us that are visual learners to get a better grasp of JavaScript semantics. I have past experience as both a front-end designer/developer and as a server-side architect. I hope my unique perspective is useful to those coming from the world of design and learning the innards of this wonderful language known as JavaScript.
95
96 *(NOTE, all the diagrams are [graphviz][] dot files and can be seen [here][])*
97
98 [jslint]: http://jslint.com/
99 [what is this]: http://howtonode.org/what-is-this
100 [why use closure]: http://howtonode.org/why-use-closure
101 [graphviz]: http://www.graphviz.org/
102 [here]: http://github.com/creationix/howtonode.org/tree/master/articles/object-graphs/
Something went wrong with that request. Please try again.