INTERVIEW PREPARATION GUIDE

JavaScript Interview
Roadmap: Zero → Advanced
A structured, phase-by-phase path through JavaScript
fundamentals, asynchronous programming, the DOM,
advanced concepts, and hands-on coding practice —
built for fresher MERN Stack & frontend interviews.

15 Levels 7 Practical Projects 30+ Coding Problems 29 Must-Know Concepts

Prepared for Dhyey • MERN Stack / Frontend Developer Track • Bengaluru & Ahmedabad
Table of Contents

L1 JavaScript Fundamentals Phase 1

L2 Arrays & Objects Phase 2

L3 Scope & Execution Phase 3

L4 this, Call, Apply, Bind Phase 4

L5 Closures Phase 4

L6 Asynchronous JavaScript Phase 5

L7 Promises Phase 5

L8 DOM Phase 6

L9 Advanced JavaScript (Prototypes, Classes) Phase 7

L10 ES6+ Phase 7

L11 Modules & Modern JS Phase 7

L12 Memory & Performance Phase 7

L13 Interview-Trap Concepts Phase 7

L14 Practical JavaScript — 7 Projects Phase 8

L15 Coding Problems Phase 9

★ Interview Preparation Method (10-Step Structure) —

★ Final Confidence Test — 29 Questions —

★ Suggested Study Sequence — 10 Phases —

 LEVEL 1 JavaScript Fundamentals

1. Introduction
▸ What is JavaScript? ▸ JavaScript vs Java
▸ Where does JavaScript run? ▸ Browser vs [Link]
▸ Interpreted vs JIT compiled ▸ ECMAScript
▸ "use strict"

2. Variables & Data Types

▸ var, let, const ▸ Primitive vs Non-primitive
▸ String ▸ Number
▸ Boolean ▸ undefined
▸ null ▸ Symbol
▸ BigInt ▸ Objects
▸ Arrays ▸ typeof
▸ Dynamic typing

Practical

let name = "Dhyey";

let age = 22;
let isDeveloper = true;

[Link](typeof name);
[Link](typeof age);
[Link](typeof isDeveloper);

3. Operators
▸ Arithmetic ▸ Assignment
▸ Comparison ▸ Logical
▸ Ternary ▸ Increment / decrement
▸ == vs === ▸ != vs !==
▸ Nullish coalescing ?? ▸ Optional chaining ?.

4. Control Flow
▸ if / else / else if ▸ switch
▸ for ▸ while
▸ do...while ▸ break
▸ continue

5. Functions
▸ Function declaration ▸ Function expression
▸ Arrow function ▸ Parameters
▸ Arguments ▸ Return
▸ Default parameters ▸ Rest parameters
▸ Callback functions ▸ Higher-order functions
 LEVEL 2 Arrays & Objects

This is extremely important for interviews.

Arrays — Master These Methods

▸ push() ▸ pop()
▸ shift() ▸ unshift()
▸ slice() ▸ splice()
▸ concat() ▸ includes()
▸ indexOf() ▸ find()
▸ findIndex() ▸ some()
▸ every() ▸ filter()
▸ map() ▸ reduce()
▸ forEach() ▸ sort()
▸ reverse()

You should be able to solve:

Remove duplicates
Find maximum / minimum
Sum array
Count occurrences
Find objects by property
Transform array of objects
Sort objects
Group data
Flatten arrays

Objects
▸ Creating objects ▸ Accessing properties
▸ Adding / removing properties ▸ Nested objects
▸ Object destructuring ▸ Object methods
▸ [Link]() ▸ [Link]()
▸ [Link]() ▸ Spread operator
▸ Rest operator

Example

const user = {
name: "Dhyey",
age: 22,
skills: ["JS", "React"]
};

const { name, age } = user;

 LEVEL 3 Scope & Execution

This is where interview questions become more interesting.

Must Understand Deeply

▸ Global scope ▸ Function scope
▸ Block scope ▸ Lexical scope
▸ Scope chain ▸ Hoisting
▸ Temporal Dead Zone ▸ Execution context
▸ Call stack

