Hoisting - JavaScript Concepts Simplified
Tags: javascript, beginners
Published: 2021-09-18 05:15:19

Hello there, today we’ll look at the hoisting idea in JavaScript.

# What is Hoisting

Hoisting is the process where the interpreter allocates memory for **variables** and **function declarations** before the execution of code.

Variables declared using the **var** keyword are initialized automatically with a value of ***undefined***. When the keywords **let** and **const** are used to declare a variable, they will not be initialized with hoisting.

# Interpreter vs Us

## Declaring Variables – Using var keyword

```
console.log(sport)
var sport = "Cricket"
``` 

Take a look at the above code. We have used the variable before even declaring it. This should throw an error, right? Well, it does not. Here is when hoisting comes to the rescue.

Executing this code logs ***undefined*** in the console. You will understand why this happens when you see how the interpreter sees the code.

Here is how the interpreter sees the code.

```
var sport;
console.log(sport)
sport = "Cricket"
``` 

## Declaring Variables – Using let/const keywords

```
console.log(player)
let player = "Sanga"
``` 

This should also log ***undefined*** as the output, right? Well, sadly the hoisting does not initialize **let** and **const** variables.

**Important**: Please note that all the declarations in JavaScript are getting "**hoisted**". It is just that when it comes to **let** and **const**, the declared variables stay uninitialized. They will only get initialized when the **let** or **const** statements are executed and hence throws an error. This time between the variable creation and initialization is called the **Temporal Dead Zone**. (Read  [this StackOverflow answer](https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-hoisted)  to learn more)

The above code throws a **ReferenceError** since the variable does not get initialized in this case.

```
ReferenceError: Cannot access 'player' before initialization
    at Object.<anonymous> (C:\Users\ThenukaAluthGedara\Desktop\Hoisting.js:1:13)
←[90m    at Module._compile (internal/modules/cjs/loader.js:1063:30)←[39m
←[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)←[39m
←[90m    at Module.load (internal/modules/cjs/loader.js:928:32)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:769:14)←[39m
←[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)←[39m
←[90m    at internal/main/run_main_module.js:17:47←[39m
Please note that only declarations are hoisted in JavaScript.
``` 

The following code still does throw a ReferenceError since the variable has only been initialized.

```
console.log(name)
name = "Sanga"
``` 

## Hoisting with Function Declarations

Both following code snippets work fine since the interpreter always sees the function declarations first.

```
greeting("The Coding Cricketer")

function greeting(siteName){
    console.log("Welcome to " + siteName)
}
``` 


```
function greeting(siteName){
    console.log("Welcome to " + siteName)
}

greeting("The Coding Cricketer")
``` 

# Further Reading


- [MDN Docs on Hoisting](https://developer.mozilla.org/en-US/docs/Glossary/Hoisting) 

- [W3Schools article on Hoisting](https://www.w3schools.com/js/js_hoisting.asp) 

-  [Digital Ocean article on Hoisting](https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript) 

# Conclusion

**It is always a good coding practice to declare the variables at the top of the scope**

You will not be able to use variables without declaring them first if you use “**use strict**” in JavaScript. I will discuss this in a future article.

Thank you for reading my article. I hope you learned something valuable today. If you liked it, drop a like and subscribe to my blog. I’ll see you soon with my next article. Stay Safe 😷