JavaScript Hoisting Interview Questions and Answers

Introduction

Hoisting is one of the most frequently asked JavaScript interview topics because it demonstrates how the JavaScript engine processes code before execution.

Many developers misunderstand hoisting, believing JavaScript literally moves code to the top of a file. In reality, hoisting occurs during the creation phase of the Execution Context, where variable and function declarations are registered before the code starts executing.

Understanding hoisting is essential for debugging production issues, writing predictable code, and answering advanced JavaScript interview questions.

This guide covers the 15 most frequently asked JavaScript Hoisting interview questions with production examples, execution context diagrams, coding examples, and senior-level best practices.

---

Q1. What is Hoisting?

Answer

Hoisting is JavaScript's default behavior of processing declarations before executing the code.

During the creation phase of the Execution Context:

• Function declarations are fully initialized.
• var variables are initialized with undefined.
• let and const are registered but remain uninitialized until execution reaches their declaration.

Example

console.log(name);

var name = "John";

Output

undefined

It behaves internally like:

var name;

console.log(name);

name = "John";

Why Interviewers Ask This

Interviewers want to verify your understanding of JavaScript's execution model rather than your ability to memorize syntax.

Production Example

Unexpected undefined values caused by accessing var variables before assignment.

---

Q2. How does JavaScript Hoisting work?

Answer

JavaScript executes code in two phases.

Phase 1: Creation Phase

• Create Global Execution Context
• Allocate memory
• Register variables
• Register functions

Phase 2: Execution Phase

• Execute code line by line
• Assign variable values
• Execute function calls

Execution Flow

JavaScript File

↓

Creation Phase

↓

Memory Allocation

↓

Execution Phase

↓

Program Output

---

Q3. Difference between var, let, and const hoisting?

Feature	var	let	const
Hoisted	Yes	Yes	Yes
Initialized	undefined	No	No
Accessible before declaration	Yes (undefined)	No	No
TDZ	No	Yes	Yes

Example

console.log(a);

var a = 10;

Output

undefined

---

console.log(b);

let b = 10;

Output

ReferenceError

---

console.log(c);

const c = 10;

Output

ReferenceError

---

Q4. What is the Temporal Dead Zone (TDZ)?

Answer

The Temporal Dead Zone (TDZ) is the period between entering a scope and executing the declaration of a let or const variable.

During this period, the variable exists but cannot be accessed.

Example

console.log(city);

let city = "Dallas";

Output

ReferenceError

Production Tip

Always declare variables before using them.

---

Q5. Are Functions Hoisted?

Answer

Yes.

Function declarations are completely hoisted.

Example

greet();

function greet() {

    console.log("Hello");

}

Output

Hello

The function is available before its declaration.

---

Q6. Difference between Function Declaration and Function Expression hoisting?

Function Declaration

sayHello();

function sayHello() {

    console.log("Hello");

}

Output

Hello

---

Function Expression

sayHello();

const sayHello = function () {

    console.log("Hello");

};

Output

ReferenceError

Comparison

Function Declaration	Function Expression
Fully hoisted	Variable hoisted only
Callable before declaration	Cannot be called before assignment

---

Q7. Why does var return undefined?

Answer

Because memory is allocated during the creation phase.

Example

console.log(score);

var score = 95;

Internally

var score = undefined;

console.log(score);

score = 95;

Output

undefined

---

Q8. Why do let and const throw a ReferenceError?

Answer

Because they remain inside the Temporal Dead Zone until execution reaches their declaration.

Example

console.log(language);

let language = "JavaScript";

Output

ReferenceError

Interview Tip

let and const are hoisted—but not initialized.

---

Q9. What production issues are caused by Hoisting?

Answer

Common issues include:

• Unexpected undefined
• Calling function expressions before initialization
• Hidden bugs caused by var
• Difficult debugging
• Variable shadowing

Production Example

if (true) {

    var user = "Alice";

}

console.log(user);

Output

Alice

Because var is function-scoped, not block-scoped.

---

Q10. What are common Hoisting interview mistakes?

Answer

Common misconceptions:

• Thinking JavaScript physically moves code.
• Assuming let is not hoisted.
• Believing const behaves differently from let.
• Confusing hoisting with scope.
• Forgetting function expressions are not fully hoisted.

---

Q11. Explain the JavaScript Compilation Phase.

Answer

Before execution, JavaScript scans the source code.

It performs:

