Master Hoisting in JavaScript with 5 Examples

var foo = 'LION';

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

function showName(){  // Function declaration is hoisted to the top of their scope with its entire function body. Since showName() is in the global scope, it’s hoisted to the top of the global scope.
    function foo(){};      // As mentioned above, it is hoisted to the top its scope. In this case, in the function scope showName() along with its entire function body. So, foo becomes the local variable of type 'function'.
    foo = 'PANDA';       
    return;
};
var foo = undefined;   // Only the declaration of 'var' is attached to the global scope with default initialization to 'undefined'. 

showName(); // Runs, but only changes local `foo` to PANDA
console.log(foo); // LION

1. The Temporal Dead Zone is the period between: When a let or const variable is hoisted to the top of its scope and when the variable is actually declared (initialized) in the code. During this time, the variable exists in memory, but you cannot access it — doing so will throw a ReferenceError. 

2. Why is it called "Dead Zone"? : Because although the variable is technically hoisted, it's in a state where it's "not alive" (usable) yet. Trying to use it before its declaration is like trying to drink from an empty cup that hasn’t even been filled yet 😅.

Example 3: Function Hoisting

Guess the output of the code snippet below:

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()");
};

Solution:

1. Memory Phase
2. Execution Phase

// 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)

Example 4: Methods Hoisting

Guess the output of the code snippet below:

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!";
  }
};

Solution:

myObjA = undefined

myObjB is in TDZ (Temporal Dead Zone)

Solution:

1. The Memory Phase
2. The Execution Phase

In Memory Creation Phase

1. globalVar is declared and initialized with 'undefined'.

2. outerFunction being a 'function declaration' is hoisted as a complete function (its definition is available in memory)
3. Inside outerFunction, outerVar and innerFunction are prepared in memory when outerFunction gets invoked (not before).
4. outerVar → 'undefined' initially (before outerFunction's code runs)
5. innerFunction → whole function stored (just like normal function hoisting inside a function).

1. outerFunction() is called.

2. Inside outerFunction:

   • outerVar is assigned "I am Outer".

   • innerFunction is called.

3. Inside innerFunction:

   • It looks for globalVar. Not found inside itself → goes to outer scopes → finds it in global → logs "I am Global".

   • It looks for outerVar. Found in outerFunction's local memory → logs "I am Outer".

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();