Automatic merge from master.

Author: BonsaiDen

index.html

@@ -295,7 +295,7 @@ <h1>JavaScript Garden</h1>
 </section><section><header><h3>The <code>function</code> declaration</h3></header>
 <pre><code>function foo() {}
 </code></pre>
-<p>The above function gets created <strong>before</strong> the execution of the program starts;
+<p>The above function gets <a href="#scopes">hoisted</a> before the execution of the program starts;
 thus, it is available <em>everywhere</em> in the scope it was <em>defined</em> in, even if 
 called before the actual definition in the source.</p>
 <pre><code>foo(); // Works because foo was created before this code runs
@@ -309,9 +309,9 @@ <h1>JavaScript Garden</h1>
 foo(); // this raises a TypeError
 var foo = function() {};
 </code></pre>
-<p>Due to the fact that <code>var</code> is a <em>statement</em>, which - just like the function 
-declaration - creates the variable <code>foo</code> before the actual execution of the code
-starts, <code>foo</code> is already defined when the script gets executed.</p>
+<p>Due to the fact that <code>var</code> is a declaration, that hoists the variable name <code>foo</code> 
+before the actual execution of the code starts, <code>foo</code> is already defined when 
+the script gets executed.</p>
 <p>But since assignments only happens at runtime, the value of <code>foo</code> will default
 to <a href="#undefined">undefined</a> before the corresponding code is executed.</p>
 </section><section><header><h3>Named function expression</h3></header>
@@ -324,38 +324,7 @@ <h1>JavaScript Garden</h1>
 <p>Here <code>bar</code> is not available in the outer scope, since the function only gets
 assigned to <code>foo</code>; however, inside of <code>bar</code> it is available. This is due to 
 how <a href="#scopes">name resolution</a> in JavaScript works, the name of the function
-is <em>always</em> made available in the local scope of the function itself.</p>
-</section><section><header><h3>The <code>var</code> statement</h3></header>
-<pre><code>function test() {
-    if (foo) {
-        bar = 2;
-
-    } else {
-        var bar = 1;
-    }
-    return foo;
-}
-
-if (false) {
-    var foo = 1;
-}
-</code></pre>
-<p>Since there is <strong>no</strong> <a href="#scopes">block scope</a> in JavaScript, the above will
-<strong>not</strong> assign the value <code>2</code> to the <em>global</em> variable <code>bar</code>. Instead, it will
-assign the value of <code>2</code> to the <em>local</em> variable <code>bar</code> of <code>test</code>. </p>
-<p>Also, while the statements inside the <code>if</code> block never get executed, the variable
-<code>foo</code> still gets created and defaults to the value of <code>undefined</code>; again, this
-is due to the lack of block scoping and the workings of hoisting.</p>
-</section><section><header><h3>Order of parsing</h3></header>
-<p>All <code>var</code> statements get parsed <strong>before</strong> <code>function</code> declarations; hence,
-subsequent statements will override the previous ones.</p>
-<pre><code>function foo() {}
-var foo;
-
-foo; // [function foo]
-var foo = 2;
-foo; // 2
-</code></pre></section></article>
+is <em>always</em> made available in the local scope of the function itself.</p></section></article>
 
 <article><section><header><h2 id="this">How <code>this</code> works <a href="#intro">#top</a></h2></header>
 <p>JavaScript has a different concept of what the special name <code>this</code> refers to 
@@ -711,6 +680,76 @@ <h1>JavaScript Garden</h1>
 </code></pre>
 <p>While <code>foo</code> and <code>i</code> are local variables inside the scope of the function <code>test</code>,
 the assignment of <code>bar</code> will override the global variable with the same name.</p>
