Hoisting – JavaScript Concepts Simplified

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.

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

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 😷

Published by Thisura Thenuka

I am a passionate software engineering student. But cricket is my first love ❤

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: