JavaScript variable scope and hoisting

Variable scope and hoisting

Variable scope defines the places in our code where we can access our variable via reference to use or change their values. JavaScript has two main variable scopes which are function scope and block scope and these scopes are given based on how you define a variable. 

Before ECMAScript 2015 we only had one keyword to define a variable in JavaScript which is the var keyword. The var keyword defines a variable that exists in function scope. This is pretty self explanatory in that variables defined with the var keyword are accessible within the function they were defined. There are two terms typically used to identify a variables scope, these are local and global scope. Local scope is a variable that is defined inside its keyword defined scope therefore keeping its scope local to that function whereas global scope is a variable that is defined in the main body of the JavaScript code and can therefore be accessed anywhere within the JavaScript code. Below are two examples of function scope both local and global and how they can effect where you are able to access a defined variable.

The first example demonstration how trying to access a variable out of its scope will throw you an undefined error and the second example shows how there can be two variables with the same name that exist in different scopes and depending where you access the reference depends on which variable and therefore which value you will get; in this case we are trying to accessing a variable in the main body of the JavaScript code therefore it gets the reference to the global variable in the same scope.

Now moving on to ECMAScript 2015 and block scope we have two new keywords to define variables which gives them block scope, these keywords are let and const. Treat let as the block scope version of var however const is slightly different in that although the variable is also of block scope it is defined as a constant which means the value assigned can never be changed therefore you can still access this variable but you can never modify its value.

The key difference here with let and const opposed to var is that although they all share the same definition of a global scope in the main body of the JavaScript let and const variables have a local scope of block. This means the variables can only be accessed within the curly braces ({ }) they were defined. Below are a couple of examples demonstrating block scope using the let key word.

In the examples we see the main difference between function and block scoped variables. The first example shows how two variables with the same name are created in the main body of the JavaScript code and the variable when logged shows the the last defined variable overwrites the original due to both variables living in the same function scope. The second example is exactly the same except we now have the let keyword defining the variables so now only the variable defined in the main body of the JavaScript is being logged as the other variable has a block scope and is defined between curly braces ({ }) meaning our log only accesses the variable it knows defined in its same block scope in this case being the main body of the JavaScript. 

One final thing to demonstrate when it comes to JavaScript variables is what JavaScript does behind the scenes when variables are defined. The specific behind the scenes action I am referring to is variable hoisting which is an important thing to understand to save you the headache of not understanding why your variables and there values may appear to be incorrect at times. Variable hoisting is the means by which JavaScript creates your variables in memory by hoisting all your variables to the top of your defined scope. So for example if you create variables x and y inside a function with the var keyword assigned with number values although you yourself have created them anywhere you want in your function JavaScript will hoist the variable definition to the top of the function before any logical code. Bare in mind it is only the variable declaration and not the value assignment that is hoisted to the top of your scope. This can lead to both tricky bugs and tricky interview questions surrounding scopes and what you would expect to see outputted. See the example below to see hoisting in action and the problems it can create.

As you can see in the examples above logically you would think that trying to log a variable before you have defined it in your function would mean it would go through the next scope in this case the global scope to look for that variable. However with hoisting the variable definition is hoisted to the top of the function and the value assignment remains after the log so you now end up with an undefined error. Keep this in mind that it is a best practice to define all your variables and initial value assignments at the top of your scope.

That's all for today folks thanks for giving this a read and hopefully you have gained a few neat tips in particular hoisting which is not something that is explained very often with JavaScript. The next post will be here soon where I will be covering immutability. Stay tuned.