• Lexical analysis
• Parsing
• Memory allocation
• Hoisting
• Bytecode generation

Execution Pipeline

Source Code

↓

Parser

↓

AST

↓

Memory Allocation

↓

Bytecode

↓

Execution

---

Q12. How does the Execution Context affect Hoisting?

Answer

Each Execution Context contains:

• Variable Environment
• Lexical Environment
• this binding

During the creation phase:

• Variables are registered.
• Functions are registered.
• Scope chains are created.

Only after that does execution begin.

Production Benefit

Understanding Execution Context helps debug scope and hoisting issues.

---

Q13. Give a senior debugging example involving Hoisting.

Example

console.log(total);

calculate();

var total = 100;

function calculate() {

    console.log("Calculating");

}

Output

undefined

Calculating

Reason

• Function declaration is fully initialized.
• var total is initialized as undefined.

---

Q14. What are best practices to avoid Hoisting issues?

Answer

Senior developers should:

• Use const by default.
• Use let when reassignment is required.
• Avoid var.
• Declare variables before use.
• Keep functions organized.
• Enable ESLint rules.
• Write small, predictable functions.

Production Tip

Never rely on hoisting for application logic.

---

Q15. Hoisting Interview Coding Exercise

Question

console.log(a);

var a = 5;

console.log(b);

let b = 10;

function greet() {

    console.log("Hello");

}

greet();

Output

undefined

ReferenceError

The program stops after the ReferenceError, so greet() is never executed.

Explanation

• a is hoisted and initialized with undefined.
• b is hoisted but remains inside the Temporal Dead Zone.
• Function declaration is hoisted but execution never reaches it because of the error.

---

Common Hoisting Interview Mistakes

• Thinking JavaScript moves code physically.
• Using var in modern applications.
• Accessing let and const before declaration.
• Calling function expressions before assignment.
• Ignoring the Temporal Dead Zone.
• Confusing hoisting with scope.

---

Senior Developer Best Practices

• Prefer const over let whenever possible.
• Avoid var in production code.
• Always declare variables before using them.
• Keep functions near their usage for readability.
• Use ESLint to detect hoisting-related issues.
• Understand the Execution Context rather than memorizing behavior.
• Write predictable code instead of relying on hoisting.
• Use function declarations or well-organized modules consistently.

---

Interview Quick Revision

Concept	Purpose
Hoisting	Processes declarations before execution
Creation Phase	Allocates memory
Execution Phase	Runs statements
var	Hoisted and initialized with undefined
let	Hoisted but in TDZ
const	Hoisted but in TDZ
TDZ	Prevents access before initialization
Function Declaration	Fully hoisted
Function Expression	Variable hoisted only
Execution Context	Environment where code executes

---

Hoisting Lifecycle

graph TD
    JavaScript_File[JavaScript File] --> Creation_Phase[Creation Phase]
    Creation_Phase[Creation Phase] --> Register_Variables[├── Register Variables]
    Register_Variables[├── Register Variables] --> Register_Functions[├── Register Functions]
    Register_Functions[├── Register Functions] --> Allocate_Memory[├── Allocate Memory]
    Allocate_Memory[├── Allocate Memory] --> Execution_Phase[Execution Phase]
    Execution_Phase[Execution Phase] --> Assign_Values[├── Assign Values]
    Assign_Values[├── Assign Values] --> Execute_Functions[├── Execute Functions]
    Execute_Functions[├── Execute Functions] --> Produce_Output[└── Produce Output]

---

Hoisting Summary

Declaration	Hoisted	Initialized	Accessible Before Declaration
var	✅	undefined	✅
let	✅	❌	❌ (TDZ)
const	✅	❌	❌ (TDZ)
Function Declaration	✅	✅	✅
Function Expression	Variable only	Depends on declaration	❌

---

Key Takeaways

• Hoisting is JavaScript's behavior of registering declarations before code execution.
• JavaScript executes code in two phases: Creation Phase and Execution Phase.
• var variables are hoisted and initialized with undefined.
• let and const are hoisted but remain in the Temporal Dead Zone (TDZ) until their declarations are executed.
• Function declarations are fully hoisted, while function expressions are not callable before assignment.
• Hoisting does not physically move code; it is part of the JavaScript engine's execution process.
• Avoid relying on hoisting by declaring variables before use and preferring const and let over var.
• Understanding hoisting and execution context is essential for debugging JavaScript applications and succeeding in frontend interviews.