Cacher is the code snippet organizer for pro developers

var myVariable = "Hi, I am a global variable";

function sayHello() {
  myVariable = "Hi, I am locally produced!";
  console.log(myVariable);
}

console.log(myVariable); 	// Prints "Hi, I am a global variable"
sayHello();               // Prints "Hi, I am locally produced!"
console.log(myVariable);	// Prints "Hi, I am locally produced!"

/* how come myVariable value took the local defined value? the global variable was overwritten by the local variable. Why? Notice in the sayHello() function that myVariable does NOT have the vary keyword.***If a local variable is used without being declared with the "var" keyword, it becomes a global variable. Following this rule, when the sayHello() ran, the global variable was reassigned to a new value. Notice that it's value changed AFTER we called the sayHello().*/

/*If both variables declared with the "var" keyword, then we'd have 2 distinct variables, independent from one another. Always declare local varialbes withe the "var" keyword before using them, otherwise you will risk unintended side effects.

var greeting = "Hi there!"; // global scope

function sayHello() {
  console.log(greeting);//notice greeting(same name) is only defined in global
}
sayHello(); // "Hi there !"Defined in global

//hoisting inside a function

movieStar();
function movieStar() {
  var name = 'meryl streep';
  console.log(name);
}

//how Javascript reads the above code
function movieStar(){//function declaration is moved to the top of the global scope
  var name;//variable declaration is moved to the top of the local scope
  name = 'meryl streep';//assignment left in place
  console.log(name);
}
movieStar(name);//'meryl streep' This works b/c the function declaration is hoisted, and interpreted as being declared before it was called. 

console.log(rockStar); //“undefined”
var rockStar = 'mick jagger';

/*rockStar variable declared and assigned, and we get undefined response. Why? Because all declarations are processed first, and this is equally tru for variables and functions. Assignments are left in place.*/

//how Javascript sees var rockStar = 'mick jagger';
var rockStar;
rockStar = 'mick jagger';
//Javascript first interprets the code, sees the rockStar variable exists and moves it to the top of the scope. This is hoisting.

//But the second statement, the assignment is left in place. Then, the code is executed by Javascript as if it were written like this:
var rockStar
console.log(rockStar);
rockStar = 'mick jagger';
//The declaration comes before the assignment. Only variable and function declarations are hoisted, while the assignments are left in place, just where they were written in the code. 

rockStar = 'Mick Jagger';
var rockStar;
console.log(rockStar); // 'Mick Jagger'

//Js reads the above example like this:
var rockStar;
rockStar = 'mick jagger';
console.log(rockStar);

var greeting = "Hi, I am a global variable"; // global scope variable

function sayHello() {
  var greeting = "Hi, I am a local variable"; // local scope variable
  console.log(greeting);//this code block will execute this console.log when the function is called
}
sayHello();// "Hi, I am a local variable"

console.log(greeting);//"Hi, I am a global variable", 	
//this simple console.log is NOT inside the function, 
//the program gets the value of the variable from the global scope

/*Functions within functions create two scopes: the child function will be able to see all the varialbes of all the parent functions, but the parent function will never know the varialbes declared inside it's child function. this is Scope Chain. Had all 3 variables been declared inside the child function, Js would have not felt the need to work its way upward and the code execution would have stopped there*/

var a ="hello! ";
function parent() {
  var b = "Hi!";
  child(){
    var c = "Good Day!";
    console.log(a + b + c);
  }
}
parent();//"hello! Hi!Good Day!"