+</section><section><header><h3>Hoisting</h3></header>
+<p>JavaScript <strong>hoists</strong> declarations. This means that both <code>var</code> statements and
+<code>function</code> declarations will be moved to the top of their enclosing scope.</p>
+<pre><code>bar();
+var bar = function() {};
+var someValue = 42;
+
+test();
+function test(data) {
+    if (false) {
+        goo = 1;
+
+    } else {
+        var goo = 2;
+    }
+    for(var i = 0; i &lt; 100; i++) {
+        var e = data[i];
+    }
+}
+</code></pre>
+<p>The above code gets transformed before any execution is started. JavaScript moves
+the <code>var</code> statements as well as the <code>function</code> declarations to the top of the 
+nearest surrounding scope.</p>
+<pre><code>// var statements got moved here
+var bar, someValue; // default to 'undefined'
+
+// the function declartion got moved up too
+function test(data) {
+    var goo, i, e; // missing block scope moves these here
+    if (false) {
+        goo = 1;
+
+    } else {
+        goo = 2;
+    }
+    for(i = 0; i &lt; 100; i++) {
+        e = data[i];
+    }
+}
+
+bar(); // fails with a TypeError since bar is still 'undefined'
+someValue = 42; // assignments are not affected by hoisting
+bar = function() {};
+
+test();
+</code></pre>
+<p>Missing block scoping will not only move <code>var</code> statements out of loops and
+their bodies, it will also make the results of certain <code>if</code> constructs 
+non-intuitive.</p>
+<p>In the original code the <code>if</code> statement seemed to modify the <em>global 
+variable</em> <code>goo</code>, while actually it modifies the <em>local variable</em> - after hoisting 
+has been applied.</p>
+<p>Without the knowledge about <em>hoisting</em>, below code might seem to raise a 
+<code>ReferenceError</code>.</p>
+<pre><code>// check whether SomeImportantThing has been initiliazed
+if (!SomeImportantThing) {
+    var SomeImportantThing = {};
+}
+</code></pre>
+<p>But of course, the above works due to the fact that the <code>var</code> statement is being 
+moved to the top of the <em>global scope</em>.</p>
+<pre><code>var SomeImportantThing;
+
+// other code might initiliaze SomeImportantThing here, or not
+
+// make sure it's there
+if (!SomeImportantThing) {
+    SomeImportantThing = {};
+}
+</code></pre>
 </section><section><header><h3>Name resolution order</h3></header>
 <p>All scopes in JavaScript, including the <em>global scope</em>, have the special name 
 <a href="#this"><code>this</code></a> defined in them, which refers to the <em>current object</em>. </p>
@@ -1051,7 +1090,7 @@ <h1>JavaScript Garden</h1>
 <aside>
 <p><strong>Note:</strong> While <code>typeof</code> can also be called with a function like syntax
 i.e. <code>typeof(obj)</code>, this is not a function call. The two parenthesis will
-behave like normal and there return value will be used as the operand of the
+behave like normal and the return value will be used as the operand of the
 <code>typeof</code> operator. There is <strong>no</strong> <code>typeof</code> function.</p>
 </aside>
 </section><section><header><h3>The JavaScript type table</h3></header>
@@ -1081,11 +1120,11 @@ <h1>JavaScript Garden</h1>
 following strings. <code>Arguments</code>, <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Error</code>, 
 <code>Function</code>, <code>JSON</code>, <code>Math</code>, <code>Number</code>, <code>Object</code>, <code>RegExp</code>, <code>String</code>.</p>
 </aside>
-<p>In order to retrieve the value of <code>[[Class]]</code> one can has to make use of the
+<p>In order to retrieve the value of <code>[[Class]]</code> one has to make use of the
 <code>toString</code> method of <code>Object.prototype</code>.</p>
 </section><section><header><h3>The Class of an object</h3></header>
 <p>The specification gives exactly one way of accessing the <code>[[Class]]</code> value,
-which the use of <code>Object.prototype.toString</code>. </p>
+with the use of <code>Object.prototype.toString</code>. </p>
 <pre><code>function is(type, obj) {
     var clas = Object.prototype.toString.call(obj).slice(8, -1);
     return obj !== undefined &amp;&amp; obj !== null &amp;&amp; clas === type;