Permalink
Browse files

Write more of the article.

  • Loading branch information...
creationix committed Sep 30, 2010
1 parent 4222bd1 commit c0e02a64dc667db329235de6a0a2537c5f929790
@@ -7,5 +7,31 @@ One of the secrets to being a super effective JavaScript developer is to truly u
## What exactly is a variable?
+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.
+
+### Local Variables
+
+In the following example, we will create three local variables in the top-level scope and point them to some primitive values:
+
+<object-graphs/variables.js*>
![variables](object-graphs/variables.dot)
+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.
+
+In the code snippet we checked to see if the two references pointed to the same value using `===` and the result was `true`.
+
+The orange box represents the outermost closure scope. These variables are top-level local variables, not to be confused with properties of the global/window object.
+
+<br style="clear:left"/>
+
+### Objects
+
+<object-graphs/objects.js*>
+![shared-function](object-graphs/objects.dot)
+
+<br style="clear:left"/>
+
+### Global Variables
+
+If you leave off the var statement from
+
@@ -0,0 +1,29 @@
+digraph finite_state_machine {
+ size="8,5"
+ rankdir = "LR"
+
+ /* Functions */
+ node [shape = Mrecord, fillcolor=orange, style=filled];
+ global [label="<tim>tim|<jack>jack"];
+ /* Objects */
+ node [shape = Mrecord, fillcolor=lightBlue, style=filled];
+ obj1 [label = "<__proto__>Object|<name>name|<age>age|<isProgrammer>isProgrammer|<likesJavaScript>likesJavaScript"];
+ obj2 [label = "<__proto__>Object|<name>name|<age>age"];
+ /* Literals */
+ node [shape = plaintext, fillcolor=lightGrey, style="filled,rounded"];
+ tim [label="\"Tim Caswell\""]
+ jack [label="\"Jack Caswell\""]
+ true [label="true"]
+ n4 [label="4"]
+ n28 [label="28"]
+ /* Links */
+ obj2:__proto__ -> obj1:__proto__ [color=blue];
+ global:tim -> obj1:__proto__;
+ obj1:name -> tim;
+ obj1:age -> n28;
+ obj1:isProgrammer -> true;
+ obj1:likesJavaScript -> true;
+ global:jack -> obj2:__proto__;
+ obj2:name -> jack;
+ obj2:age -> n4;
+}
@@ -0,0 +1,15 @@
+// Create a parent object
+var tim = {
+ name: "Tim Caswell",
+ age: 28,
+ isProgrammer: true,
+ likesJavaScript: true
+}
+// Create a child object
+var jack = Object.create(tim);
+// Override some properties locally
+jack.name = "Jack Caswell";
+jack.age = 4;
+// Look up stuff through the prototype chain
+jack.likesJavaScript;
+
@@ -0,0 +1,32 @@
+digraph finite_state_machine {
+ size="8,5"
+ rankdir = "LR"
+
+ /* Functions */
+ node [shape = Mrecord, fillcolor=orange, style=filled];
+ global [label="<Lane>Lane|<descr>descr|<Fred>Fred|<description>description"];
+ fn1 [label="<__proto__>Function"];
+ fn2 [label = "<__proto__>Function|<name>name"];
+ /* Objects */
+ node [shape = Mrecord, fillcolor=lightBlue, style=filled];
+ obj1 [label = "<__proto__>Object|<name>name | <description> description"];
+ obj2 [label = "<__proto__>Object|<descr> descr | <name>name"];
+ obj3 [label = "<__proto__>Object|<name>name"];
+ /* Literals */
+ node [shape = plaintext, fillcolor=lightGrey, style="filled,rounded"];
+ name [label="\"Lane the Lambda\""]
+ name2 [label="\"Fred the Functor\""]
+ name3 [label="\"Zed the Zetabyte\""]
+ name4 [label="\"Cloe the Closure\""]
+
+ global:Lane -> obj1:__proto__;
+ obj1:name -> name;
+ obj1:description -> fn1;
+ global:Fred -> obj2:__proto__;
+ obj2:name -> name2;
+ obj2:descr -> fn1:__proto__;
+ obj3:name -> name3;
+ global:descr -> fn1:__proto__;
+ global:description -> fn2:__proto__;
+ fn2:name -> name4;
+}
@@ -2,39 +2,17 @@ digraph finite_state_machine {
size="8,5"
rankdir = "LR"
- /* Variables */
-/*
- node [shape = plaintext];
- description
- Lane
- Fred
- descr
-*/
/* Functions */
node [shape = Mrecord, fillcolor=orange, style=filled];
- global [label="<__proto__>Function|<Lane>Lane|<descr>descr|<Fred>Fred|<description>description"];
- fn1 [label="<__proto__>Function"];
- fn2 [label = "<__proto__>Function|<name>name"];
- /* Objects */
- node [shape = Mrecord, fillcolor=lightBlue, style=filled];
- obj1 [label = "<__proto__>Object|<name>name | <description> description"];
- obj2 [label = "<__proto__>Object|<descr> descr | <name>name"];
- obj3 [label = "<__proto__>Object|<name>name"];
- /* Strings */
- node [shape = plaintext, fillcolor=lightGrey, style=filled];
- name [label="\"Lane the Lambda\""]
- name2 [label="\"Fred the Functor\""]
- name3 [label="\"Zed the Zetabyte\""]
- name4 [label="\"Cloe the Closure\""]
-
- global:Lane -> obj1:__proto__;
- obj1:name -> name;
- obj1:description -> fn1;
- global:Fred -> obj2:__proto__;
- obj2:name -> name2;
- obj2:descr -> fn1:__proto__;
- obj3:name -> name3;
- global:descr -> fn1:__proto__;
- global:description -> fn2:__proto__;
- fn2:name -> name4;
+ global [label="<name>name|<age>age|<isProgrammer>isProgrammer|<likesJavaScript>likesJavaScript"];
+ /* Literals */
+ node [shape = plaintext, fillcolor=lightGrey, style="filled,rounded"];
+ timcaswell [label="\"Tim Caswell\""]
+ n28 [label="28"]
+ true [label="true"]
+ global:name -> timcaswell;
+ global:age -> n28;
+ global:isProgrammer -> true;
+ global:likesJavaScript -> true;
+
}
@@ -0,0 +1,7 @@
+// Let's create some local variables in the top scope
+var name = "Tim Caswell";
+var age = 28;
+var isProgrammer = true;
+var likesJavaScript = true;
+// Test to see if the two variables reference the same value
+isProgrammer === likesJavaScript;

0 comments on commit c0e02a6

Please sign in to comment.