Hoisting Demystified: A Clear Understanding for JavaScript Developers

Hoisting is one of those concepts in JavaScript that often confuses developers, especially during interviews. Many developers struggle to explain the difference between hoisting in var, let, and const variables, and how it affects the execution of their code. This can lead to a lot of sweating and nervousness during interviews. However, with the information provided in this article, understanding hoisting should be a breeze. By providing examples and explanations of hoisting behavior, this article aims to demystify this concept and make it easy for developers to understand and explain hoisting in JavaScript. Now, you'll be able to confidently explain hoisting to your interviewer and ace that interview.

Hoisting is a behavior in JavaScript where the interpreter moves variable, function and class declarations to the top of their scope, prior to execution of the code. Based on the distinct way in which JavaScript handles hoisting for different items, I have classify hoisting into three distinct types. Lets look at each of them with examples:

Functions:

Function declarations are moved to the top of their scope which means that you can use a function before it is declared in your code.

For example, the following code would work because the function foo() is hoisted to the top of the scope by the interpreter:

foo();
function foo() {
console.log("Hello, World!");
}

It’s important to note that functions created using function expressions and arrow functions are not hoisted and calling them before declaration will not work. Let’s take a look at an example:

foo(); // ReferenceError: foo is not defined
const foo = function() {
console.log("Hello, World!");
}

var:

Variables declared with var are also hoisted to the top of their scope however, only the declaration is hoisted, not the initialization. Check it out:

console.log(num); // undefined
var num = 10;
console.log(num); // 10

You’ll get undefined as the first output and 10 as the second. This is because the variable is hoisted to the top, but without its initialization value, it defaults to undefined.

let, const and Class:

Now, let’s talk about hoisting with let and const. There's a common misconception that let and const are not hoisted, but that's not true. These two keywords are similar in that they are both hoisted to the top of their scope, just like var. However, there's a crucial difference between the two. When you try to access a let or const variable before it's been declared, you'll get a ReferenceError: Cannot access 'num' before initialization. This is because these variables are hoisted without a default initialization, unlike var.

{
console.log(num); // ReferenceError: Cannot access 'num' before initialization
let num = 10;
console.log(num);
}

This will throw an error and the program will stop executing. This is the so-called “Temporal Dead Zone”, the time during execution where the let or const variables are hoisted but not accessible.

One might wonder how the behavior of accessing a variable declared with let or const before the initialization differs from accessing an undeclared variable. The difference lies in the error message. Lets take an example:

{
console.log(stuff); // ReferenceError: stuff is not defined
console.log(goodStuff); // ReferenceError: Cannot access 'goodStuff' before initialization
let goodStuff = "Something really good";
}

Here, we can observe that the error message for ‘goodStuff’ indicates that it is hoisted and the interpreter recognizes its existence, but it has not yet been initialized. In contrast, the interpreter does not recognize ‘stuff’ as a variable at all.

class declarations are also hoisted same aslet and const with the temporal dead zone.

In conclusion, I hope this article has helped you understand hoisting in JavaScript and how it works with different variable types. This concept can be tricky but by understanding it, you can write better and more efficient code. Keep practicing and experimenting with code to continue improving your skills. Happy coding!

P.S. It’s recommended to steer clear of using var for variable declarations in JavaScript, as it can result in unpredictable outcomes and confusion during variable handling. Instead, utilizing let or const is a good practice.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kirmani

With 20+ years in IT, a highly experienced Software Engineer. Diverse skills, stay current with latest tech, deliver high-quality work, love to share knowledge