Master Hoisting in JavaScript with 5 Examples

Understanding hoisting in JavaScript is important to understand how the variables and function scope behave in different scenarios. There are different scenarios where hoisting behaves differently than anticipated, which makes hoisting a favourite topic for Frontend Interviews.

In this post, we have curated 5 examples with detailed explanations which cover important scenarios to understand hoisting in depth. 👇

Jump to the examples

1. Example 1: Overshadow variable
2. Example 2: Hoisting with different variable types
3. Example 3: Function Hoisting
4. Example 4: Methods Hoisting
5. Example 5: Variable hoisting with inner functions

Example 1: Overshadow variable

var foo = 'LION';

function showName(){
    foo = 'PANDA';
    return;
    function foo(){};
};
showName();  
console.log(foo); // Guess o/p

Solution:

1. Memory Phase
2. Execution Phase

In Memory phase

function showName(){ // Note: Entire function rose up
    function foo(){};      // Note: Internally, the function foo() rose up
    foo = 'PANDA';        // Note: Internally, this line of code rose up
    return;
};
var foo = undefined;   // Note: This line of code came below

In the Execution Phase

foo = 'LION';
showName();
console.log(foo);

Explanation:

In the memory phase, at first, the function declaration will be hoisted to the top of the global scope. And second to that, the variable var will be hoisted with the value undefined And within the function showName(). The body function-declaration foo() will be hoisted to the top of its function body.

Example 2: Hoisting with different variable types

Guess the output of the code snippet below

console.log(a); // Guess o/p
console.log(b); // Guess o/p
console.log(c); // Guess o/p

var a = 10;
let b = 20;
const c = 30;

Solution:

The code will undergo two phases:

1. Memory Phase
2. Execution Phase

In Memory Phase

• a (declared with var) is hoisted and initialized to undefined.

• b (with let) is hoisted but in TDZ(Temporal Dead Zone) (not initialized yet).

• c (with const) is hoisted but in TDZ (not initialised yet).

In the Execution Phase

/*
Output: undefined → Because a is hoisted and initialised to undefined.
*/
console.log(a);

/*
Output: Throws ReferenceError → b is in the Temporal Dead Zone (TDZ), 
so any access before declaration throws a ReferenceError.
*/
console.log(b);

/*
Never Executed as console.log(b) already throws the ReferenceError, 
but if console.log(b) is commented, then this too shall throw ReferenceError → c is in the Temporal Dead Zone (TDZ).
*/
console.log(c); // 

var a = 10;
let b = 20;
const c = 30;

Notes: 

greet(); // Guess the O/P
shout(); // Guess the O/P
whisper(); // Guess the O/P

function greet() {
  console.log("Hello from greet()");
}

var shout = () => {
  console.log("Hello from shout()");
};

let whisper = () => {
  console.log("Hello from whisper()");
};

// A function declared as a function declaration, the entire function is hoisted to the top of the scope.
greet → function() { console.log("Hello from greet()") }

// As this function is declared using 'var'
shout   → undefined

// As declared using 'let'
whisper  → TDZ (not initialized yet)

In the Execution Phase

/*
✅ Output: Hello from greet()
*/
greet();

/*
❌ TypeError: shout is not a function → 
This would NOT be hoisted the same way — only the greet variable would be hoisted as 'undefined', 
not the function body. So calling greet() before this line would give you a TypeError.
*/
shout();

/*
Never Executed as shout() shall throw an error before but if shout() is commented, 
then → ❌ ReferenceError: Cannot access 'whisper' before initialization
*/
whisper();


function greet() {
  console.log("Hello from greet()");
}

var shout = () => {
  console.log("Hello from shout()");
};

let whisper = () => {
  console.log("Hello from whisper()");
};

console.log(myObjA.sayHello()); // Guess the O/p
console.log(myObjB.sayHello()); // Guess the O/p

var myObjA = {
  sayHello: function () {
    return "Hello!";
  }
};

const myObjB = {
  sayHello: function () {
    return "Hello!";
  }
};

myObjA = undefined

myObjB is in TDZ (Temporal Dead Zone)

 In the Execution Phase

/*
❌ TypeError: myObjA.sayHello is not a function. 
When JS engine sees console.log(myObj.sayHello()), 
myObjA is 'undefined' at that point (assignment hasn’t happened yet) 
and thus, trying to access sayHello from undefined throws an error.
*/
console.log(myObjA.sayHello());

/*
❌ ReferenceError: Cannot access 'myObjB' before initialization. 
When JS engine tries to run: 
*/
console.log(myObjB.sayHello()); 

/*
Since myObjB is still in the TDZ, a ReferenceError is thrown.
*/
console.log(myObjB.sayHello())

var myObjA = {
  sayHello: function () {
    return "Hello!";
  }
};

const myObjB = {
  sayHello: function () {
    return "Hello!";
  }
};

var globalVar = "I am Global";

function outerFunction() {
  var outerVar = "I am Outer";

  function innerFunction() {
    console.log(globalVar);  // Guess the O/P
    console.log(outerVar);   // Guess the O/P
  }

  innerFunction();
}

outerFunction();

var globalVar = "I am Global";

function outerFunction() {
  var outerVar = "I am Outer";

  function innerFunction() {
    console.log(globalVar);  // I am Global
    console.log(outerVar);   // I am Outer
  }

  innerFunction();
}

outerFunction();

⏩ Next Read

1. 5 Ultimate Rules to master this keyword in JavaScript
2. What is Throttling in JavaScript - Implementation & Examples