1. Introduction

In this tutorial, you’ll learn about hoisting in JavaScript. Hoisting is a very important concept to know for the JavaScript interviews. Hoisting is most commonly asked question in JavaScript interviews. We’ll discuss hoisting with respect to variable, function and classes.

Hoisting in JavaScript refers to the process in which the JavaScript engine appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

In JavaScript, hoisting is possible with all of these:

• variables
• functions
• class declarations

Hoisting allows variables, class declarations and functions to be referenced in code even before they are declared.

Hoisting could result in unexpected errors and that is why not it is not recommended to write code which could result in hoisting.

2. Variable hoisting

Hoisting allows you to use variable before it is declared and/or initialized. We’ll discuss variable hoisting with reference to var and let.

2.1 var hoisting

Following piece of code runs without error:

console.log("name is " + name);

var name;

//Output is: name is undefined

2.2 let and const hoisting

let and const variables are also hoisted but they can’t be read until initialized. If you try to read such variable, you’ll get ReferenceError.

For example, following code will result in ReferenceError.

console.log(name);
let name = "James";

//ReferenceError: Cannot access 'name' before initialization

2.3 Function hoisting

Function hoisting allows you to use a function even before it is declared.

In the following piece of code, we are calling helloWorld() function even before it is declared.

helloWorld('James');

function helloWorld(name){
    console.log("Hello World from " + name);
}

//output is: Hello World from James

Without hoisting you would have to write code in the following manner:

function helloWorld(name){
    console.log("Hello World from " + name);
}

helloWorld('James');

2.4 class hoisting

Classes defined using class declaration are hoisted but must be defined before they can be constructed. The class declaration is done using class keyword.

class Person {}

If you try to construct a class which is not defined yet, you’ll get ReferenceError. For example:

const p = new Person(); // ReferenceError

class Person {}

3. JavaScript hoists declarations not initializations

JavaScript hoists only declarations. JavaScript does not hoist initializations. If a variable is used before declaration, then only variable declaration will be hoisted and its value will be initialized only when the initialization statement is executed.

Let us understand this with the help of an example.

console.log("name is " + name);

var name;

name = 5;

//Output is: name is undefined

In this code the value of name is printed as undefined. The reason is, name will be initialized only when name=5; is executed. JavaScript will hoist the variable but will not initialize.

Even if we initialize in the same line, the output will be the same.

console.log("name is " + name);

var name = 5;

//Output is: name is undefined

If we only initialize the variable and not declare at all, then the variable will not be hoisted. If you try to read such variable, then you’ll get ReferenceError.

console.log(name);
name = "James";

//ReferenceError: name is not defined

However, if you try to read the initialized variable then hoisting will not happen and you’ll not get error. Following piece of code works fine:

name = "James";
console.log(name);

4. Function expressions are not hoisted

Function expressions are not hoisted. Following code will give error:

console.log(getSum(1, 5));

var getSum = function (num1, num2) {
  return num1 * num2;
};

5. class expressions are not hoisted

Similar to function expressions, class expressions are not hoisted. Following code will not work:

console.log(Car.name);

let Car = class {
  constructor(model) {
    this.model = model;
  }
};

6. Conclusion

In this quick tutorial, we discussed hoisting in JavaScript. It is recommended to learn hoisting by writing code and checking output. You may find questions in interviews about hoisting. This tutorial was a quick one but we hope it was informative.

Happy learning!