Output question — explain the difference:

[Link](a);
var a = 10;

[Link](a);
let a = 10;
 LEVEL 4 this, Call, Apply, Bind

Very common in interviews.

▸ this ▸ call()
▸ apply() ▸ bind()

Example

const user = {
name: "Dhyey"
};

function greet(city) {
[Link]([Link], city);
}

[Link](user, "Bangalore");

Be ready to explain: Understand how this changes depending on how a function is called.
 LEVEL 5 Closures

One of the most important JavaScript concepts.

▸ What is closure? ▸ Lexical environment

▸ Data privacy ▸ Function returning function
▸ Closures in loops ▸ Practical use cases

Example

function counter() {
let count = 0;

return function () {
count++;
[Link](count);
};
}

const increment = counter();

increment();
increment();
increment();

Be ready to explain: Explain why count still exists after counter() has finished executing.
 LEVEL 6 Asynchronous JavaScript

This is mandatory for frontend interviews.

Learn in this order:

▸ Synchronous JavaScript ▸ Asynchronous JavaScript
▸ Call Stack ▸ Web APIs
▸ Callback Queue ▸ Microtask Queue
▸ Event Loop ▸ setTimeout
▸ Promises ▸ async/await

Example

[Link]("A");

setTimeout(() => {
[Link]("B");
}, 0);

[Link]("C");

You should be able to predict (without memorizing it):

A → C → B
 LEVEL 7 Promises

Master
▸ new Promise() ▸ .then()
▸ .catch() ▸ .finally()

And
▸ [Link]() ▸ [Link]()
▸ [Link]() ▸ [Link]()

Understand
▸ Pending ▸ Fulfilled
▸ Rejected ▸ Resolve
▸ Reject ▸ Chaining
▸ Error handling ▸ Promise chaining
 LEVEL 8 DOM

For frontend interviews, this is essential.

▸ DOM ▸ Selecting elements

▸ getElementById ▸ querySelector
▸ querySelectorAll ▸ Changing text
▸ Changing HTML ▸ Changing CSS
▸ Creating elements ▸ Removing elements
▸ Event listeners ▸ Event object
▸ Events

Understand
▸ Event bubbling ▸ Event capturing
▸ Event delegation ▸ preventDefault()
▸ stopPropagation()

Be ready to explain: Practical project: Todo App using vanilla JavaScript

 LEVEL 9 Advanced JavaScript

Now move into deeper concepts.

▸ Prototype ▸ Prototype chain

▸ Constructor functions ▸ class
▸ Inheritance ▸ Encapsulation
▸ Polymorphism ▸ new keyword
▸ instanceof

Example

function Person(name) {
[Link] = name;
}

[Link] = function () {
[Link](`Hello ${[Link]}`);
};

const p1 = new Person("Dhyey");

[Link]();

Be ready to explain: Understand why greet() is available even though it wasn't directly stored inside p1.
 LEVEL 10 ES6+

Master these:

▸ let / const ▸ Arrow functions

▸ Template literals ▸ Destructuring
▸ Spread ▸ Rest
▸ Default parameters ▸ Modules
▸ Classes ▸ Promises
▸ async/await ▸ Optional chaining
▸ Nullish coalescing ▸ Sets
▸ Maps ▸ Iterators
▸ Generators
 LEVEL 11 Modules & Modern JS

▸ export ▸ export default

▸ import

Difference between:

export const name = "Dhyey";

and

export default name;

Also understand
▸ Named exports ▸ Default exports
▸ CommonJS ▸ ES Modules

Be ready to explain: Why it matters: This will directly help with [Link] + Express.
 LEVEL 12 Memory & Performance

For advanced interviews.

▸ Stack ▸ Heap
▸ Garbage collection ▸ Memory leaks
▸ Shallow copy ▸ Deep copy
▸ Reference vs value ▸ structuredClone()
▸ Debouncing ▸ Throttling

Example

const a = { name: "Dhyey" };

const b = a;

[Link] = "Rahul";

[Link]([Link]);

Be ready to explain: Know why [Link] changes.

 LEVEL 13 Interview-Trap Concepts

These are the topics where interviewers often test actual understanding.

Must practice — predict the output

[Link](typeof null);

[Link]([] == false);

[Link]([] === false);

[Link]("5" + 2);

[Link]("5" - 2);

Also review
▸ Hoisting ▸ Closures
▸ this ▸ Event loop
▸ Promise execution ▸ var vs let
▸ == vs === ▸ Shallow vs deep copy
▸ Reference vs value ▸ Prototype
▸ call / apply / bind ▸ Event bubbling
▸ Debounce vs throttle
 LEVEL 14 Practical JavaScript

This is what will make you actually confident, rather than just interview-ready. Build these progressively.

Project 1 — Counter Project 2 — Todo App

DOM Arrays
Events Objects
Functions DOM
Events
LocalStorage

Project 3 — Quiz App Project 4 — Weather App

Arrays Fetch API
Objects Promises
DOM Async/await
Timers Error handling
State management APIs

Project 5 — Search Application Project 6 — E-commerce Cart

Debouncing Objects, Arrays
API calls map / filter / reduce
Filtering LocalStorage
DOM rendering DOM

Project 7 — Expense Tracker

CRUD
LocalStorage
Array methods
Data manipulation
 LEVEL 15 Coding Problems

After every major topic, solve problems.

Beginner
▸ Reverse a string ▸ Check palindrome
▸ Find largest number ▸ Find smallest number
▸ Count vowels ▸ Remove duplicates
▸ Sum array ▸ Factorial
▸ Fibonacci ▸ Count characters

Intermediate
▸ Flatten array ▸ Group objects
▸ Find duplicate elements ▸ Sort array of objects
▸ Find second largest ▸ Frequency counter
▸ Merge arrays ▸ Intersection of arrays
▸ Implement map ▸ Implement filter
▸ Implement reduce

Advanced
▸ Implement debounce ▸ Implement throttle
▸ Implement Promise ▸ Implement [Link]
▸ Deep clone ▸ Currying
▸ Memoization ▸ Function composition
▸ Retry failed API request ▸ Sequential API calls
▸ Parallel API calls
 METHOD Your Interview Preparation Method

For every topic, we'll use this exact structure:

1 What is it?
Simple definition.

2 Why do we use it?

Real-world reason.

3 Syntax
Basic syntax.

4 Example
Simple code.

5 Practical example
Real-world implementation.

6 Interview answer
A 30–60 second answer you can actually speak.

7 Interview questions
Easy → medium → difficult.

8 Coding problems
You solve them yourself.

9 Output questions
Predict the output before running the code.

10 Mini challenge
Build something using the concept.
 CHECKPOINT Final Confidence Test

Before saying you're interview-ready, you should be able to answer these without Googling — and be able to write the code for each concept,
not just explain it:

What is JavaScript? How does JavaScript execute?

var vs let vs const Primitive vs reference types

== vs === What is hoisting?

What is TDZ? What is scope?

What is closure? What is lexical scope?

What is this? call vs apply vs bind

What is prototype? What is prototype chaining?

What is event delegation? What is event bubbling?

What is event loop? Microtask vs macrotask

What is a Promise? [Link]() vs [Link]()

async/await What is callback hell?

What is debouncing? What is throttling?

Shallow copy vs deep copy What is destructuring?

Spread vs rest Map vs Set

ES modules How does garbage collection work?

 ROADMAP Suggested Study Sequence

Don't try to learn all of this at once — go sequentially, phase by phase:

1 Fundamentals

↓
2 Arrays & Objects

↓
3 Functions + Scope + Hoisting

↓
4 Closures + this

5 Async JS + Event Loop + Promises

↓
6 DOM + Browser APIs

7 Prototypes + Advanced JS

↓
8 Practical Projects

↓
9 Coding Problems

↓
10 Mock Interviews

Trainer approach: For each phase, the concept is taught first, followed by practical code, then a quiz with coding and output questions — before
moving to the next topic.

JavaScript Interview Roadmap · Zero → Advanced