Learn what JavaScript is, where it runs, and how it adds behavior to web pages.
A useful foundation for the rest of the roadmap.
JavaScript Roadmap
This roadmap provides a recommended learning order from JavaScript fundamentals to application skills, advanced concepts, and specialized topics. Follow one milestone at a time and practice before moving on.
15 Beginner
20 Intermediate
17 Advanced
Start with Beginner and move forward as the core concepts become comfortable.
Beginner Level
Build the core concepts needed to start writing JavaScript.
Understand how JavaScript was born and how it evolved into the language it is today.
Good context before going deeper.
Set up an editor, a browser, and a simple way to run JavaScript while you learn.
Makes practice easier from the beginning.
4
Comments
Add notes for intent, assumptions, or tricky decisions while keeping comments accurate.
A small habit that supports maintenance.
Display values with the console and browser dialogs so you can observe your code while learning.
Useful for early experiments and debugging.
Give values meaningful names so your program can store and work with changing information.
A foundation for readable programs.
Recognize primitive and object values, including strings, numbers, booleans, null, and undefined.
Helps you predict how values behave.
Use operators to calculate, compare values, assign results, and combine conditions.
Supports calculations and control flow.
Choose which code runs by evaluating conditions with if, else, and switch.
The basic building block for decisions.
10
Loops
Repeat work over collections or until a condition changes, using the loop that fits the task.
Useful for repetition and collection processing.
11
Functions
Package reusable behavior into functions with inputs, outputs, and a clear responsibility.
A prerequisite for callbacks and closures.
12
Arrays
Store ordered collections and transform, search, sort, and iterate over their values.
A practical way to work with groups of values.
13
Objects
Group related properties and behavior in objects that model data in your application.
A core way to represent structured data.
Read and update the document so JavaScript can change page content and structure.
Connects language fundamentals to browser pages.
15
Events
Listen for user and browser events, then run the right response when they occur.
The basis of interactive browser features.
Intermediate Level
Use modern JavaScript to build applications and work with asynchronous data.
Learn language additions such as let, const, template literals, and modules that improve clarity and capability.
A useful bridge from fundamentals to modern code.
Use concise function syntax and understand lexical this, which behaves differently from regular functions.
Helpful when reading modern JavaScript APIs.
Extract selected values from objects and arrays while keeping data transformations readable.
Saves time and makes code cleaner.
Expand iterable values or object properties for copying, merging, and function calls, while distinguishing spread from rest.
Useful for composing data and function inputs.
20
JSON
Parse and produce a text format commonly used to exchange structured data with web services.
Essential for working with APIs.
21
Set & Map
Use Set when values must be unique and Map when keys should point to values, including keys beyond strings.
Choose a structure based on the data relationship you need.
Understand classes, prototypes, inheritance, and composition as different ways to model behavior and relationships.
Useful when a project benefits from object-based design, but not required for every application.
23
Closures
Understand how a function can retain access to its lexical environment after the outer function returns. Review Scope first.
Builds directly on lexical scope and function fundamentals.
24
Scope
Learn how global, function, block, and module scope control where names can be accessed. This is a prerequisite for Closures.
Understand this before studying closures and the scope chain.
25
Hoisting
Understand how declarations are initialized during execution, including the different behavior of functions, var, let, and const.
A precise mental model prevents surprising initialization errors.
26
Debugging
Find and fix mistakes in your code using browser dev tools and debugging techniques.
A critical everyday skill for all developers.
27
Callbacks
Pass a function to run later or when an operation finishes, a pattern that leads naturally to Promise-based code.
A foundation for event handlers and asynchronous control flow.
28
Promises
Represent the eventual success or failure of an asynchronous operation and compose dependent work.
The core abstraction behind modern async JavaScript.
Use readable syntax for working with Promises while the runtime can continue handling other work.
A clear way to express sequential asynchronous workflows.
Validate inputs and handle failures where you can recover, report useful context, or show a safe fallback.
Helps applications fail in predictable ways.
31
Modules
Use import and export to define file boundaries, share code, and control dependencies in a module-based application.
Supports maintainable application structure.
32
AJAX
Learn the older XMLHttpRequest approach for maintaining existing applications; prefer Fetch for new browser code.
Useful legacy knowledge, not the default for new code.
33
Fetch API
Use the browser-provided Fetch API with Promises to request resources, inspect responses, parse data, and handle failures.
Builds on Promises for browser networking.
34
Working with APIs
Work with endpoints, request methods, response data, authentication, and errors when integrating external services.
Turns asynchronous language skills into application features.
Use browser features such as location, history, and storage, while understanding that these are Web APIs rather than core JavaScript.
Adds browser capabilities to language fundamentals.
Advanced Level
Study internals, performance, security, and specialized APIs after the core path.
36
Event Loop
Understand how the runtime coordinates synchronous code, queued jobs, and asynchronous callbacks.
Explains why asynchronous work completes when it does.
37
Call Stack
See how the call stack tracks active function calls and how nested calls return in last-in, first-out order.
A foundation for understanding execution and stack overflows.
Understand how objects delegate property and method lookup through a prototype chain.
Clarifies how classes work on top of prototypes.
Study the environment created to evaluate code, including bindings, scope, and the current execution state.
Connects scope, the call stack, and runtime behavior.
Learn how garbage collection reclaims unreachable objects and how retained references can cause memory leaks.
Useful when diagnosing long-lived application problems.
Study reusable design approaches and their tradeoffs, then choose patterns that fit the problem.
Patterns are options, not rules for every project.
42
Functional Programming Concepts
Use functions, immutability, and composition to make data transformations easier to reason about and test.
A useful style, not a replacement for every other approach.
Measure bottlenecks, reduce unnecessary work, and improve responsiveness without optimizing blindly.
Performance work should follow evidence from profiling.
44
JavaScript in Browser vs Node
Compare the JavaScript language with host environments, including browser Web APIs and Node.js server APIs.
Helps explain why available globals and capabilities differ.
45
Web APIs
Use browser-provided capabilities such as location, networking, and background processing that are separate from the JavaScript language.
Explore these APIs when a product needs their specific capability.
46
Web Workers
Move suitable computation to a worker context and exchange data with the page through messages.
A specialized option for work that would otherwise delay the main thread.
Protect applications by validating input, safely handling output, and understanding browser security boundaries.
Security belongs in design and implementation, not only at the end.
Use focused tests to verify behavior and catch regressions as code changes.
Choose unit, integration, or end-to-end tests for the risk involved.
Understand package managers, linters, formatters, bundlers, and build tools when a project needs them.
Tool choices depend on the project and runtime.
Define patterns for searching, validating, and replacing text when regular expressions fit the problem.
Useful for text processing and validation.
Build iterable sequences and pause or resume generator functions with yield.
Useful for specialized iteration and lazy workflows.
Intercept selected object operations with Proxy and use Reflect for standard forwarding behavior.
A specialized metaprogramming tool with added complexity.
Use the Roadmap as a Guide
Begin with the first topic, practice what you learn, and return to the roadmap when you are ready for the next step.