The variable scope of a variable in javaScipt is the area in code where the variable is defined, and also where it can be accessed elsewhere in code.
The var keyword is what was traditionally the only keyword that was available for declaring a variable in javaScipt. When using the var keyword to declare variables what will result is function level variable scope. What this means is that once a variable is declared it will be available everywhere within the code given that the code is at the same function scope level. So a variable declared inside the body of a function with var will be there to work with locally in that function, as well as with any nested function within that function, but not outside of the top level function.
- These source code examples are on Github
1.1 - Having a variable with the same name at the top level, and inside a function
Here I have two variables declared with var one at the top level, and another inside the body of a function. this does not result in a name space collision, the reason why being that the n variable inside the body of the function is within the variable scope of that function and not that of the top level code.
So with the var keyword it is functions that must be used to compartmentalize things to help prevent name space collisions. This is also the beginning of what is often called the scope chain as well.
1.2 - The Scope chain with var
When having nested functions each function has its own variable scope it is then possible to have a variable with the same name for each function within that scope by using the var keyword. This might seem a little confusing but once you have a good feel for the nature of function level scope it will make more sense.
1.3 - Variable hoisting with var
2 - Block variable scope with let and const
2.1 - block variable scope with let
With let block scope is possible rather than just function level scope. So the same situation is possible as with var, only now it is something that is in effect each time there is any kind of block of code. This can also be a function as well, but it can also be an if statement, a loop or just about any kind of block of code enclosed with curly brackets.
In the above example the value for n in the body of the if statement differs from the value of n outside of the if statement. If all instances of let where to be replaced with var this would not be the case, it would be the same scoped variable that is changed inside the if statement then.
2.2 - Block variable scope with const
3 - implicit global
It is possible to create an implicit global scope variable. This can often happen by accident actually by forgetting to use the var let or const keyword when declaring a variable. It is generally a good idea to always use one of the keyword options when declaring a variable, even if you do want it to be a global. Always declare the variable outside the body of a function at the top level, even if you do not want to give it a value yet when making globals.
4 - Apply what you have learned and start making some examples
4.1 - Start out with something simple that just moves a point object
5 - Conclusion