Variable Hoisting in Javascript

Introduction

Variable hoisting is one of the major feature of javascript, it allows a developer to understand Javascript's way of handling the variable's declaration. By bringing up all the variables’ declaration at the top of the functional/global block is called variable hoisting. This allows the user to use the variable before declaring it. There are some variables that get hoisted completely and there are some that get hoisted with a temporal dead zone.

Hoisting of a Variable

As we are using a variable age before its declaration, it will throw the error ‘age is not defined’ through most of the programming language. But in JavaScript, it does not. Then the output would be 10 or something !!! But….The output would be: undefined

Hence, why undefined and not 10? Javascript only pulls up the declarations and not their initialization or assignments. JavaScript looks at the same code differently:

Function Hoisting

JavaScript hoist functions too. We can access the functions before writing them.But there are two different cases in a function as there are two ways to create a function:-

1) Using function expression

2) Creating variables for a function

We will understand both and how each function behaves towards variable hoisting.

Using Function Declaration: 

We are calling the helloWorld() function before declaring it. This can be done since JavaScript hosts the function definition at the top of the scope.

Below is how JavaScript reads the above code:

Creating Variables for a Function

Let’s understand how hoisting works and create a function using variables:

If you execute the above code, you will be thrown an Uncaught Exception error as shown in the screenshot below:

Does that mean Javascript doesn't hoist the function declared using var. To answer this, we have to repeat the definition of Variable Hoisting again, bringing up all variable declaration at the top of the functional/global block is called variable hoisting. That means, JavaScript allows the user to hoists the function declared using a function expression syntax for the definition, and that’s how it is available to invoke before the execution reaches there. This is everything about variable hosting. ES6 has introduced new variable types called let and const. These variable gets hoisted but JavaScript puts them into Temporal Dead Zone and makes them unavailable for usage until the execution reaches there. The reason for this behavior is that JavaScript wants to minimize runtime errors.If you try to use any let or const variable before declaring, you will land up with an error that reads<variable_name> is not defined.