Scope of a variable 

A variable’s scope is the context in which the variable exists. The scope specifies from where you can access a variable and whether you have access to the variable in that context.

Local Scope

var name = "Richard";
​
​function showName () {
	var name = "Jack"; // local variable; only accessible in this showName function​
	console.log (name); // Jack​
}
console.log (name); // Richard: the global variable

Non-Local Scope

var name = "Richard";
​// the blocks in this if statement do not create a local context for the name variable​
​if (name) {
	name = "Jack"; // this name is the global name variable and 
                       //it is being changed to "Jack" here​
	console.log (name); // Jack: still the global variable​
}
​
​// Here, the name variable is the same global name variable, 
//but it was changed in the if statement​
console.log (name); // Jack

If You Don’t Declare Your Local Variables, Trouble is Nigh

​var name = "Michael Jackson";
​function showCelebrityName () {
	console.log (name);
}
​function showOrdinaryPersonName () {	
	name = "Johnny Evers";
	console.log (name);
}
showCelebrityName (); // Michael Jackson​
​// name is not a local variable, it simply changes the global name variable​
showOrdinaryPersonName (); // Johnny Evers​
​
​// The global variable is now Johnny Evers, not the celebrity name anymore​
showCelebrityName (); // Johnny Evers​
​
​// The solution is to declare your local variable with the var keyword​
​function showOrdinaryPersonName () {	
	var name = "Johnny Evers"; // Now name is always a local 
                                   //variable and it will not overwrite the global variable​
	console.log (name);
}

Local vs Global

• Local Variables Have Priority Over Global Variables in Functions If you declare a global variable and a local variable with the same name, the local variable will have priority when you attempt to use the variable inside a function (local scope):

• All variables declared outside a function are in the global scope. In the browser, which is what we are concerned with as front-end developers, the global context or scope is the window object (or the entire HTML document).

Local vs Global

If a variable is initialized (assigned a value) without first being declared with the var keyword, it is automatically added to the global context and it is thus a global variable:

function showAge () {
	// Age is a global variable because
        // it was not declared with the var keyword inside this function​
	age = 90;
	console.log(age);// ​
}
​
showAge (); // 90​
​
​// Age is in the global context, so it is available here, too​
console.log(age); // 90

Variable Hoisting

function showName () {
console.log ("First Name: " + name);
​var name = "Ford";
console.log ("Last Name: " + name);
}
​
showName (); 
​// First Name: undefined​
​// Last Name: Ford​
​
​// The reason undefined prints first is because the local variable name 
// was hoisted to the top of the function​
​// Which means it is this local variable that get calls the first time.​
​// This is how the code is actually processed by the JavaScript engine:​

unction Declaration Overrides Variable Declaration When Hoisted

 // Both the variable and the function are named myName​
​var myName;

​function myName () {
console.log ("Rich");
}
​
​// The function declaration overrides the variable name​
console.log(typeof myName); // function