Cacher is the code snippet organizer for pro developers

Scope and Hoisting in Javascript

Scope refers to the range of availability of a variable, once declared.  If a variable is declared outside of a function, it is available throughout the program to be used and even mutated by other functions at any place and time.  This type of variable is called a "Global" variable, and is generally discouraged due to the unpredictability of its being modified at various times and places during the execution of the code creating unexpected results referred to as "side effects".

Local scope, on the other hand, refers to the availability of the variable only within the function or sub functions within the parent function in which it is declared. So a variable declared inside a function cannot be accessed by other functions outside that function, which is to say it cannot be accessed outside it's local scope.

This is all determined by the scope chain, which is a sort of regulatory hierarchy within JavaScript.  When a JavaScript program is run the JavaScript engine first looks for the variable being used locally for a value assignment.  If it is not found there it will look to the parent function(s) which may encompass that function and variable use.  If not found there it will continue up to broader and broader scope till it ends up at the window scope which is the global scope.  Wherever that variable is first encountered up the programs variable scope chain, that is the variable definition which the program will use for that variable's reference.

When using global variable any function in the program can alter the variables value outside its own scope, up into a parent scope, and create unexpected results. This is what is termed “side effects” and can be very difficult to track down when there are errors or undetermined results of running a program. If a variable is not already defined in the global scope then when a variable is assigned, without the VAR keyword, it will create it. 

If an assignment is made to a variable in a local scope, in a function lower down the scope chain, without using the VAR keyword, assigning that variable a new value, can affect a variables value which is in the global scope. That function will change it, the global variable, (mutate it) to be the new assigned value. This can have undesirable effects if that is not what you intended.

A good program will always have “determinate” results, getting what you intend from inputs and outputs. Not being careful about the declaration of a variable can lead to unexpected results, indeterminate results, which will difficult to correct later.


Two ways to help prevent indeterminate results and is good practice is 1.) Always use the key word VAR to declare variables. 2.) to use “Strict Mode” in all your Javascript files. By placing “Strict Mode” at the top of your Javascript file it will catch any attempt to declare a variable without the VAR keyword with an error message “uncaught reference error”.

Another issue that a good programer needs to be aware of is how Javascript “Hoists” variables and functions when it first reads a program.  This can can cause problems and unless you understand how it works you may have trouble reasoning well about your code.  

Here is how ‘Hoisting” works.When the JavaScript interpreter reads in a new JavaScript file, or a new function in that file, it does an initial pass through first, where it looks for any and all variable declarations. It opens a spot in memory for them and this first pass provides just variable declarations without any assignment of value. Hence they will return “undefined” until the program finishes running and then assigns that set aside space a value which you have specified in the program later. For this reason you should make sure you have your value assignments BEFORE attempting to use them in a function or you may see the value as undefined.

Hoisting is also a good thing because this is how you can use a function before it is declared in your code since the JavaScript engine has already interpreted it and made it available for use during this first pass….