JavaScript Learning Roadmap
Complete JavaScript learning path covering all 36 core topics across 7 stages — from fundamentals and functions through objects, browser APIs, async programming, advanced language features, and production-grade web development. Each stage builds on the previous; estimated times include focused study with hands-on practice.
info
Core language foundations — syntax, variables, types, control flow, and iteration. Every JS developer starts here.
History of JavaScript, engine internals, dev tools, REPL, script tags, defer vs async, the initial learning environment setup.
var, let, const, hoisting, temporal dead zone, global vs function vs block scope, lexical scoping, the scope chain.
Primitives (string, number, bigint, boolean, undefined, null, symbol), typeof, type coercion rules, truthy/falsy, strict vs loose equality.
Arithmetic, comparison, logical, assignment, ternary, nullish coalescing (??), optional chaining (?.), operator precedence, short-circuit evaluation.
if/else, switch/case, conditional ternary, truthy/falsy pitfalls, guard clauses, early return patterns, error-first control flow.
for, while, do/while, for...in, for...of, break/continue, labeled statements, loop performance considerations, infinite loop prevention.
Functions are first-class citizens in JavaScript. Master declarations, arrow functions, closures, and higher-order patterns.
Function declarations vs expressions, parameters vs arguments, default params, rest params, return semantics, IIFE, recursion, call stack.
Lexical this binding, concise body syntax, implicit returns, when to use vs traditional functions, limitations (no arguments, no constructors).
Lexical environment, closure mechanics, practical uses (encapsulation, module pattern, callbacks, memoization), memory implications, loop closures solved with let.
Functions that take or return functions, map/filter/reduce, function composition, currying, partial application, memoization, custom HOFs.
JavaScript's prototypal inheritance model, the this keyword, and ES6 class syntax for object-oriented programming.
Object literal syntax, property descriptors, getters/setters, prototype chain, hasOwnProperty, Object.create, inheritance via prototypes.
Default binding, implicit binding, explicit binding (call/apply/bind), arrow function edge cases, this in event handlers, this in classes.
Class syntax, constructor, methods, static members, private fields (#), extends, super, instanceof, mixins, composition over inheritance.
The browser environment — DOM manipulation, event handling, the event loop, and structured error handling.
DOM tree structure, querySelector/getElementBy*, traversal, create/append/remove nodes, innerHTML vs textContent, fragment, shadow DOM.
Event types, addEventListener options, event object (target/currentTarget/preventDefault/stopPropagation), bubbling vs capturing, event delegation, custom events.
Call stack, task queue, microtask queue (Promise/MutationObserver), requestAnimationFrame, rendering pipeline, blocking vs non-blocking, setTimeout(fn, 0).
try/catch/finally, throw, Error types (SyntaxError, ReferenceError, TypeError), custom error classes, stack traces, global error handlers (onerror, unhandledrejection).
Modern asynchronous programming — promises, async/await, and module systems for scalable code organization.
best practice
.catch() or try/catch in async functions. Unhandled rejections crash Node.js processes and produce unhelpful errors in browsers.Promise states (pending/fulfilled/rejected), then/catch/finally chaining, Promise.all/allSettled/race/any, error propagation, promisification, unhandled rejection tracking.
Async function syntax, await semantics, sequential vs parallel execution, error handling with try/catch, top-level await, async iterators.
ES module syntax, named vs default exports/imports, module scope, static vs dynamic import(), circular dependencies, tree shaking, CommonJS comparison.
Deep language internals — generators, iterators, collections, proxies, symbols, and binary data handling.
Generator functions (function*), yield expressions, two-way data passing with next(val), generator delegation (yield*), infinite sequences, async generators.
Symbol.iterator protocol, custom iterables, iterator return/throw, spread operator and for...of mechanics, consuming built-in iterables.
Map vs Object, Set for uniqueness, WeakMap/WeakSet for memory-safe associations, WeakRef and FinalizationRegistry, use cases and performance.
Proxy traps (get/set/apply/construct/has/deleteProperty/etc.), RevocableProxy, Reflect API for default behavior, metaprogramming patterns, validation and logging.
Symbol as unique primitive, Symbol.for shared registry, well-known Symbols (Symbol.iterator, Symbol.toStringTag, Symbol.hasInstance), symbol-keyed property privacy.
ArrayBuffer, DataView, TypedArray views (Uint8Array, Int32Array, Float64Array), endianness, binary protocol parsing, WebSocket binary frames, WebGL buffers.
Real-world JavaScript — networking, parallelism, patterns, type safety, testing, performance, and security practices.
best practice
fetch() basics, Request/Response objects, headers, CORS, streaming responses, AbortController, error handling, file uploads, interceptors.
WebSocket protocol, connection lifecycle, binary vs text messages, reconnection strategies, heartbeats, Socket.IO comparison, production scaling.
Dedicated workers, postMessage protocol, transferable objects, shared workers, worker lifecycle, offloading CPU-heavy tasks, limitations.
Lifecycle (install/activate/fetch), cache strategies (Cache First, Network First, Stale While Revalidate), offline support, push notifications, background sync.
Module, singleton, factory, observer, pub/sub, mediator, command, strategy, decorator, MVC/MVVM patterns applied to frontend JavaScript.
Pure functions, immutability, referential transparency, function composition, currying, partial application, functors, monads (Maybe, Either), Ramda/Lodash FP.
V8 optimization, inline caching, hidden classes, memory profiling (Chrome DevTools), heap snapshots, garbage collection, bundle size, code splitting, lazy loading.
Type annotations, interfaces vs types, generics, union/intersection types, type narrowing, utility types, declaration files, strict mode, migrating JS to TS.
Unit testing (Jest/Vitest), integration tests, E2E (Playwright/Cypress), TDD cycle, mocking, code coverage, debugging with DevTools, source maps, logging strategies.
XSS prevention, CSRF tokens, Content Security Policy, same-origin policy, CORS, input sanitization, DOMPurify, npm supply chain security, OWASP top ten for JS.
Optimize JavaScript applications for real-world performance, bundle efficiency, and production reliability.
Rendering performance (RAIL), reflow/repaint minimization, debouncing/throttling, requestAnimationFrame, Web Workers for offloading, and performance measurement APIs.
Tree shaking, code splitting, dynamic imports, chunk strategies, bundle analysis (Webpack Bundle Analyzer), and dead code elimination.
V8 garbage collection, memory leaks (closures, detached DOM, forgotten timers), heap snapshots, Chrome DevTools Memory tab, and weak references (WeakMap, WeakRef).
Error boundaries, source maps, Sentry integration, performance monitoring (Core Web Vitals), RUM data collection, and alerting.
Service worker lifecycle, caching strategies, offline support, push notifications, background sync, and manifest configuration.