Added to the scope JS 101 article

page/javascript-101/scope.md

@@ -1,15 +1,90 @@
 ---
-title:        Scope
-level:        beginner
-source: http://jqfundamentals.com/legacy
-attribution: 
+title: Scope
+level: beginner
+source: http://jqfundamentals.com/legacy, http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this
+attribution:
   - jQuery Fundamentals
 ---
 
-"Scope" refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences.
+"Scope" refers to the variables that are available to a piece of code at a given time. A lack of understanding of scope can lead to frustrating debugging experiences. The idea of "scope" is that it's where certain functions or variables are accessible from in our code, and the context in which they exist & are executed in.
 
 When a variable is declared inside of a function using the `var` keyword, it is only available to code inside of that function — code outside of that function cannot access the variable. On the other hand, functions defined inside that function will have access to to the declared variable.
 
+There are two types of scopes in JavaScript: Global and local. Lets talk about each of them in turn.
+
+The first scope is __Global Scope__. This is very easy to define. If a variable or function is _global_, it can be accessed from anywhere within a program. In a browser, the global scope is the `window` object. A variable that is defined from anywhere but within a function is global.
+
+```
+var x = 9;
+```
+
+Once that variable is set, it exists on the global object. Once that variable had been defined, it could be referenced as `window.x`, but because it exists on the global object we can simply refer to it as `x`.
+
+The only other scope we can have is __Local Scope__. JavaScript scopes at a function level. For example:
+
+```
+function myFunc() {
+  var x = 5;
+};
+console.log(x); // ReferenceError: x is not defined
+```
+
+Since `x` was initialised within `myFunc`, it is only accessible within `myFunc`, and we get a reference error if we try to access it outside of `myFunc`.
+
+__A word of Caution__
+
+If you declare a variable & forget to use the `var` keyword, that variable is automically made global. So this code would work:
+
+```
+function myFunc() {
+  x = 5;
+});
+console.log(x); // 5
+```
+
+This is a bad idea. Any variable that is global can have its value changed by any other parts of a program or any other script. This is undesirable, as it could lead to unforseen side effects.
+
+Secondly, it's considered bad practise to clutter the global scope. You should add as fewer properties as you possibly can to the global object, and try to keep your program contained within its own scope. That's why you'll see libaries such as jQuery often do this:
+
+```
+(function() {
+  var jQuery = { /* all my methods go here */ };
+  window.jQuery = jQuery.
+})();
+```
+
+Wrapping everything in a function which is then immediately invoked means all the variables within that function are bound to the _local scope_. At the very end you can then expose all your methods by binding the `jQuery` object to the `window`, the _global object_.
+
+Because local scope works through functions, any functions defined within another have access to variables defined in the outer function:
+
+```
+function outer() {
+  var x = 5;
+  function inner() {
+    console.log(x);
+  }
+
+  inner(); // logs 5
+}
+```
+
+But the `outer()` function doesn't have access to any variables declared within `inner()`:
+
+```
+function outer() {
+  var x = 5;
+
+  function inner() {
+    console.log(x);
+    var y = 10;
+  }
+
+  inner(); // logs 5
+
+  console.log(y); // ReferenceError: y is not defined
+}
+```
+
 Furthermore, variables that are declared inside a function without the `var` keyword are not local to the function — JavaScript will traverse the scope chain all the way up to the window scope to find where the variable was previously defined. If the variable wasn't previously defined, it will be defined in the global scope, which can have unexpected consequences.
 
 ```
@@ -22,9 +97,9 @@ var sayHello = function() {
 
 };
 
-sayHello();         // logs "hello"
+sayHello();         // "hello"
 
-console.log( foo );   // also logs "hello"
+console.log( foo );   // "hello"
 ```
 
 ```
@@ -37,9 +112,9 @@ var sayHello = function() {
 
 };
 
-sayHello();         // logs "hello"
+sayHello();         // "hello"
 
-console.log( foo );   // doesn"t log anything
+console.log( foo );   // undefined
 ```
 
 ```
@@ -54,9 +129,9 @@ var sayHello = function() {
 
 };
 
-sayHello();         // logs "hello"
+sayHello();         // "hello"
 
-console.log( foo );   // logs "world"
+console.log( foo );   // "world"
 ```
 
 ```