@debugging_life.
js
JavaScript
Learning Roadmap
From Basics to Advanced • 27 Topics • 25 Interview Questions
Stage 1 Get the Basics Right 7 Topics
Variables, Functions, Arrays, Objects...
Stage 2 Understand How JS Works 9 Topics
Closures, Promises, Event Loop, Modules...
Stage 3 Advance 11 Topics
Currying, Proxy, Design Patterns, Polyfills...
What's Inside
27 25 3
Core JS Topics Interview Questions Learning Resources
Master JavaScript — one concept at a time.
@debugging_life.js • JS Learning Roadmap
STAGE 1
Get the Basics Right
1—7
Data Types & typeof
01
Primitives vs reference types, typeof quirks, Symbol, BigInt
var / let / const + Scope
02
Block scope, function scope, hoisting differences, TDZ intro
Type Coercion & == vs ===
03
Implicit vs explicit coercion, truthy/falsy, abstract equality
Functions
04
Declaration, expression, arrow — and how they differ in hoisting & this
Arrays & common methods
05
map, filter, reduce, find, some, every, splice vs slice
Objects & destructuring
06
Dot vs bracket, computed keys, nested destructuring, defaults
Operators — ??, ?., spread, rest
07
Nullish coalescing, optional chaining, rest params, spread syntax
PRO TIP
Don't rush through basics. Build 2-3 mini projects (calculator, to-do list, quiz app) using only vanilla JS before
moving to Stage 2.
@debugging_life.js • JS Learning Roadmap
STAGE 2
Understand How JS Actually Works
8 — 16
Closures & Lexical Scope
08
How inner functions remember outer variables, practical use cases
The this keyword (all 4 rules)
09
Default, implicit, explicit, new binding — and arrow function exception
call / apply / bind
10
Function borrowing, partial application, explicit context setting
Prototype Chain & Inheritance
11
How JS objects inherit, __proto__ vs prototype, lookup chain
ES6 Classes
12
Syntactic sugar over prototypes, constructor, extends, super
Event Loop
13
Call stack, task queue, microtask queue — how async works under the hood
Promises
14
States (pending/fulfilled/rejected), chaining, .all/.race/.any/.allSettled
async / await + error handling
15
Syntactic sugar over promises, try-catch patterns, sequential vs parallel
ES Modules — import/export
16
Named vs default exports, dynamic import(), tree shaking basics
PRO TIP @debugging_life.js • JS Learning Roadmap
STAGE 3
Advance
17 — 27
Execution Context & Call Stack
17
Global/function execution context, creation & execution phase
Hoisting in depth + TDZ
18
var vs let/const hoisting, Temporal Dead Zone, function hoisting
Currying & Partial Application
19
Transform f(a,b,c) into f(a)(b)(c), real-world use cases
Memoization
20
Cache expensive function results, fibonacci example, when to use
Debounce & Throttle
21
Rate-limiting functions, search input optimization, scroll handlers
Iterators & Generators
22
[Link], function*, yield, lazy evaluation, async generators
Proxy & Reflect
23
Meta-programming, traps, validation wrappers, reactive systems
WeakMap / WeakSet / WeakRef
24
Garbage collection, private data patterns, memory management
Error Handling patterns
25
Custom errors, error boundaries, graceful degradation strategies
Design Patterns in JS
26
Singleton, Observer, Factory, Module, Strategy — when to use each
Writing Polyfills from scratch
27
map, bind, [Link] — understanding internals by building them
@debugging_life.js • JS Learning Roadmap
Learning Resources
Namaste JavaScript
Namaste PLAYLIST Akshay Saini
JavaScript Best for Stage 2 & 3
JS internals — closures, event loop, promises. The gold standard for
understanding how JavaScript really works under the hood.
Ep.1 — How JS Works 26 Episodes
[Link]/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP
JavaScript Full Course
Learn VIDEO freeCodeCamp
JavaScript Best for Stage 1 & 2
7 hours, beginner to advanced. A comprehensive single-video course
covering fundamentals through intermediate concepts.
Full Course for Beginners 7 Hours
[Link]/watch?v=jS4aFq5-91M
JavaScript Tutorials
JavaScript PLAYLIST The Net Ninja
Tutorials Follow topic by topic
Short, focused videos organized by topic. Perfect for following along
with this roadmap one concept at a time.
#1 — Introduction 51 Videos
[Link]/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrqAV
Suggested Study Plan
Week 1-2 Stage 1 — Basics (1 topic/day + mini project)
Week 3-4 Stage 2 — JS Internals (watch Namaste JS alongside)
Week 5-6 Stage 3 — Advanced (build & implement each concept)
Week 7-8 Interview Questions — practice all 25, write code daily
@debugging_life.js • JS Learning Roadmap
25 JS Interview Questions
Part 1: Closures & Scope • this & Functions • Async & Event Loop
Closures & Scope
Q1 What will this print and why?
Q2 How do you create private variables in JS without classes?
Q3 What is the difference between lexical scope and dynamic scope?
JavaScript
for (var i = 0; i < 3; i++) {
setTimeout(() => [Link](i), 0)
}
this & Functions
Q4 What is the output of this code? (see code block below)
Q5 How does bind work? Write it from scratch.
Q6 What happens when you use new with an arrow function?
JavaScript
const obj = {
name: 'JS',
getName: () => [Link]([Link])
}
[Link]()
Async & Event Loop
Q7 What is the output order and why? (see code block below)
Q8 How do you run 5 API calls in parallel and wait for all?
Q9 What happens if one Promise rejects inside [Link]?
Q10 How do you handle errors in async/await properly?
JavaScript
[Link]('1');
[Link]('4');
[Link]().then(() => [Link]('3'));
setTimeout(() => [Link]('2'), 0);
@debugging_life.js • JS Learning Roadmap
25 JS Interview Questions
Part 2: Prototypes • Arrays & Objects • Hoisting • Coding
Prototypes & Classes
Q11 What is the difference between __proto__ and prototype?
Q12 How does [Link]() work? When would you use it over class?
Q13 What does hasOwnProperty do and when does it matter?
Arrays & Objects
Q14 What is the difference between map and forEach?
Q15 Write a deepClone function without [Link].
Q16 Shallow copy vs deep copy? When does spread {...obj} fail?
Hoisting & Execution
Q17 Function declaration vs expression — hoisting difference?
Q18 What will [Link](typeof x); let x = 5 output?
Q19 Order of function declarations vs variable declarations?
Practical / Coding Challenges
Q20 Write a debounce function from scratch.
Q21 Write your own [Link] polyfill.
Q22 Write a [Link] polyfill from scratch.
Q23 Write a basic Promise polyfill — resolve, reject, .then.
Q24 Flatten a deeply nested array without .flat().
Q25 Implement pipe: pipe(f, g, h)(x) === h(g(f(x)))
BONUS Q: Given a click handler — identify and fix the memory leak. (See full doc)
@debugging_life.js • JS Learning Roadmap
Happy Learning!
Master JavaScript — one concept at a time.
Follow for more JS content
@debugging_life.js
27 25 3 1
Topics Questions Stages Roadmap
Save this PDF • Share with a friend • Start coding today
@debugging_life.js • JS Learning Roadmap