JavaScript Hoisting, TDZ & Variable Shadowing: The Most Asked Frontend Interview Topic

5 min readOct 23, 2026

JavaScript Interview Series #3

What is Hoisting?

→ Hoisting is nothing but In memory creation phase, Javascript allocates memory to variables and functions, Thats why it is getting moved to top of their scope.

or
Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope during the memory creation phase.

Hoisting ka matlab hai JavaScript execution se pehle variables aur functions ke liye memory allocate karta hai. Is wajah se lagta hai ki declarations upar move ho gayi hain.

How hoisting actually works under the hood?

When your JavaScript code runs, the engine creates an Execution Context in two distinct phases:

Memory Creation Phase (Compile Phase):

The engine scans your code line by line.
It finds all variable and function declarations.
Functions: The engine stores the entire function definition directly in memory.
var variables: The engine reserves space for the variable and initializes it with the value undefined.
let and const variables: The engine reserves space for them too, but leaves them uninitialized (placing them in the Temporal Dead Zone until their actual line of code runs).

Execution Phase:

The engine executes the code line by line, assigning actual values to variables and executing functions.

Because the memory is already allocated before a single line of code executes, you can reference a function or a var variable earlier in the script without the engine crashing making it appear as though they were dragged to the top of the file.

Example:

console.log(a);
getName();
var a = 10;

function getName(){
  console.log("Raju");
}

Output:

undefined
Raju

What exactly happened under the hood:

Before javascript will start code execution line by line,

In memory Creation phase, all the variables and functions got the memory.
After that execution started that’s on line 1. it will give undefined after that function will be called, then value will assigned to variable.

One Question would be arose in your mind:

Are let and const Hoisted?

→ Yes, Both are getting Hoisted but We can’t access it before Initialization.

Example:

console.log(a);

let a = 10;

Output:

ReferenceError: Cannot access 'a' before initialization

It’s same with const.

Now you were thinking like,

Why in case of var we are getting undefined??

→ In case of var, During Memory creation phase, variables declared using var are initialized with undefined.

Let’s Understand, How functions are getting Hoisted ?

In Function, Whole body of function is getting stored in memory during memory creation phase.

If function:

Normal function→ Whole body of function is getting stored in memory during memory creation phase.
Functional expressions → It is getting hoisted like variables (var, let, or const) they are assigned to.
Arrow function → It is getting hoisted like variables (var, let, or const) they are assigned to.

Let’s understand by Example:

Normal Function:

Example1:

greet(); // Output: "Hello!"

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

Functional expressions:

Example 1: Using var

funcVar(); // TypeError: funcVar is not a function

var funcVar = function() {
    console.log("Using var");
};

Example 2: Using let/const

funcLet(); // ReferenceError: Cannot access 'funcLet' before initialization

let funcLet = function() {
    console.log("Using let");
};

The variable is hoisted but remains uninitialized in the Temporal Dead Zone (TDZ). Accessing it before its definition throws a ReferenceError.

Arrow Functions:

Example 1: Using var

arrowVar(); // TypeError: arrowVar is not a function

var arrowVar = () => {
    console.log("Arrow with var");
};

Example 2: Using let/const

arrowLet(); // ReferenceError: Cannot access 'arrowLet' before initialization

let arrowLet = () => {
    console.log("Arrow with let");
};

The variable is hoisted but remains uninitialized in the Temporal Dead Zone (TDZ). Accessing it before its definition throws a ReferenceError.

I think you have heard so many times this term “Temporal Dead Zone”
Let’s Understand:

What is Temporal Dead Zone (TDZ)?

→ The period between memory creation and initialization is called temporal dead Zone.

Get Rahul Kumar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example:

console.log(age); // ReferenceError

let age = 25;

Memory Creation
↓
TDZ
↓
let age = 25

Some Tricky Questions:

Example 1:


console.log(a);

var a = 10;

function hello() {
    console.log("Hello");
}

console.log(a);

Output & Reason:

undefined‌
10

because in memory creation phase, a will be initilaized with undefined then in execution phase code will be executed line by line then value will be assigned then it will give output as 10.

Question 2.

console.log(a);

var a = 10;

function a() {
    console.log("Hello");
}

console.log(a);

Output:

function a() { console.log("Hello"); }
10

Why answer like this, Because Function Declarations have higher priority than variable declaration in memory allocation phase.

Question 3:

var a = 1;

function test() {
    console.log(a);

    var a = 2;

    function a() {}

    console.log(a);
}

test();

Output:

function a() {}
2

Why answer like this, Because Function Declarations have higher priority than variable declaration in memory allocation pha

Question 4.

console.log(a);

let a = 10;

console.log(a);

Output:

ReferenceError a cant be accessible before intialization

Memory Creation Phase
↓
a is created
↓
TDZ (Temporal Dead Zone)
↓

let a = 10

Question 5.

console.log(hello);

var hello= function() {
    return "Hello";
};

console.log(hello());

Output:

undefined
Hello

Reason:

It will be hoisted as var variable first so for first console.log, it will give undefined, then value of variable will be assigned then function value will be printed.

Question 6.

foo();

var foo = function() {
    console.log("Function Expression");
};

function foo() {
    console.log("Function Declaration");
}

Output:

Function Declaration

Reason:

functional expression will be hoisted as var variable. then function will be hoisted then function declaration will prioritize so it will be give output as Function Declaration.

Question 7.

var a = 10;

(function() {
    console.log(a);

    var a = 20;

    console.log(a);
})();

console.log(a);

Output:

undefined
20
10

Question 8.

function test() {
    console.log(a);

    var a = b = 10;
}

test();

console.log(typeof a);
console.log(typeof b);

Output:

undefined
undefined
number

Reason:

var a = b = 10;

It means:


b = 10;
var a = b;

so js will behave b as global variable. because it is not declared as ler, var, or const.

*** Hoisting works with declarations only:

var a;
let a;
const a;
function a(){}

Example 9.

function test() {
    console.log(a);

    a = 20;
}

Output:

ReferenceError: a is not defined

Reason:

variable is not exists.

Example 10.

var a = 10;
function test() {
    console.log(a);

    a = 20;
}

console.log(a);

Output:

10
20

Reason:

Bacause of scope chain.

Like, First it will look in same scope in same scope it is not there then it will go to parent scope, it will found there, so it will give output 10 then 20.