Challenge: Scope, Side Effects, and Hoisting

challenge

// What is scope? //
Scope refers where and when variables are accesible. There are two types of scope, Global and local (aka function scope). 
Understanding how scope works cuts down on bugs in your program. 

Global scope is accessible outside of a Function. They are available everywhere.
e.g. 
var x = 'foo'; 
function doSomething() { 
  console.log(x);
} // foo (available in Global Scope)

Local scopes are local to a Function body. 
e.g. 
var x = 'bar';
function doSomething() { 
  var x = foo 
  console.log(x);
} // x is foo 
  
console.log(x) // outside global is bar
  
Function scopes are great for privacy. If you use a Function scope, they are not accessible in other parts of an application.
Global scope can span across JS files. If a JS application1 gets loaded before JS application2, you'll have access to a defined 
variable.
Otherwise, it won't work.

// Why avoid Global varaibles? //
There are two types of side effects. Determinate and Indeterminate. Determinate side effects always return the same value, if 
provided with the same inputs. Indeterminate side effects return different values, depending on the inputs provided. For the most part, 
you want to avoid Global variables because of side effects. If a function outside of its local scope, it can "alter the 
value that lives there". Although some side effects can be a good thing. For instance, sometimes you want an intended side effect if working with 
a database. A function is 'pure' when it is determinate and has no side effects. You want to strive to create 'pure' functions, unless you 
need to make a function for the purpose of intentionally making side effects. 

// JS 'strict mode' //
A great way to avoid unintended, or indeterminate side effects, is to use strict mode. If you add 'use strict' to the top
of a file (or within function body), and a variable is declared without var, an error is triggered. Using 'use strict' is best practice to avoid 
unintended side effects. 

// Variable hosting //
JS reads and executes differently than how humans read it. Look at this function:

function doSomething() {
  console.log(foo)
  var foo = 'bar';
} 
  
The function above looks like it should throw a ReferenceError. 
It doesn't because the variable, foo = 'bar';, is 'hoisted' to the top of console.log(foo); like this:

function doSomething() {
  var foo;
  console.log(foo);
  foo = 'bar';
}     // doSomething() => undefined

The same happens in the Global scope as well. It's also why we call functions before declaring them.