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 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

• W3Schools article on Hoisting

• Digital Ocean article on Hoisting

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 😷