JavaScript Beginner to Expert
A comprehensive roadmap to master JavaScript from core language fundamentals to frontend, Node.js backend, and modern ecosystem tooling.
This roadmap guides you through the complete JavaScript journey from writing your first variable to architecting production-grade applications on the frontend and backend. Work through each stage sequentially to build deep, connected knowledge. Return to earlier stages as you advance; the language reveals new depth the more you know.
How JavaScript Works
JavaScript vs HTML vs CSS
The role of JS in the browser: structure, style, and behaviour.
How Browsers Execute JS
The V8 / SpiderMonkey engine, JIT compilation, and the rendering pipeline.
Script Loading Strategies
Inline scripts, external files, defer vs async attributes.
Variables & Data Types
var, let & const
Differences in scope, hoisting, and mutability between the three declaration keywords.
Primitive Types
String, Number, BigInt, Boolean, undefined, null, and Symbol.
typeof & Type Coercion
Runtime type checking and JavaScript's implicit type conversion rules.
Operators & Expressions
Arithmetic & Assignment Operators
+, -, *, /, %, **, and compound assignment (+=, -=, etc.).
Comparison & Equality
== vs === (abstract vs strict equality) and comparison operators.
Logical & Nullish Operators
&&, ||, !, ??, and optional chaining (?.).
Control Flow
Conditionals
if/else if/else, ternary operator, and switch/case statements.
Loops
for, while, do-while, for...of, and for...in loops.
Break, Continue & Labels
Control loop execution flow with break, continue, and labelled statements.
Functions
Function Declarations & Expressions
Named functions, anonymous functions, and the difference in hoisting behaviour.
Arrow Functions
Concise syntax, implicit returns, and how arrow functions handle this.
Default, Rest & Spread Parameters
Set default values, collect extra arguments with rest (...args), and spread arrays.
Higher-Order Functions
Functions that accept or return other functions the basis of functional patterns.
Scope & Closures
Scope Chain
Global, function, and block scope how JS resolves variable lookups.
Closures
A function bundled with its lexical environment practical uses and common patterns.
Hoisting
How var declarations and function declarations are moved to the top of their scope.
IIFE
Immediately Invoked Function Expressions for scope isolation.
Objects
Object Literals & Property Access
Create objects, access properties with dot and bracket notation, and shorthand syntax.
Destructuring
Extract values from objects and arrays into variables using destructuring syntax.
Spread & Object.assign
Copy and merge objects with the spread operator and Object.assign.
Property Descriptors
Configurable, enumerable, writable attributes and Object.defineProperty.
Arrays & Iteration
Array Basics
Creating arrays, accessing elements, push/pop/shift/unshift, and length.
map, filter & reduce
Transform, select, and accumulate array values with the three core functional methods.
find, some, every & flat
Search, test, and flatten arrays with modern built-in methods.
Sorting & Comparators
Sort arrays correctly with custom comparator functions.
Strings & Regular Expressions
String Methods
slice, split, trim, replace, includes, startsWith, padStart, and template literals.
Template Literals
Multi-line strings, embedded expressions, and tagged templates.
Regular Expressions
Patterns, flags, test/match/replace with regex, and capture groups.
Error Handling
try / catch / finally
Catch runtime errors, execute cleanup code, and re-throw selectively.
Error Types
Built-in error types: TypeError, RangeError, ReferenceError, SyntaxError, and custom errors.
Custom Error Classes
Extend Error to create domain-specific error types with extra context.
Prototypes & Inheritance
Prototype Chain
How JS looks up properties through proto and Object.prototype.
Constructor Functions
Creating objects with new and attaching methods to the prototype.
Object.create & Object.setPrototypeOf
Manipulate the prototype chain directly without classes.
ES6 Classes
Class Syntax
class, constructor, methods, getters/setters, and static members.
Inheritance with extends & super
Create subclasses and call parent constructors/methods with super.
Private Fields & Methods
Encapsulate implementation details with # private class fields.
Asynchronous JavaScript Callbacks & Promises
The Event Loop
Call stack, Web APIs, callback queue, and the microtask queue explained visually.
Callbacks & Callback Hell
Traditional async pattern and why deeply nested callbacks are problematic.
Promises
Creating promises, .then/.catch/.finally chaining, and promise states.
Promise Combinators
Promise.all, Promise.allSettled, Promise.race, and Promise.any.
Asynchronous JavaScript async/await
async Functions & await
Mark functions as async, await promise resolution, and return values.
Error Handling with async/await
Wrap await calls in try/catch and handle rejected promises properly.
Top-Level await
Use await outside async functions in ES modules.
Modules
ES Modules (ESM)
import, export, named vs default exports, and re-exports.
CommonJS (CJS)
require() and module.exports the Node.js module format.
Dynamic Imports
import() for code splitting and lazy loading modules at runtime.
DOM Manipulation
Selecting Elements
querySelector, querySelectorAll, getElementById, and getElementsByClassName.
Modifying the DOM
innerHTML, textContent, createElement, appendChild, insertAdjacentHTML, and remove.
Attributes, Classes & Styles
getAttribute/setAttribute, classList (add/remove/toggle), and inline style.
DOM Traversal
parentElement, children, nextElementSibling, and closest.
Events
addEventListener & removeEventListener
Attach and detach handlers, event types, and the event object.
Event Bubbling & Capturing
How events propagate up the DOM tree and how to control propagation.
Event Delegation
Attach a single listener to a parent to handle dynamic child elements efficiently.
Custom Events
Create and dispatch custom events with CustomEvent and dispatchEvent.
Browser APIs
Fetch API
Make HTTP requests, handle JSON responses, and manage headers and methods.
localStorage & sessionStorage
Persist key/value data in the browser across sessions or tabs.
History & URL APIs
pushState, replaceState, and the URLSearchParams interface.
Intersection Observer & ResizeObserver
Efficiently detect element visibility and size changes without scroll events.
Forms & Validation
Form Events
input, change, submit events reading values and preventing default.
Constraint Validation API
checkValidity, setCustomValidity, and the ValidityState interface.
FormData API
Collect and serialize form data for XHR or Fetch submissions.
Performance & Rendering
Reflow & Repaint
What triggers layout recalculation and how to batch DOM reads/writes.
requestAnimationFrame
Schedule visual updates in sync with the browser's paint cycle.
Debounce & Throttle
Limit the rate of expensive event handlers like scroll and resize.
Web Workers
Move heavy computation off the main thread to keep the UI unblocked.
Node.js Fundamentals
Node.js Architecture
The event loop in Node, libuv, non-blocking I/O, and the global object.
Core Modules
fs, path, os, http, events, stream, and util built-in modules.
process & environment
process.argv, process.env, process.exit, and stdin/stdout streams.
npm & Package Management
npm CLI Basics
init, install, uninstall, run scripts, and understanding package.json.
Semantic Versioning
MAJOR.MINOR.PATCH versioning, caret (^), tilde (~), and lock files.
pnpm & Yarn
Alternative package managers workspaces, performance, and hoisting differences.
Publishing Packages
Create, version, and publish a package to the npm registry.
Building a REST API with Express
Express Basics
app.get/post/put/delete, route params, query strings, and request/response objects.
Middleware
Built-in, third-party, and custom middleware the middleware stack execution model.
Router & Controller Pattern
Organise routes with express.Router and separate business logic into controllers.
Error Handling Middleware
Centralise error responses with four-argument error-handling middleware.
Working with Databases
MongoDB & Mongoose
Documents, collections, schemas, models, and CRUD with Mongoose ODM.
PostgreSQL with pg or Prisma
Relational data modelling, SQL queries, and using Prisma ORM for type-safe access.
Database Patterns
Repository pattern, connection pooling, transactions, and migrations.
Authentication & Security
JWT Authentication
Sign, verify, and decode JSON Web Tokens for stateless authentication.
Password Hashing
Hash passwords securely with bcrypt never store plain text.
CORS & Helmet
Configure CORS policies and set secure HTTP headers with Helmet.js.
Input Validation & Sanitisation
Validate request bodies with Zod or Joi; prevent injection attacks.
TypeScript
Type System Basics
Primitive types, arrays, tuples, enums, union/intersection types, and any vs unknown.
Interfaces & Type Aliases
Model data shapes, extend interfaces, and choose between interface and type.
Generics
Write reusable, type-safe functions and data structures with generic parameters.
tsconfig & Build Integration
Configure the TypeScript compiler, strict mode, and integrate with Vite or tsx.
Testing
Unit Testing with Vitest / Jest
Write and run unit tests, use matchers, and mock dependencies.
Integration & API Testing
Test Express routes end-to-end with Supertest.
E2E Testing with Playwright
Automate browser interactions and assert UI behaviour with Playwright.
Test Coverage
Measure and improve code coverage; avoid chasing 100% blindly.
Build Tools & Bundlers
Vite
Lightning-fast dev server with ESM, HMR, and optimised production builds.
Webpack
Entry points, loaders, plugins, code splitting, and tree-shaking with Webpack.
esbuild & Rollup
Ultra-fast builds with esbuild; library bundling with Rollup and ES output formats.
Environment Variables
Manage .env files, secrets, and environment-specific config across builds.
Linting, Formatting & Code Quality
ESLint
Configure ESLint rules, shareable configs (Airbnb, Standard), and custom plugins.
Prettier
Opinionated code formatter integrate with ESLint and your editor.
Husky & lint-staged
Run linters on staged files as a pre-commit Git hook.
Advanced Patterns & Architecture
Design Patterns
Observer, Factory, Singleton, Strategy, and Decorator patterns in JS.
Functional Programming
Immutability, pure functions, function composition, currying, and monads.
Event-Driven Architecture
Build decoupled systems with EventEmitter, pub/sub, and message queues.
Monorepos
Manage multiple packages in a single repo with Turborepo or Nx.
You might also enjoy
Check out some of our other posts on similar topics
4 related posts