Variable Hoisting in JavaScript
Tags: javascript, beginners, tutorial, webdev
Published: 2022-09-03 10:22:38

## Introduction

Hoisting is one of the most interesting and important topics in JavaScript to understand how different variables, function, classes declarations and definitions behave in a JavaScript program.
For someone new to JavaScript with no prior experience hoisting can be a confusing as most languages don't handle variable and function declarations the way javascript does and it requires some knowledge of how the JavaScript Engine behaves during code execution to understand Hoisting. 
Hoisting along with Thread of Execution, Scope, Closures is also one of the most popular topics in web dev interviews for entry level jobs.

## Prerequisites

To understand hoisting one should have some knowledge of thread of execution, Execution Context and what are creation phase & execution phase in JavaScript.

## What is hoisting? 

Hoisting is storing the variables declared in the code into the memory when the code execution is in the creation phase. Variables, functions, etc. are all stored in the memory to be available to use when the execution phase begins.

`Hoisting moves all the variables and functions declarations to the top of their scope to make them available to use before they are even declared`

we can understand the above statements by looking at the below examples -


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsd5o4olxcq4vfrhvy1e.png)

We'll go through all three of these and try to understand what's happening here. The knowledge of creation and execution phase will come in handy here.
 
**1.** **In the first example the following explains why undefined is logged :**
- The javascript engine reaches the declaration `var helloWorld` it hoists it into the memory and there's a default behaviour in which the `var` declarations are hoisted i.e., they are hoisted by assigning them value of `undefined` during the creation phase.

- The line `console.log(helloWorld)` being a function call doesn't get hoisted.

- When we come in the execution phase the function call to log the value of helloWorld variable prints the value as undefined since it was hoisted as `undefined` in the creation phase.

**2.** **For the second example the result is undefined too :**
- In creation phase first line being a function call is not hoisted. We reach the variable declaration `var helloWorld = 'Hello World' ` which is hoisted but now we come to an important point. 

`Initialisations are not hoisted during the creation phase only declarations are.`

- As JS Engine hoists var declarations with a value of `undefined` the variable will be hoisted with a value of undefined and not `Hello World!`.

- The reason why `console.log(helloWorld)` prints undefined is that when we're in the execution phase and reach line one the initialization has not taken place yet for our helloWorld variable so we're reading it before its initialized meaning it's value is still `undefined` as we log it.

**3.** **The third example will make things more clear about how hoisting works and what happens during creation and execution phase :**
- In the creation phase helloWorld gets hoisted with a value of undefined.

- Now in the execution phase the first `console.log` will print `undefined` as we've already seen in example 2.

- The execution reaches line 2 where we've initialized the value of `helloWorld to Hello World!` so the value for our variable `helloWorld` changes from `undefined to Hello World!` here.

- The line prints the message `Hello World` because we've initialized the value of our variable before the last `console.log`.

**From Above examples we've made the below observations :**

- Variables are available to use before initialising/assignment of a value in the execution phase.
- **initializations are not hoisted during creation phase** so only the default value of `undefined` got assigned to our variable even though we initialized it in **example 3**.
- In the execution phase a variable will only be assigned a value when it reaches the part of code where its being initialized and not before that.

## How Hoisting is different for Var, let & Const ?

The difference between hoisting of a **var declarations** with those of **let and const declarations** is that var is hoisted in memory with an actual value i.e., **undefined**.

**let declarations** : 
- These are allocated memory during the creation phase but not initialized with any value, keeping them in memory as empty boxes that contain no value before they've been initialized in the excecution phase.
- In the execution phase when a let variable is read before its initialization then the variable will be assigned a value of `undefined` as we can see from the result of first `console.log` in example #2 in the below image.


**const declarations** : 
- These declarations should always be initialized before they are used as they never get assigned a value of undefined like let declarations are assigned in the execution phase making them always throw an error if not assigned a value while declaring them. 




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fd6sshspetqib6tr5vz2.png)


That's it for this post 👏🏻.
Thanks for reading this post. Please post feedback, ask questions if any related to this topic.