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. 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, before execution of the code. Based on the distinct way JavaScript handles hoisting for different items, I have classified hoisting into three distinct types. Let’s look at each of them with examples: 1. 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!");
} 2. 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. 3. 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 when 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. Let’s 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 the same aslet and const with the temporal dead zone. Final Thoughts I hope this article has helped you understand hoisting in JavaScript and how it works with different variable types, functions, and classes. This concept can be tricky, but you can write better and more efficient code by understanding it. Keep practicing and experimenting with code to continue improving your skills. Happy coding! Pro Tip: 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. Also published here. 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. var let const 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. 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, before execution of the code. Based on the distinct way JavaScript handles hoisting for different items, I have classified hoisting into three distinct types. Let’s look at each of them with examples: 1. 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() foo();
function foo() {
  console.log("Hello, World!");
} 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!");
} foo(); // ReferenceError: foo is not defined
const foo = function() {
  console.log("Hello, World!");
} 2. 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: var console.log(num); // undefined
var num = 10;
console.log(num); // 10 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 . undefined 10 undefined 3. 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 . let const 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 . let const ReferenceError: Cannot access 'num' before initialization var {
  console.log(num); // ReferenceError: Cannot access 'num' before initialization
  let num = 10;
  console.log(num);
} {
  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 when the let or const variables are hoisted but not accessible. Temporal Dead Zone let const 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. let const Let’s 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";
} {
  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 the same as let and const with the temporal dead zone. class let const Final Thoughts I hope this article has helped you understand hoisting in JavaScript and how it works with different variable types, functions, and classes. This concept can be tricky, but you can write better and more efficient code by understanding it. Keep practicing and experimenting with code to continue improving your skills. Happy coding! Pro Tip: 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. var let const Also published here. here.

Let's Demystify Hoisting for Javascript Developers

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Must-Know JavaScript Object Secrets Every developer Needs!

10 Repositories to Help You 10x Your Performance on Technical Interviews

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 JavaScript Interview Questions and Answers to Help you Land Your Next Role

10 GitHub Repositories to Follow

10 Frontend Projects to Take Your Coding Skills to the Next Level

10 Must-Know JavaScript Object Secrets Every developer Needs!

10 Repositories to Help You 10x Your Performance on Technical Interviews

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 JavaScript Interview Questions and Answers to Help you Land Your Next Role

10 GitHub Repositories to Follow

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps