JavaScript: a reading path from the language basics to building for the web
This curriculum takes you from absolute JavaScript beginner to a confident, modern front-end developer across four carefully sequenced stages. Each stage builds directly on the last — first establishing core language intuition, then deepening your understanding of how JavaScript really works, then tackling the modern async/ES6+ ecosystem, and finally applying everything to real-world patterns and tooling.
Foundations — The Language Basics
BeginnerUnderstand variables, data types, functions, control flow, arrays, objects, and how to manipulate the DOM to make web pages interactive.
▸ Study plan for this stage
Pace: 8–10 weeks, ~40–50 pages/day (accounting for Head First's visual density and hands-on examples)
- Variables and scope: declaring variables with var, let, and const; understanding function and block scope; avoiding global scope pollution
- Data types and type coercion: primitives (string, number, boolean, null, undefined) vs. objects; how JavaScript coerces types in comparisons and operations
- Functions as first-class objects: declaring functions, function expressions, arrow functions, parameters, return values, and closures
- Control flow: if/else statements, switch cases, loops (for, while, do-while), and breaking/continuing loops appropriately
- Arrays and array methods: creating arrays, accessing elements, common methods (push, pop, map, filter, forEach), and iteration patterns
- Objects and properties: creating objects with literals and constructors, accessing/modifying properties, methods, and the this keyword
- DOM manipulation: selecting elements (getElementById, querySelector), modifying content and attributes, handling events, and creating interactive page behavior
- Debugging and testing: using browser developer tools, console logging, and writing simple test cases to verify code behavior
- What is the difference between var, let, and const, and when should you use each one?
- Explain the difference between primitive data types and objects in JavaScript, and give an example of type coercion.
- How do function declarations, function expressions, and arrow functions differ, and what are the practical implications of each?
- Write a function that uses closures to maintain state, and explain how the closure works.
- What is the difference between for loops, while loops, and array methods like forEach and map? When would you use each?
- How do you select DOM elements and modify their content, attributes, and styles? Write code that responds to a click event.
- Explain the this keyword in the context of object methods and event handlers.
- What are the most useful array methods (map, filter, reduce) and how do they differ from traditional loops?
- Build a simple calculator that takes two numbers and an operator, performs the operation, and returns the result; practice with functions and control flow.
- Create a to-do list app where users can add, remove, and mark items as complete; practice DOM manipulation, arrays, and event handling.
- Write a program that filters an array of objects (e.g., products) by price range and category; practice array methods and object properties.
- Build a form validator that checks for empty fields, valid email format, and matching passwords; practice DOM selection, events, and control flow.
- Create a simple quiz game with multiple-choice questions stored in an array of objects; track the score and display results; practice objects, arrays, and DOM updates.
- Write a closure-based counter function that increments/decrements a private variable and returns methods to interact with it; practice scope and functions.
Next up: Mastering these foundational concepts—variables, data types, functions, and DOM manipulation—equips you to build interactive single-page applications and prepares you to learn asynchronous JavaScript (callbacks, promises, async/await) and modern frameworks in the next stage.
Uses a proven cognitive learning style with puzzles and visuals to reinforce variables, functions, loops, and the DOM — great for cementing the concepts introduced in Duckett before moving on.
Core JavaScript — How It Really Works
BeginnerGain a solid, precise understanding of JavaScript's core mechanics: scope, closures, the prototype chain, 'this', and type coercion — the knowledge that separates guessers from real developers.
▸ Study plan for this stage
Pace: 8–10 weeks, ~40–50 pages/day, with 2–3 days per week dedicated to hands-on coding exercises
- Lexical scope and how variable lookup chains work through nested functions
- Closures: how functions retain access to their defining scope even after execution
- The prototype chain and prototype-based inheritance as JavaScript's core object model
- The 'this' keyword: how its value is determined by call context, not definition location
- Type coercion: implicit and explicit conversions between primitives and objects
- Function context: how call(), apply(), and bind() manipulate 'this'
- Execution context and the call stack: how JavaScript manages function invocations
- Objects and arrays as reference types: mutation vs. reassignment
- Explain how lexical scope works and why a function can access variables from its parent scope even after the parent function has returned
- What is a closure, and how would you use one to create a private variable or function factory?
- How does the prototype chain work, and why is it important for understanding JavaScript inheritance?
- Explain the difference between how 'this' is bound in a regular function call versus an arrow function, and give an example where this distinction matters
- What is type coercion, and how would you predict the result of expressions like '5' + 3, null == undefined, and [] == false?
- How do call(), apply(), and bind() differ, and when would you use each one to control 'this'?
- Work through Eloquent JavaScript's built-in exercises (chapters 3–8) as you read, typing out all code examples rather than copy-pasting
- Create a module pattern using closures: build a counter object with private state that can only be modified through public methods
- Implement a simple prototype-based inheritance chain: create a Shape constructor, then Circle and Square constructors that inherit from it using Object.create()
- Write functions that deliberately demonstrate type coercion edge cases (e.g., comparing different types with == vs. ===) and predict their output before running
- Build a function that uses call(), apply(), or bind() to borrow methods between objects or set 'this' explicitly in callbacks
- Trace through a multi-level nested function and draw out the scope chain on paper, identifying which variables are accessible at each level
- Refactor a callback-heavy piece of code to use arrow functions, then compare how 'this' behaves differently and explain why
Next up: Understanding these core mechanics—scope, closures, prototypes, 'this', and type coercion—forms the mental model you need to grasp asynchronous JavaScript, event handling, and design patterns, which are the next level of mastery.
The single best free-and-print book for moving from syntax to real programming thinking; its exercises force you to actually write JavaScript, not just read it.
Modern JavaScript — ES6+ and Asynchronous Code
IntermediateFluently use modern ES6+ syntax (arrow functions, destructuring, modules, classes, spread/rest) and master asynchronous patterns including callbacks, Promises, and async/await.
▸ Study plan for this stage
Pace: 8–10 weeks, ~40–50 pages/day (Crockford: 2 weeks; Zakas: 4–5 weeks; Burnham: 2–3 weeks)
- ES6 arrow functions and their lexical `this` binding versus traditional function expressions
- Destructuring assignment for objects and arrays to extract and bind values concisely
- Module systems (import/export) for organizing code and managing dependencies
- ES6 classes and constructor functions as syntactic sugar over prototypal inheritance
- Spread and rest operators for function arguments, array/object literals, and parameter collection
- Callback-based asynchronous patterns and their limitations (callback hell)
- Promises as abstractions for deferred values with .then(), .catch(), and chaining
- Async/await syntax for writing asynchronous code that reads like synchronous logic
- How do arrow functions differ from regular functions in terms of `this` binding, and when should you avoid using arrow functions?
- Explain destructuring assignment for both objects and arrays, and provide examples of how it simplifies variable binding.
- What are the differences between CommonJS modules and ES6 modules (import/export), and how do they affect code organization?
- How do ES6 classes relate to prototypal inheritance, and what syntactic advantages do they provide over constructor functions?
- Describe the spread operator (...) in three different contexts: function arguments, array literals, and object literals.
- What is 'callback hell' or 'pyramid of doom,' and how do Promises and async/await solve this problem?
- Explain the three states of a Promise and how .then(), .catch(), and .finally() handle each state.
- How does async/await work under the hood, and what are the advantages of async/await over chained .then() calls?
- Rewrite 10 traditional function expressions as arrow functions, then identify cases where arrow functions would be inappropriate (e.g., object methods, constructors).
- Practice destructuring: extract nested properties from a complex object, destructure function parameters, and use default values in destructuring assignments.
- Create a small multi-file ES6 module project (3–4 files) using import/export; refactor it to use named exports, default exports, and re-exports.
- Convert a constructor function with prototype methods into an ES6 class, including inheritance using `extends` and `super`.
- Write functions using spread operators in three contexts: spreading array elements as arguments, combining arrays with spread, and merging objects with spread.
- Take a callback-heavy asynchronous function (e.g., nested setTimeout or file reads) and refactor it using Promises, then again using async/await.
- Build a Promise chain that handles multiple asynchronous operations (e.g., fetch data, process it, save results) and add proper error handling with .catch().
- Write an async function that fetches data from multiple endpoints sequentially and in parallel using Promise.all(), then refactor to use async/await with proper error boundaries.
Next up: This stage equips you with modern JavaScript syntax and asynchronous mastery, preparing you to tackle advanced patterns like error handling strategies, concurrent control flows, and real-world application architecture in the next stage.
A short, dense classic that sharpens your judgment about which JavaScript features to use and which to avoid — essential reading before diving into the modern feature set.
The most thorough and readable guide to ES6 features written specifically for developers who already know ES5 — covers every modern syntax feature you'll encounter in real codebases.
Focuses entirely on asynchronous programming patterns — from callbacks to Promises — building the exact mental model you need before async/await becomes second nature.
Mastery — Patterns, Performance, and Professional Code
ExpertWrite clean, maintainable, and performant JavaScript using established design patterns; understand how professional front-end code is structured and how to reason about large applications.
▸ Study plan for this stage
Pace: 12–14 weeks, ~40–50 pages/day (JavaScript Patterns: 4–5 weeks; JavaScript by Flanagan: 8–9 weeks)
- Design patterns (Singleton, Factory, Observer, Module, Revealing Module, Facade, Proxy, Decorator) and when to apply each in real applications
- Closures, scope chains, and execution contexts as the foundation for advanced patterns and memory management
- Prototypal inheritance, constructor patterns, and prototype delegation versus class-based thinking
- Performance optimization: profiling, minimizing DOM reflows, efficient algorithms, and memory leaks
- Code organization and modularity: namespacing, IIFE, module patterns, and dependency management
- Object creation patterns (object literals, constructors, Object.create) and their trade-offs
- Asynchronous patterns: callbacks, promises, and event-driven architecture in large applications
- Professional code structure: separation of concerns, testability, and maintainability principles
- What is the Module pattern, and how does it solve the namespace pollution problem? When would you use the Revealing Module pattern instead?
- Explain the difference between prototypal and classical inheritance in JavaScript. How does Object.create() enable better prototype delegation?
- How do closures enable the Module pattern and the Singleton pattern? What are the performance implications of creating many closures?
- What are the key performance bottlenecks in JavaScript applications (DOM manipulation, rendering, memory)? How would you profile and optimize each?
- Design a real-world application structure using the patterns from Stefanov's book. Which patterns would you use and why?
- How do you manage dependencies and avoid circular references in large JavaScript applications?
- What is the difference between the Observer pattern and event-driven architecture? How do you implement each in a browser environment?
- How do you reason about and prevent memory leaks in long-running JavaScript applications?
- Implement the Module pattern and Revealing Module pattern to build a feature-complete calculator app; compare code clarity and maintainability
- Refactor a callback-heavy codebase into a promise-based or event-driven architecture; measure and document the improvements
- Build a small single-page application (e.g., a todo list or note-taking app) using at least three design patterns from Stefanov; document your pattern choices
- Profile a JavaScript application using browser DevTools; identify and fix a memory leak, DOM reflow bottleneck, or inefficient algorithm
- Create a custom event system using the Observer pattern; use it to decouple components in a multi-feature application
- Implement both constructor-based and Object.create()-based object creation patterns; benchmark performance and analyze memory usage
- Write a Singleton pattern implementation and explain why it's useful (and potentially problematic) in JavaScript; refactor it to use a module pattern instead
- Analyze a large open-source JavaScript library (e.g., jQuery, Lodash, or a framework); identify and document the design patterns used throughout
Next up: This stage equips you with the mental models and architectural patterns needed to design and reason about large, maintainable applications—preparing you to tackle specialized domains like front-end frameworks, asynchronous programming, or systems design with confidence.
Catalogs the most important reusable patterns for structuring JavaScript code — object creation, module patterns, MV* — giving you the vocabulary of professional front-end engineering.
The comprehensive reference that ties everything together; at this stage you can use it to fill gaps, explore the full Web API surface, and solidify your understanding of the complete language.
Discussion
Keep reading
Paths that share books, cover the same subject, or open a related topic.
