All-in-one path to learn modern JavaScript for browsers and Node.js — not a framework tutorial first, but the language mechanics interviewers and production codebases assume you already know.
JavaScript powers the interactive web, most frontend frameworks, and a huge share of backend APIs (Node, serverless, edge). This roadmap follows the same chapter shape as our other tracks: topic heading, short description, core concepts (with code where it helps), external references, YouTube walkthroughs, and related iHateReading blogs at the bottom of each page.
Roadmap (Things to Learn)
What is JavaScript used for in 2026?
- Browser UI — DOM, events, fetch, modules bundled by Vite/Webpack
- Full-stack apps — Next.js, Remix, server components, API routes
- Tooling — linters, bundlers, and CLIs are overwhelmingly JS/TS
- Edge & serverless — Cloudflare Workers, Vercel Functions, Deno
YouTube learning
Core concepts from video walkthroughs:
What Is It?
This hub page lists every chapter in the JavaScript developer roadmap on iHateReading. It is the map, not the territory — each linked page goes deep on one slice of the language.
The track focuses on modern JavaScript (ES modules, async/await, Node and browser runtimes) rather than jumping straight into a framework. Interviewers and production codebases assume you already know this layer.
Chapters follow a consistent shape: core concepts with small code samples, videos, resources, and links to related blog posts.
Why Should I Care?
Skipping straight to React without language fundamentals creates brittle code and painful interviews. This roadmap closes that gap in a fixed order.
JavaScript runs in browsers, servers, CLIs, and edge workers — the same language everywhere, so time spent here pays off across stacks.
Real World Analogy
Think of this roadmap like a gym membership map: each room trains one muscle (syntax, async, modules) before you touch the fancy machines (React, Next.js).
Visual Mental Model
[Start]
|
Getting Started --> Syntax --> Functions --> Async
| |
Objects/JSON <-- Errors/Testing <-- Ecosystem
|
Interview prepBeginner Explanation
This page is the table of contents for the whole JavaScript track. You are not supposed to memorize everything here — pick a chapter, finish it, then come back when you need the next layer. The order matters: runtime basics before async, async before frameworks.
Smallest Possible Example
console.log(typeof null); // "object" — a famous JS quirk
console.log(typeof undefined); // "undefined"Common Mistakes
❌ Jumping to a framework before finishing syntax and async chapters.
You end up copying patterns you do not understand. When state or timing breaks, you have no mental model to debug.
❌ Treating the hub page as optional fluff.
The hub explains how chapters connect. Missing that context makes it easy to study topics in random order and feel lost.
❌ Ignoring Node because you only want frontend work.
Tooling, tests, and many APIs run on Node. Knowing both runtimes prevents 'works in browser, fails in CI' surprises.
Real Project Example
Vercel / Next.js teams still expect you to explain the event loop and module boundaries in code review.
Shopify, Netflix, and Discord ship large JS/TS codebases where language-level bugs (mutability, async) show up in production incidents.
Build This Mini Project
Spend 30 minutes: open the roadmap sidebar, skim each chapter title, and write one sentence per chapter explaining why it exists. Then start 'Getting Started' and run hello.mjs in Node.
Interview Question
Why learn JavaScript mechanics before React?
Frameworks are opinions on top of the language. If you do not understand closures, the event loop, or module scope, you cannot predict component behavior, debug re-renders, or reason about async data fetching — you are just rearranging JSX you do not control.
Key Takeaways
- Use this page to navigate, not to cram everything at once.
- Follow chapter order the first time through.
- Language first, frameworks second.
- Each chapter matches how real teams debug JS in production.
