cf.completefrontendCode editor
THE JAVASCRIPT FIELD GUIDE

JavaScript

The complete path through the language that runs the web: from why JavaScript exists and your first line of code, through closures, the event loop, and the DOM, down to how engines parse, compile, optimize, and garbage-collect your code, and how the specification defines it all. Each lesson pairs a short explanation with code you can step through.

315 of 343 lessons available59 modules12 stagesBeginner to expert
315 lessons available
LESSON 1.1 · WELCOME TO JAVASCRIPT · INTERACTIVE ARTICLE

Why JavaScript?

What JavaScript is, what you can build with it, and why every browser runs it.

10 min + experimentsBeginnerExperiments, exercises & a quiz
Start the first lesson

The learning path

315 of 343 available

12 stages, in order. Each one builds on the last, from absolute beginner to engine and specification internals. Jump to a stage, or search for any topic.

  1. STAGE 1 · BEGINNERGetting started3 modules · 14 lessons
  2. STAGE 2 · BEGINNERLanguage fundamentals4 modules · 24 lessons
  3. STAGE 3 · BEGINNER TO INTERMEDIATEWorking with data5 modules · 28 lessons
  4. STAGE 4 · INTERMEDIATEHow JavaScript works4 modules · 19 lessons
  5. STAGE 5 · INTERMEDIATEObjects, prototypes & classes4 modules · 19 lessons
  6. STAGE 6 · INTERMEDIATEAsynchronous JavaScript3 modules · 14 lessons
  7. STAGE 7 · INTERMEDIATEJavaScript in the browser7 modules · 43 lessons
  8. STAGE 8 · ADVANCEDAdvanced language features6 modules · 34 lessons
  9. STAGE 9 · ADVANCEDProfessional JavaScript6 modules · 35 lessons
  10. STAGE 10 · EXPERTInside the engine8 modules · 54 lessons
  11. STAGE 11 · EXPERTThe runtime & the platform5 modules · 31 lessons
  12. STAGE 12 · EXPERTThe specification & the language4 modules · 28 lessons

343 lessons in 59 modules. Open a module to see what each lesson covers.

STAGE 1 · BEGINNER

Getting started

Why JavaScript exists, where it runs, and how to write, run, and debug your first programs.

3 modules · 14 lessons
  1. 01

    Welcome to JavaScript

    What the language is, why it matters, and how it became the language of the web.4 available4 lessons
    1. 1.1Why JavaScript?What JavaScript is, what you can build with it, and why every browser runs it.Covers: The language of the web · Front end, back end, mobile & desktop · What makes it approachable · JavaScript is not Java10 min + experiments
    2. 1.2A short history of JavaScriptFrom a ten-day prototype at Netscape to a language updated every year.Covers: Netscape & Brendan Eich · The ECMAScript standard · ES5 and ES2015 · Yearly releases · Versions vs features12 min + experiments
    3. 1.3Engines, runtimes & hostsHow the engine that runs your code differs from the browser or server around it.Covers: V8, SpiderMonkey & JavaScriptCore · Browsers vs Node.js, Deno & Bun · Language features vs host APIs · Single-threaded by design12 min + experiments
    4. 1.4Manuals & specificationsWhere to find reliable answers: MDN, the ECMAScript spec, and compatibility data.Covers: MDN reference pages · The ECMAScript specification · Baseline & browser compatibility · Reading a reference entry12 min + experiments
  2. 02

    Your first programs

    Set up your tools, run code, and learn the structure every program shares.5 available5 lessons
    1. 2.1Setting up your toolsA code editor, the browser console, and Node.js: everything you need to start.Covers: VS Code · The DevTools console · Installing Node.js · Running a file · Online playgrounds12 min + experiments
    2. 2.2Hello, world!Run your first script in the browser and in Node.js.Covers: The script tag · External scripts with src · console.log · Running with node12 min + experiments
    3. 2.3Statements, comments & semicolonsHow JavaScript reads your code, line by line.Covers: Statements vs expressions · Expression statements & the empty statement · Block statements · When { starts a block, not an object · Semicolons & automatic insertion · Comments · Whitespace & formatting14 min + experiments
    4. 2.4Strict modeThe modern mode that turns silent mistakes into errors.Covers: "use strict" & directive prologues · What strict mode changes · Strict by default in modules & classes12 min + experiments
    5. 2.5Talking to the userShow messages and ask questions with browser dialogs and the console.Covers: alert, prompt & confirm · console.log, warn & error · console.table & grouping12 min + experiments
  3. 03

    Debugging & code quality

    Find bugs quickly and write code other people can read.5 available5 lessons
    1. 3.1Reading error messagesWhat an error and its stack trace are telling you.Covers: SyntaxError, ReferenceError & TypeError · RangeError, URIError & EvalError · Reading a stack trace · Searching for answers13 min + experiments
    2. 3.2Debugging in the browserPause code with breakpoints and inspect values as it runs.Covers: Breakpoints · The debugger statement · Stepping over, into & out · Watch expressions & the scope panel13 min + experiments
    3. 3.3Coding style & namingConventions that keep code readable.Covers: Naming variables & functions · Formatting with Prettier · Comments that help · Avoiding clever code12 min + experiments
    4. 3.4Linting with ESLintCatch mistakes automatically before you run the code.Covers: What a linter does · ESLint rules & configs · Fixing on save · Editor integration12 min + experiments
    5. 3.5Thinking like a developerBreak a problem into steps before writing code.Covers: Understanding the problem · Pseudocode · Small functions · Testing your assumptions12 min + experiments
STAGE 2 · BEGINNER

Language fundamentals

Values, operators, decisions, loops, and functions: the building blocks of every program.

4 modules · 24 lessons
  1. 04

    Variables & values

    Store values, name them well, and meet the eight types JavaScript has.10 available10 lessons
    1. 4.1Variables: let, const & varDeclare, assign, and name the values your program keeps.Covers: let & const · Reassignment vs mutation · Naming rules & reserved words · Why to avoid var12 min + experiments
    2. 4.2Data typesThe seven primitives and objects, and how to tell which is which.Covers: Primitives vs objects · The eight types · typeof · Dynamic typing12 min + experiments
    3. 4.3Numbers & mathIntegers, decimals, and why 0.1 + 0.2 isn't 0.3.Covers: Floating point (IEEE 754) · NaN, Infinity & -0 · Rounding & toFixed · parseInt & parseFloat · The Math object · Numeric separators13 min + experiments
    4. 4.4StringsCreate text with quotes and template literals, and read its characters.Covers: Quotes & template literals · Escape sequences · Length & indexing · Strings are immutable · Concatenation14 min + experiments
    5. 4.5Booleans & truthinesstrue, false, and how JavaScript reads every other value as a yes or a no.Covers: true & false · Comparisons produce booleans · Boolean() & !! · The eight falsy values · Surprising truthy values · Boolean objects vs primitives14 min + experiments
    6. 4.6undefinedThe value JavaScript hands you when nothing has been assigned or found.Covers: Uninitialized variables · Missing properties & array slots · Missing arguments & no return · undefined vs not defined · void & the global undefined · undefined in defaults, destructuring & JSON14 min + experiments
    7. 4.7nullThe value you choose when something is intentionally empty.Covers: Assigning null on purpose · APIs that return null · typeof null · null in math & comparisons · null in JSON & defaults · Reading properties of null13 min + experiments
    8. 4.8Booleans, null & undefinedPut them side by side: falsy vs missing, null vs undefined, and safe checks.Covers: Truthy & falsy · null vs undefined · Checking for missing values11 min + experiments
    9. 4.9BigIntWhole numbers beyond Number's safe range.Covers: Number.MAX_SAFE_INTEGER · The n suffix · BigInt arithmetic · Mixing with Number · BigInt.asIntN & asUintN12 min + experiments
    10. 4.10Type conversionTurn values into strings, numbers, and booleans on purpose.Covers: String(), Number() & Boolean() · Explicit vs implicit conversion · Common surprises12 min + experiments
  2. 05

    Operators & expressions

    Compute, compare, and combine values.5 available5 lessons
    1. 5.1Arithmetic & assignmentMath operators, increments, and operator precedence.Covers: + - * / % ** · % is remainder, not modulo · Unary plus & negation · ++ and -- · Compound assignment · Precedence & grouping · + with strings12 min + experiments
    2. 5.2ComparisonsCompare values safely, and see why === beats ==.Covers: === vs == · Comparing strings · null & undefined comparisons · NaN never equals itself12 min + experiments
    3. 5.3Logical operators&&, ||, and !, and how they short-circuit.Covers: && || ! · Short-circuit evaluation · They return operands, not booleans · Guard & default patterns12 min + experiments
    4. 5.4Nullish coalescing & optional chainingHandle missing values with ?? and ?. instead of long checks.Covers: ?? · ?. on properties & calls · ??=, ||= & &&= · ?? vs ||12 min + experiments
    5. 5.5The rest of the operatorsTernary, typeof, in, delete, bitwise, comma, and void.Covers: The conditional (ternary) operator · typeof & instanceof · in & delete · Bitwise operators: & | ^ ~ · Shifts: <<, >> & >>> · Comma & void · The operator precedence table14 min + experiments
  3. 06

    Control flow

    Make decisions and repeat work.4 available4 lessons
    1. 6.1if, else & conditionsRun code only when a condition is true.Covers: if / else if / else · Blocks · Truthy conditions · Early returns13 min + experiments
    2. 6.2The switch statementChoose between many cases with strict matching.Covers: Matching with === · break & fallthrough · default · Object lookups instead of switch12 min + experiments
    3. 6.3Loops: while & forRepeat code a fixed or unknown number of times.Covers: while & do…while · for · break & continue · Labeled statements · Avoiding infinite loops13 min + experiments
    4. 6.4for…of & for…inLoop over the values of a collection or an object's keys.Covers: for…of over arrays & strings · for…in over keys · Why not for…in on arrays · Changing an object while iterating it · entries() with destructuring12 min + experiments
  4. 07

    Functions

    Package code into reusable pieces that take input and return output.5 available5 lessons
    1. 7.1Declaring & calling functionsParameters, return values, and local variables.Covers: Function declarations · Parameters vs arguments · return · Local & outer variables · Naming functions13 min + experiments
    2. 7.2Default & rest parametersHandle missing arguments, and any number of them.Covers: Default parameters · Rest parameters · The arguments object · Spread in calls · Simulating overloading12 min + experiments
    3. 7.3Function expressions & callbacksFunctions are values: store them, pass them, and return them.Covers: Function expressions · Declarations vs expressions · First-class functions · Callbacks · Anonymous functions12 min + experiments
    4. 7.4Arrow functionsShort function syntax, and what arrows don't have.Covers: Arrow syntax · Implicit return · No own this or arguments · When not to use arrows12 min + experiments
    5. 7.5RecursionFunctions that call themselves, and the stack that tracks them.Covers: Base & recursive cases · The call stack · Stack overflow · Recursion vs loops · Recursive data such as trees14 min + experiments
STAGE 3 · BEGINNER TO INTERMEDIATE

Working with data

Objects, arrays, strings, collections, and dates: model real data and transform it.

5 modules · 28 lessons
  1. 08

    Objects

    Group related data and behavior under one name.7 available7 lessons
    1. 8.1Object basicsCreate objects, read and change properties, and loop over them.Covers: Object literals · Dot vs bracket access · Computed & shorthand properties · in & Object.hasOwn · Property order · Deleting properties13 min + experiments
    2. 8.2Objects & referencesWhy two variables can point to the same object.Covers: Values vs references · Call by sharing · Comparing objects · Shallow copies with spread & Object.assign · Deep copies with structuredClone · const doesn't freeze12 min + experiments
    3. 8.3Methods & thisFunctions stored on objects, and how they reach their object.Covers: Method shorthand · this inside methods · Method chaining12 min + experiments
    4. 8.4Constructors & newCreate many similar objects from one function.Covers: Constructor functions · What new does · new.target · Returning from constructors12 min + experiments
    5. 8.5Object.keys, values & entriesTurn objects into arrays and back to transform them.Covers: Object.keys, values & entries · Object.fromEntries · Transforming objects with map11 min + experiments
    6. 8.6SymbolsUnique property keys that never collide.Covers: Symbol() · description · The global registry: Symbol.for & Symbol.keyFor · Hidden properties · A first look at well-known symbols11 min + experiments
    7. 8.7Object to primitive conversionWhat happens when an object meets + or a template literal.Covers: Symbol.toPrimitive · valueOf & toString · The string, number & default hints11 min + experiments
  2. 09

    Arrays

    Ordered lists and the methods that search, transform, and sort them.6 available6 lessons
    1. 9.1Array basicsCreate arrays, read by index, and add or remove items.Covers: Array literals & the Array() constructor · at() and length · push, pop, shift & unshift · Arrays are objects · Holes & sparse arrays12 min + experiments
    2. 9.2Slicing, splicing & joiningCopy parts of an array, or change it in place.Covers: slice vs splice · concat & spread · join & split · Array.from & Array.of · fill & copyWithin12 min + experiments
    3. 9.3Searching arraysFind items and positions by value or by condition.Covers: indexOf, lastIndexOf & includes · find & findIndex · findLast & findLastIndex · some & every12 min + experiments
    4. 9.4map, filter & reduceTransform lists declaratively instead of with loops.Covers: map · filter · reduce & reduceRight · Chaining methods · flat & flatMap · forEach vs map14 min + experiments
    5. 9.5Sorting & copying safelySort with comparators, and change arrays without mutating them.Covers: sort & comparators · reverse · toSorted, toReversed & toSpliced · with() · Stable sorting12 min + experiments
    6. 9.6Iterating arrays & array-likesChoose the right loop, and turn array-likes into real arrays.Covers: for vs for…of vs forEach · keys, values & entries · Array-likes & Array.from · Borrowing array methods for array-likes · arguments & NodeList12 min + experiments
  3. 10

    Strings & text

    Search, slice, format, and truly understand text.4 available4 lessons
    1. 10.1String methodsSearch, extract, and change text.Covers: at, charAt & charCodeAt · slice & substring · indexOf, lastIndexOf & includes · startsWith & endsWith · toUpperCase & toLowerCase · padStart, padEnd & repeat · trim, trimStart & trimEnd · replace & replaceAll · split & concat12 min + experiments
    2. 10.2Template literals & tagged templatesBuild strings with expressions, and process them with tags.Covers: Interpolation · Multi-line strings · Tagged templates · String.raw12 min + experiments
    3. 10.3Unicode & string internalsWhy an emoji has length 2, and how to count what users see.Covers: UTF-16 code units · Code points & surrogate pairs · codePointAt, fromCodePoint & fromCharCode · normalize() · Graphemes with Intl.Segmenter · isWellFormed & toWellFormed13 min + experiments
    4. 10.4Comparing & sorting textCompare strings correctly across languages.Covers: Code-unit comparison · localeCompare · Intl.Collator · toLocaleUpperCase & toLocaleLowerCase · Case-insensitive search11 min + experiments
  4. 11

    Destructuring & collections

    Unpack values, and pick the right structure for your data.7 available7 lessons
    1. 11.1DestructuringUnpack arrays and objects into variables.Covers: Array destructuring · Object destructuring · Defaults & renaming · Nested patterns · Destructuring parameters · Swapping values · How destructuring evaluates12 min + experiments
    2. 11.2Spread & restExpand and gather values with ...Covers: Spread in arrays & calls · Spread in objects · Rest in destructuring · Merging & copying11 min + experiments
    3. 11.3Map & SetKeyed collections with any key type, and lists of unique values.Covers: Map vs plain objects · Set for uniqueness · Iterating Map & Set · getOrInsert & getOrInsertComputed (upsert)12 min + experiments
    4. 11.4Set operationsUnion, intersection, and difference with the built-in Set methods.Covers: union & intersection · difference & symmetricDifference · isSubsetOf, isSupersetOf & isDisjointFrom · Set-like objects11 min + experiments
    5. 11.5WeakMap & WeakSetAttach data to objects without keeping them alive.Covers: Weakly held keys · Per-object caches · Private data · Symbols as WeakMap keys12 min + experiments
    6. 11.6JSONSend and store data as text.Covers: JSON.stringify & JSON.parse · Replacer & reviver · toJSON · What JSON can't hold · Source text access & JSON.rawJSON13 min + experiments
    7. 11.7Choosing a data structureObject, array, Map, or Set: pick the one that fits the job.Covers: Lookup vs order · Keys & duplicates · Performance trade-offs · Object.groupBy & Map.groupBy12 min + experiments
  5. 12

    Dates, numbers & Intl

    Work with time, format numbers, and speak the user's language.4 available4 lessons
    1. 12.1Date & timeCreate, compare, and calculate dates with the Date object.Covers: Timestamps & Date.now() · Creating & parsing dates · ISO 8601 date formats · Date.UTC & time zones · Getters & setters · Date arithmetic · toISOString & toLocaleString13 min + experiments
    2. 12.2TemporalThe modern date and time API that fixes Date.Covers: Temporal.Now & Instant · PlainDate, PlainTime & PlainDateTime · PlainYearMonth & PlainMonthDay · ZonedDateTime & time zones · Duration & arithmetic · Calendars · Migrating from Date13 min + experiments
    3. 12.3Number & Math in depthPrecision, safe integers, random numbers, and exact sums.Covers: Number.EPSILON & safe integers · MAX_VALUE, MIN_VALUE & Infinity · Number.isInteger & isSafeInteger · isNaN & isFinite vs Number.isNaN & Number.isFinite · toPrecision, toExponential & toString(radix) · Math: rounding, trigonometry, logs & hypot · Math.random pitfalls · Math.sumPrecise, fround, f16round, clz32 & imul13 min + experiments
    4. 12.4Internationalization with IntlFormat numbers, dates, lists, and plurals for any locale.Covers: Locales & Intl.Locale · Intl.NumberFormat · Intl.DateTimeFormat & RelativeTimeFormat · Intl.PluralRules & ListFormat · Intl.DisplayNames & Intl.DurationFormat · getCanonicalLocales & supportedValuesOf13 min + experiments
STAGE 4 · INTERMEDIATE

How JavaScript works

Execution contexts, scope, closures, this, and coercion: the rules behind the code you already write.

4 modules · 19 lessons
  1. 13

    Execution & the call stack

    What happens when JavaScript runs your file, one execution context at a time.5 available5 lessons
    1. 13.1The JavaScript runtime at a glanceThe engine, the host, and the queues: one picture that explains how JavaScript runs.Covers: The engine: heap & call stack · The host: Web APIs & Node.js APIs · Task & microtask queues · How the event loop connects them · One thread, many helpers12 min + experiments
    2. 13.2Execution contextsThe creation and execution phases behind every script and function call.Covers: The global execution context · Creation vs execution phase · Variable environments · globalThis & this at the top level12 min + experiments
    3. 13.3The call stackHow function calls are tracked and unwound.Covers: Pushing & popping frames · Reading stack traces · Stack overflow · The stack in DevTools12 min + experiments
    4. 13.4Hoisting & the temporal dead zoneWhy some functions work before their declaration, but let doesn't.Covers: Function hoisting · var hoisting & undefined · The TDZ for let, const & class · undefined vs not defined12 min + experiments
    5. 13.5Memory: primitives vs objectsWhere values live, and why copying an object copies a reference.Covers: Stack & heap mental model · Value vs reference · Reachability · Garbage collection basics12 min + experiments
  2. 14

    Scope & closures

    Which code can see which variables, and functions that remember.5 available5 lessons
    1. 14.1Scope & lexical environmentsGlobal, function, and block scope, and how lookups climb the scope chain.Covers: Lexical scope · Lexical vs dynamic scope · Block scope · The scope chain · Shadowing · Lexical environment records12 min + experiments
    2. 14.2ClosuresFunctions that remember the variables around them.Covers: Retained variables · Shared vs separate state · Private state · Live bindings12 min + experiments
    3. 14.3Closure patternsCounters, once, memoize, and private state built from closures.Covers: IIFEs & the module pattern · Factory functions · once & memoize · Function factories13 min + experiments
    4. 14.4Closures in loops, timers & memorysetTimeout in a loop, stale values, and other closure classics.Covers: var vs let in loops · setTimeout + closures · Stale closures · Closures that hold memory12 min + experiments
    5. 14.5The old var & the global objectHow var and globals behave, so legacy code makes sense.Covers: Function-scoped var · Redeclaration · globalThis & window · The global object vs global lexical bindings · Implicit globals · Global pollution12 min + experiments
  3. 15

    this & function methods

    How this is decided, and how call, apply, and bind take control.5 available5 lessons
    1. 15.1The this keywordWhat this refers to, one call at a time.Covers: Call-site rules · Default, implicit, explicit & new binding · Binding precedence · this in strict mode12 min + experiments
    2. 15.2call, apply & bindSet this explicitly, and borrow methods.Covers: call vs apply · bind & partial application · Method borrowing · Writing a bind polyfill12 min + experiments
    3. 15.3Arrow functions & lexical thisWhy arrows inherit this, and when that helps or hurts.Covers: Lexical this · Arrows in callbacks & timers · Arrows as methods · this in event handlers12 min + experiments
    4. 15.4Losing thisFix methods that forget their object when passed around.Covers: Detached methods · Callbacks & setTimeout · Bound class fields · Wrapper functions12 min + experiments
    5. 15.5Functions are objectsFunction properties, named function expressions, and wrappers.Covers: name & length · Function name inference · Custom properties · Named function expressions · The new Function syntax · GeneratorFunction, AsyncFunction & AsyncGeneratorFunction · Function.prototype.toString · Forwarding wrappers & decorators14 min + experiments
  4. 16

    Types & coercion in depth

    The spec's conversion rules, so == and + never surprise you again.4 available4 lessons
    1. 16.1Methods on primitivesHow "abc".toUpperCase() works when strings aren't objects.Covers: Wrapper objects · Autoboxing · Why new String() is a trap10 min + experiments
    2. 16.2Type coercionThe abstract operations behind implicit conversion.Covers: ToPrimitive · ToNumber & ToString · ToBoolean · + with strings · Corner cases12 min + experiments
    3. 16.3Equality & sameness==, ===, Object.is, and SameValueZero, step by step.Covers: Strict equality · The loose equality algorithm · Object.is, NaN & -0 · SameValueZero in includes & Map12 min + experiments
    4. 16.4Checking types reliablytypeof, instanceof, Array.isArray, and their blind spots.Covers: typeof null · instanceof · Array.isArray · Object.prototype.toString & Symbol.toStringTag · Error.isError13 min + experiments
STAGE 5 · INTERMEDIATE

Objects, prototypes & classes

Inheritance, classes, property internals, and error handling: build robust object models.

4 modules · 19 lessons
  1. 17

    Prototypes & inheritance

    How objects inherit behavior from other objects.5 available5 lessons
    1. 17.1The prototype chainHow property lookups walk from an object to its prototype.Covers: [[Prototype]] & __proto__ · Lookup & shadowing · Own vs inherited properties · hasOwnProperty, isPrototypeOf & propertyIsEnumerable · this in inherited methods11 min + experiments
    2. 17.2F.prototype & constructorsHow new links instances to a constructor's prototype.Covers: F.prototype · The constructor property · Sharing methods · Inheriting between constructors12 min + experiments
    3. 17.3Built-in prototypesWhere array and string methods actually live.Covers: Object.prototype · Array & Function prototypes · Borrowing methods · Why not to extend built-ins · Polyfills11 min + experiments
    4. 17.4Object.create & null-prototype objectsCreate objects with a chosen prototype, or with none at all.Covers: Object.create · getPrototypeOf & setPrototypeOf · Object.create(null) dictionaries · Prototype performance12 min + experiments
    5. 17.5Delegation vs classical inheritanceThink of prototypes as links between peers, not as copies.Covers: Class-based vs prototype-based OOP · Behavior delegation · The OLOO pattern · Duck typing · Composition over inheritance13 min + experiments
  2. 18

    Classes

    The class syntax, inheritance, and encapsulation.7 available7 lessons
    1. 18.1Class basicsConstructors, methods, getters, setters, and fields.Covers: Class syntax · constructor · Methods live on the prototype · Getters & setters · Public fields · Classes are functions · Async initialization & factory methods12 min + experiments
    2. 18.2Inheritance with extends & superExtend a class and build on its behavior.Covers: extends · super() in constructors · Overriding methods · super.method() · [[HomeObject]]13 min + experiments
    3. 18.3Static members & static blocksProperties and methods that belong to the class itself.Covers: Static methods & fields · Static initialization blocks · Inheriting statics · Factory methods12 min + experiments
    4. 18.4Private fields & methodsReal encapsulation with # names.Covers: #private fields & methods · Private static members · #x in obj brand checks · Private fields vs closures12 min + experiments
    5. 18.5Extending built-ins & instanceofSubclass Array or Map, and check class membership.Covers: Extending Array & Map · Symbol.species · instanceof · Symbol.hasInstance12 min + experiments
    6. 18.6Mixins & compositionShare behavior across unrelated classes.Covers: Mixin objects · Class mixin functions · Traits · Composition over inheritance · An event mixin13 min + experiments
    7. 18.7OOP principles in JavaScriptEncapsulation, abstraction, inheritance, and polymorphism, the JavaScript way.Covers: Encapsulation & abstraction · Polymorphism · Factories vs classes · SOLID in practice12 min + experiments
  3. 19

    Property internals

    Descriptors, accessors, and the rules that control every property.4 available4 lessons
    1. 19.1Property flags & descriptorswritable, enumerable, and configurable.Covers: Object.defineProperty · getOwnPropertyDescriptor(s) · Default flags · Defining many properties · Assignment vs definition12 min + experiments
    2. 19.2Getters & settersAccessor properties that run code on read and write.Covers: get & set syntax · Accessor descriptors · Computed & validated properties · Compatibility wrappers12 min + experiments
    3. 19.3Freezing, sealing & immutabilityLock objects down, and know shallow from deep immutability.Covers: preventExtensions · seal · freeze · isExtensible, isSealed & isFrozen · Deep freeze · const vs frozen13 min + experiments
    4. 19.4Enumerability & ownershipWhich properties each loop and method can see.Covers: Own vs inherited · Enumerable vs non-enumerable · Object.keys vs for…in vs Reflect.ownKeys · getOwnPropertyNames & getOwnPropertySymbols · Property order rules12 min + experiments
  4. 20

    Error handling

    Expect failure, handle it, and report it clearly.3 available3 lessons
    1. 20.1try, catch & finallyCatch runtime errors and always clean up.Covers: try…catch…finally · The built-in error types · name, message & stack · Optional catch binding · Rethrowing · finally and return14 min + experiments
    2. 20.2Throwing & custom errorsThrow meaningful errors, and extend Error for your own types.Covers: throw · Extending Error · error.cause · Wrapping errors · AggregateError12 min + experiments
    3. 20.3Error handling strategiesDecide where to catch, what to log, and what users should see.Covers: Fail fast vs recover · Global handlers: error & unhandledrejection · Error boundaries · Logging & monitoring · Result objects14 min + experiments
STAGE 6 · INTERMEDIATE

Asynchronous JavaScript

Timers, the event loop, promises, and async/await: code that waits without blocking.

3 modules · 14 lessons
  1. 21

    The event loop

    How single-threaded JavaScript handles work that finishes later.4 available4 lessons
    1. 21.1Synchronous vs asynchronousWhy blocking code freezes the page, and how hosts wait for you.Covers: Blocking the main thread · Host APIs do the waiting · Callbacks run later · Run to completion13 min + experiments
    2. 21.2Timers: setTimeout & setIntervalSchedule code, cancel it, and see why timers aren't exact.Covers: setTimeout & clearTimeout · setInterval vs nested setTimeout · Minimum delays & clamping · Trust issues with setTimeout12 min + experiments
    3. 21.3The event loopTasks, microtasks, and why setTimeout(fn, 0) still waits.Covers: The call stack & task queue · The microtask queue · Rendering steps · Starvation14 min + experiments
    4. 21.4Microtasks in depthPredict the output of promise and timer puzzles.Covers: Promise jobs · queueMicrotask · await ordering · Output-order puzzles12 min + experiments
  2. 22

    Callbacks & promises

    From callback hell to values that arrive later.6 available6 lessons
    1. 22.1CallbacksPass a function to run when work finishes.Covers: Async callbacks · Error-first callbacks · Callback hell · Inversion of control · Never mix sync & async callbacks (Zalgo)14 min + experiments
    2. 22.2PromisesRepresent a value that arrives later.Covers: Pending, fulfilled & rejected · Creating promises · then, catch & finally · Promises run eagerly14 min + experiments
    3. 22.3Promise chainingRun async steps in order by returning from then.Covers: Returning values & promises · Thenables · Flattening · Common chaining mistakes16 min + experiments
    4. 22.4Error handling with promisesHow rejections travel down a chain, and where to catch them.Covers: Rejection propagation · Where to put catch · Rethrowing · Don't mix rejections & thrown exceptions · Unhandled rejections15 min + experiments
    5. 22.5Promise combinatorsWait for all, the first, or any of many promises.Covers: Promise.all & allSettled · Promise.race & any · Promise.withResolvers · Promise.try · Await dictionaries: Promise.allKeyed16 min + experiments
    6. 22.6Promisification & promise-based APIsWrap callback APIs, and design your own promise-based functions.Covers: Promisify · util.promisify · Wrapping timers & geolocation · Designing async APIs14 min + experiments
  3. 23

    async & await

    Asynchronous code that reads from top to bottom.4 available4 lessons
    1. 23.1async & awaitWrite promise code that reads like synchronous code.Covers: async functions return promises · await · try/catch with await · Top-level await · What await does under the hood14 min + experiments
    2. 23.2Sequential vs parallelDon't wait in line when you can wait together.Covers: await in loops · Promise.all with await · Concurrency limits · Waterfalls12 min + experiments
    3. 23.3Cancellation with AbortControllerStop requests and work you no longer need.Covers: AbortController & AbortSignal · Cancelling fetch · AbortSignal.timeout & any · Making your APIs cancellable14 min + experiments
    4. 23.4Async patternsRetries, timeouts, queues, and polling done right.Covers: Retry with backoff · Timeouts with race · Async queues & pools · Polling · sleep()14 min + experiments
STAGE 7 · INTERMEDIATE

JavaScript in the browser

The DOM, events, forms, network requests, storage, and browser APIs: build real interfaces.

7 modules · 43 lessons
  1. 24

    The DOM

    Read and change the page from JavaScript.9 available9 lessons
    1. 24.1The browser environmentwindow, the DOM, the BOM, and the specs behind them.Covers: window as the global object · DOM & BOM · HTML & DOM specs · Where scripts run12 min + experiments
    2. 24.2The DOM treeHow HTML becomes a tree of nodes.Covers: Nodes & elements · Text & comment nodes · Autocorrected HTML · Exploring in DevTools13 min + experiments
    3. 24.3Walking & searching the DOMFind elements by relationship or CSS selector.Covers: Parents, children & siblings · querySelector & querySelectorAll · closest & matches · getElementsBy* · Live vs static collections14 min + experiments
    4. 24.4Node properties & contentsRead and set an element's type, tag, text, and HTML.Covers: nodeType & tagName · innerHTML & outerHTML · textContent vs innerText · hidden14 min + experiments
    5. 24.5Attributes & propertiesThe difference between an HTML attribute and a DOM property.Covers: getAttribute & setAttribute · Attribute-property sync · data-* & dataset · Boolean attributes14 min + experiments
    6. 24.6Creating & changing elementsBuild, insert, move, and remove elements.Covers: createElement · append, prepend, before & after · replaceWith & remove · cloneNode · DocumentFragment & template · insertAdjacentHTML14 min + experiments
    7. 24.7Styles & classesChange how elements look from JavaScript.Covers: className & classList · The style property · getComputedStyle · CSS custom properties13 min + experiments
    8. 24.8Sizes, scrolling & coordinatesMeasure elements and the window, and position things precisely.Covers: offset, client & scroll sizes · getBoundingClientRect · Window scrolling & scrollIntoView · Scroll events · elementFromPoint16 min + experiments
    9. 24.9Selection & RangeRead and change what the user has selected.Covers: Range objects · The Selection API · Selection in inputs · Building a highlighter15 min + experiments
  2. 25

    Events

    Respond to clicks, keys, and everything users do.8 available8 lessons
    1. 25.1Introduction to eventsListen for events and read the event object.Covers: addEventListener · The event object · removeEventListener · once, passive & signal options13 min + experiments
    2. 25.2Bubbling & capturingHow an event travels down and back up the tree.Covers: Capture, target & bubble phases · target vs currentTarget · stopPropagation12 min + experiments
    3. 25.3Event delegationOne listener for many elements.Covers: The delegation pattern · Matching with closest() · Behaviors via data attributes · Elements added later14 min + experiments
    4. 25.4Default actionsStop the browser's built-in behavior when you need to.Covers: preventDefault · Passive listeners & scrolling · defaultPrevented12 min + experiments
    5. 25.5Custom eventsCreate and dispatch your own events.Covers: CustomEvent & detail · dispatchEvent · EventTarget in your own classes · Events vs callbacks12 min + experiments
    6. 25.6Mouse, pointer & touchHandle every input device with pointer events.Covers: Mouse events & buttons · mouseover vs mouseenter · Pointer events · Pointer capture · Drag and drop13 min + experiments
    7. 25.7Keyboard & focusKeyboard input and accessible focus management.Covers: keydown & keyup · key vs code · focus, blur, focusin & focusout · Focus traps · aria-expanded & aria-live14 min + experiments
    8. 25.8Page & resource loadingRun code at the right moment in the page's life.Covers: DOMContentLoaded & load · beforeunload & visibilitychange · async & defer scripts · onload & onerror for resources14 min + experiments
  3. 26

    Forms

    Read, validate, and submit user input.4 available4 lessons
    1. 26.1Form properties & elementsAccess forms and their controls.Covers: form.elements · Input values · Checkboxes & radios · select & option15 min + experiments
    2. 26.2Form eventsReact to typing, changes, and submits.Covers: input vs change · submit & preventDefault · cut, copy & paste · Focus in forms14 min + experiments
    3. 26.3Form validationValidate input with the Constraint Validation API.Covers: required, pattern & input types · validity & setCustomValidity · Custom error messages · Accessible errors15 min + experiments
    4. 26.4FormDataCollect and send form data in one step.Covers: new FormData(form) · append & entries · Sending files · Object.fromEntries(formData)14 min + experiments
  4. 27

    Network requests

    Talk to servers with fetch and real-time connections.7 available7 lessons
    1. 27.1fetch & JSONRequest data and handle failed responses.Covers: HTTP in a nutshell · fetch basics · response.ok & status · response.json() · Network errors vs HTTP errors16 min + experiments
    2. 27.2Requests in depthMethods, headers, bodies, and the Request and Response objects.Covers: GET, POST, PUT & DELETE · Headers · Sending JSON · Request & Response objects · credentials & cache options18 min + experiments
    3. 27.3CORS & cross-origin requestsWhy browsers block some requests, and how servers allow them.Covers: The same-origin policy · Simple vs preflighted requests · CORS headers · Credentials12 min + experiments
    4. 27.4URL & URLSearchParamsBuild and read URLs safely.Covers: new URL() · searchParams · encodeURIComponent vs encodeURI · decodeURI & decodeURIComponent · URL.canParse & URL.parse13 min + experiments
    5. 27.5Streams & progressRead responses as they arrive, and show progress.Covers: response.body as a ReadableStream · Download progress · Upload progress · Streams API basics18 min + experiments
    6. 27.6WebSocket & Server-Sent EventsPush data from the server as it happens.Covers: Long polling · WebSocket · Server-Sent Events · Choosing a transport15 min + experiments
    7. 27.7XMLHttpRequestThe older request API you'll still meet in legacy code.Covers: The XHR lifecycle · readyState & events · When XHR is still useful14 min + experiments
  5. 28

    Storing data in the browser

    Keep data between visits.4 available4 lessons
    1. 28.1CookiesSmall values sent with every request.Covers: document.cookie · Expires & Max-Age · SameSite · Secure & HttpOnly · The Cookie Store API14 min + experiments
    2. 28.2localStorage & sessionStorageSimple key-value storage in the browser.Covers: setItem & getItem · Storing JSON · The storage event · Limits & when not to use it14 min + experiments
    3. 28.3IndexedDBA real database in the browser.Covers: Databases & object stores · Transactions · Indexes & cursors · Versioning · Promise wrappers14 min + experiments
    4. 28.4Cache API & file storageStore responses and files for offline use.Covers: The Cache API · Storage quotas & persistence · The Origin Private File System15 min + experiments
  6. 29

    Browser APIs

    Observers, animation, drawing, files, and devices.5 available5 lessons
    1. 29.1ObserversReact to visibility, DOM, and size changes efficiently.Covers: IntersectionObserver · MutationObserver · ResizeObserver · PerformanceObserver15 min + experiments
    2. 29.2Animation with JavaScriptSmooth animation with requestAnimationFrame and the Web Animations API.Covers: requestAnimationFrame · Timing functions & Bézier curves · CSS vs JavaScript animation · element.animate()13 min + experiments
    3. 29.3Drawing with canvasDraw shapes, images, and animations on a canvas.Covers: The 2D context · Paths & shapes · Images & pixels · An animation loop · OffscreenCanvas14 min + experiments
    4. 29.4Files & BlobsRead, create, and download files.Covers: Blob & File · FileReader · Object URLs · Dropping files onto the page14 min + experiments
    5. 29.5Device & platform APIsClipboard, geolocation, notifications, and media.Covers: Clipboard API · Geolocation · Notifications & permissions · Audio & video14 min + experiments
  7. 30

    Workers, routing & components

    Background threads, offline apps, client-side routing, frames, and Web Components.6 available6 lessons
    1. 30.1Web WorkersRun heavy work off the main thread.Covers: Dedicated workers · postMessage & structured clone · Transferable objects · Module workers15 min + experiments
    2. 30.2Service workers & offline appsIntercept requests and make apps work offline.Covers: Registration & lifecycle · Caching strategies · Offline fallbacks · Push & background sync14 min + experiments
    3. 30.3History & navigationChange the URL without reloading, the way routers do.Covers: location · pushState & popstate · The Navigation API · Hash routing12 min + experiments
    4. 30.4Windows, iframes & postMessageCommunicate across windows safely.Covers: window.open & popups · iframes · postMessage & origin checks · Clickjacking13 min + experiments
    5. 30.5Messaging & structured cloningSend data between windows, workers, and tabs.Covers: structuredClone() · MessageChannel & MessagePort · BroadcastChannel · What can't be cloned · Transferring vs copying16 min + experiments
    6. 30.6Web ComponentsBuild reusable custom elements.Covers: Custom elements & lifecycle · Shadow DOM · Templates & slots · Styling & events across the shadow boundary12 min + experiments
STAGE 8 · ADVANCED

Advanced language features

Iteration protocols, modules, metaprogramming, functional techniques, regular expressions, and binary data.

6 modules · 34 lessons
  1. 31

    Iterators & generators

    The protocol behind for…of, and functions that pause.5 available5 lessons
    1. 31.1The iteration protocolsMake any object work with for…of and spread.Covers: Symbol.iterator · next() & done · Iterables vs iterators · Built-in iterables14 min + experiments
    2. 31.2GeneratorsFunctions that produce values on demand.Covers: function* & yield · Generators as iterators · yield* delegation · return() & throw() · Infinite sequences12 min + experiments
    3. 31.3Iterator helpersLazy map, filter, and take for any iterator.Covers: Iterator.from · map, filter, take & drop · flatMap, some, every & find · toArray, reduce & forEach · Iterator.concat, Iterator.zip & zipKeyed · Proposals: chunks, windows, includes & join · Lazy vs eager15 min + experiments
    4. 31.4Async iteration & async generatorsLoop over data that arrives over time.Covers: The async iterator protocol & Symbol.asyncIterator · for await…of · Async generators: async function* · Paginated APIs & streams · Array.fromAsync14 min + experiments
    5. 31.5Generators for control flowTwo-way communication, coroutines, and how async/await was built.Covers: Sending values with next() · Generators + promises · Cleanup with finally · Coroutines16 min + experiments
  2. 32

    Modules

    Split code into files with import and export.5 available5 lessons
    1. 32.1Why modules?From global scripts and IIFEs to real module systems.Covers: Problems with global scope · IIFE & namespace patterns · CommonJS & AMD · ES modules12 min + experiments
    2. 32.2import & exportNamed and default exports, re-exports, and live bindings.Covers: Named vs default exports · Renaming · Re-exports & barrel files · Live bindings · Module scope & strict mode13 min + experiments
    3. 32.3Dynamic import & top-level awaitLoad code only when you need it.Covers: import() · Code splitting · Top-level await · import.meta & import.meta.resolve · import defer & import source14 min + experiments
    4. 32.4Module resolution & import mapsHow specifiers become files in browsers and bundlers.Covers: Relative vs bare specifiers · Import maps · Module scripts in the browser · JSON modules & import attributes12 min + experiments
    5. 32.5CommonJS & ES module interoprequire vs import, and how Node.js decides.Covers: require & module.exports · type: "module" & .mjs · Interop rules · Dual packages · require(esm)14 min + experiments
  3. 33

    Metaprogramming

    Code that inspects and changes how other code behaves.5 available5 lessons
    1. 33.1ProxyIntercept property reads, writes, and more.Covers: Handlers & traps · All 13 traps & their invariants · Validation proxies · Observable objects · Revocable proxies · Proxy limitations15 min + experiments
    2. 33.2ReflectThe companion API for forwarding operations.Covers: Reflect methods · Forwarding traps · Reflect.ownKeys · Reflect.construct & Reflect.apply · Receivers13 min + experiments
    3. 33.3Well-known symbolsHook into language behavior with built-in symbols.Covers: Symbol.iterator & asyncIterator · Symbol.toPrimitive & toStringTag · Symbol.hasInstance & species · Symbol.isConcatSpreadable & unscopables · Symbol.match, matchAll, replace, search & split · Symbol.dispose & asyncDispose14 min + experiments
    4. 33.4DecoratorsWrap classes, methods, and fields with reusable behavior.Covers: Method & field decorators · The accessor keyword · Decorator metadata · Proposal status & tooling support15 min + experiments
    5. 33.5eval & new FunctionRun code from strings, and why you almost never should.Covers: Direct vs indirect eval · new Function · Security & CSP · Performance cost14 min + experiments
  4. 34

    Functional programming

    Build programs from small, predictable functions.8 available8 lessons
    1. 34.1Higher-order functionsFunctions that take or return other functions.Covers: Functions as arguments · Returning functions · Declarative vs imperative · map, filter & reduce revisited14 min + experiments
    2. 34.2Pure functions & side effectsSame input, same output, no surprises.Covers: Side effects · Referential transparency · Extracting impurity · Testability13 min + experiments
    3. 34.3ImmutabilityUpdate data by copying instead of mutating.Covers: Spread updates · Non-mutating array methods · structuredClone · Object.freeze · Immutable wrappers for collections · Shared mutable state · Structural sharing14 min + experiments
    4. 34.4Currying & partial applicationChange a function's shape so you can reuse it.Covers: Partial application · Currying · sum(1)(2)(3) · Point-free style14 min + experiments
    5. 34.5Composition & pipelinesChain small functions into bigger ones.Covers: compose & pipe · Data-last functions · Composing with reduce · The pipeline operator proposal14 min + experiments
    6. 34.6Memoization & lazinessCache results, and compute only what's needed.Covers: memoize · Cache keys & WeakMap · Lazy evaluation · Lazy sequences with generators16 min + experiments
    7. 34.7Advanced recursionTail calls, trampolines, and recursive data.Covers: Tail calls · Trampolines · Continuation-passing style · Deep clone & deep equal16 min + experiments
    8. 34.8Transducers, functors & monadsAdvanced functional ideas, explained with plain JavaScript.Covers: Transducers & fusion · Functors · Maybe & Either · Observables14 min + experiments
  5. 35

    Regular expressions

    Search and transform text with patterns.6 available6 lessons
    1. 35.1Patterns & flagsCreate regular expressions, and use them to test and search text.Covers: Literals vs new RegExp() · Flags: g, i, m, s, u, v, y & d · test & exec · Match objects & indices · match, matchAll & replace14 min + experiments
    2. 35.2Character classes & setsMatch digits, words, ranges, and Unicode properties.Covers: \d, \w, \s & the dot · Sets & ranges · Unicode properties with \p{…} · The v flag & set operations · Escaping & RegExp.escape14 min + experiments
    3. 35.3Quantifiers: greedy & lazyControl how much a pattern matches.Covers: +, *, ? & {n,m} · Greedy vs lazy · Common traps14 min + experiments
    4. 35.4Groups & backreferencesCapture parts of a match and refer back to them.Covers: Capturing & named groups · Non-capturing groups · Backreferences · Alternation · Duplicate named groups · Match indices14 min + experiments
    5. 35.5Anchors, boundaries & lookaroundMatch positions instead of characters.Covers: ^, $ & multiline mode · Word boundaries · Buffer boundaries: A, z & Z · Lookahead · Lookbehind · Inline modifiers14 min + experiments
    6. 35.6Regex performance & safetyAvoid catastrophic backtracking and ReDoS.Covers: Catastrophic backtracking · ReDoS · The sticky flag & lastIndex · When not to use a regex14 min + experiments
  6. 36

    Binary data & memory

    Bytes, buffers, and how memory is managed.5 available5 lessons
    1. 36.1ArrayBuffer & typed arraysWork with raw bytes efficiently.Covers: ArrayBuffer · The typed array family: Int8Array to Float64Array · BigInt64Array & BigUint64Array · Uint8ClampedArray · DataView & endianness · Float16Array · subarray, set & ArrayBuffer.isView · Resizable & transferable buffers16 min + experiments
    2. 36.2Text encoding & Base64Convert between strings and bytes.Covers: TextEncoder & TextDecoder · UTF-8 · atob & btoa · Uint8Array toBase64 & fromBase64 · Hex encoding16 min + experiments
    3. 36.3Memory management & garbage collectionHow JavaScript frees memory, and how leaks happen.Covers: The memory lifecycle · Reachability · Mark and sweep · Leaks from listeners, timers & closures · Detached DOM nodes14 min + experiments
    4. 36.4WeakRef & FinalizationRegistryHold objects weakly, and react when they're collected.Covers: WeakRef & deref() · FinalizationRegistry · Weak caches · Why cleanup timing isn't guaranteed15 min + experiments
    5. 36.5Explicit resource managementClean up files, locks, and connections with using.Covers: using & await using · Symbol.dispose & Symbol.asyncDispose · DisposableStack & AsyncDisposableStack · SuppressedError18 min + experiments
STAGE 9 · ADVANCED

Professional JavaScript

Tooling, testing, patterns, security, and performance: ship JavaScript that holds up in production.

6 modules · 35 lessons
  1. 37

    Tooling & the ecosystem

    The tools between your code and your users.5 available5 lessons
    1. 37.1npm & package.jsonInstall, version, and script your dependencies.Covers: package.json · dependencies vs devDependencies · Semver ranges · Lockfiles · npm scripts & npx · pnpm & Yarn16 min + experiments
    2. 37.2Bundlers & build toolsTurn many modules into fast-loading files.Covers: Why bundle · Vite · esbuild & Rollup · webpack concepts · Tree shaking · Source maps16 min + experiments
    3. 37.3Transpilers & polyfillsUse modern features while supporting older browsers.Covers: Babel & SWC · browserslist & Baseline · Polyfills & core-js · Feature detection18 min + experiments
    4. 37.4Types for JavaScript: JSDoc & TypeScriptCatch type errors before your users do.Covers: JSDoc annotations · checkJs · TypeScript at a glance · Declaration files16 min + experiments
    5. 37.5Beyond the browser: Node.js, Deno & BunRun JavaScript on servers, in tools, and at the edge.Covers: What Node.js adds to JavaScript · Files & processes · Deno & Bun · Edge runtimes · Common web-interoperable APIs16 min + experiments
  2. 38

    Testing & debugging

    Prove your code works, and find out fast when it doesn't.5 available5 lessons
    1. 38.1Unit testingWrite tests that describe what your code should do.Covers: node:test, Vitest & Jest · Assertions · Arrange, act, assert · Test-driven development18 min + experiments
    2. 38.2Mocks, spies & fakesIsolate code from time, the network, and randomness.Covers: Spies & stubs · Mocking modules · Fake timers · Dependency injection for tests16 min + experiments
    3. 38.3Testing async codeTest promises, timers, and events reliably.Covers: Awaiting in tests · Fake timers with promises · Testing rejections · Fixing flaky tests16 min + experiments
    4. 38.4Testing the DOM & end to endTest what users see and do.Covers: DOM testing with jsdom · Testing Library · End-to-end tests with Playwright · Accessibility checks16 min + experiments
    5. 38.5Advanced debuggingConditional breakpoints, logpoints, and async stack traces.Covers: Conditional breakpoints & logpoints · Async stack traces · Debugging with source maps · Debugging Node.js18 min + experiments
  3. 39

    Design patterns & architecture

    Proven shapes for organizing JavaScript code.6 available6 lessons
    1. 39.1Creational patternsFactory, singleton, builder, and module patterns.Covers: Factory functions · Singleton · Builder · Module & revealing module · Cloning: clone() vs copy constructors16 min + experiments
    2. 39.2Observer & pub/subLet parts of an app react to each other without tight coupling.Covers: Observer · Publish/subscribe · Event emitters · Signals & observables18 min + experiments
    3. 39.3Structural & behavioral patternsDecorator, proxy, adapter, strategy, and command.Covers: Decorator & proxy · Adapter & facade · Strategy · Command & undo/redo · Middleware16 min + experiments
    4. 39.4State managementKeep app state predictable as it grows.Covers: A single source of truth · Reducers & actions · Immutable updates · State machines16 min + experiments
    5. 39.5Structuring an applicationMVC, components, and separating concerns.Covers: MVC & MVVM · Component-based architecture · Dependency injection · Clean code & SOLID16 min + experiments
    6. 39.6Designing good APIsFunctions and modules that are easy to use correctly.Covers: Options objects · Consistent naming & conventions · Method chaining & fluent APIs · Avoiding boolean traps · Arrays vs array-likes as inputs · Deprecating APIs gracefully17 min + experiments
  4. 40

    Build it from scratch

    Rebuild language features and classic utilities to prove you understand them.7 available7 lessons
    1. 40.1Polyfill array methodsWrite map, filter, reduce, and flat yourself.Covers: map, filter & reduce · flat · Holes & thisArg · Matching the spec18 min + experiments
    2. 40.2Polyfill call, apply & bindRecreate the function methods that control this.Covers: call & apply · bind with partial arguments · bind with new16 min + experiments
    3. 40.3Build a promise from scratchImplement then, chaining, and the combinators.Covers: States & handlers · then chaining · Microtask scheduling · Promise.all & race · Promises/A+18 min + experiments
    4. 40.4Classic utilitiesDeep clone, deep equal, curry, and more, built step by step.Covers: Deep clone & deep equal · curry & compose · memoize & once · Flattening objects18 min + experiments
    5. 40.5Build an event emitterImplement on, off, once, and emit.Covers: Subscriptions · once & off · Error events · Observables & unsubscribe18 min + experiments
    6. 40.6Build a jQuery-style libraryPackage a small, safe, chainable library the way classic frameworks did.Covers: Structuring safe code with an IIFE · Prototypes for shared methods · Chainable methods · Plugins & extension points · Learning from library source code16 min + experiments
    7. 40.7Build a tiny reactive UICombine closures, proxies, and the DOM into a mini framework.Covers: Reactive state with Proxy · Templating & rendering · Diffing the DOM · Event delegation20 min + experiments
  5. 41

    Security

    Write JavaScript that attackers can't turn against your users.6 available6 lessons
    1. 41.1XSS & safe DOM updatesKeep untrusted data from running as code.Covers: innerHTML vs textContent · Sanitizing HTML · Trusted Types · Content Security Policy18 min + experiments
    2. 41.2CSRF, cookies & tokensProtect sessions and requests.Covers: CSRF & SameSite cookies · Storing tokens safely · CORS is not access control · OAuth basics18 min + experiments
    3. 41.3Prototype pollutionHow merging untrusted objects can change every object.Covers: How pollution happens · Unsafe deep merges · Object.create(null) & Map · Freezing prototypes17 min + experiments
    4. 41.4Supply-chain securityTrust, but verify, the code you install.Covers: npm audit & lockfiles · Subresource Integrity · Typosquatting · Fewer, better dependencies20 min + experiments
    5. 41.5Isolation & sandboxingRun untrusted code and content safely.Covers: The iframe sandbox · postMessage origin checks · Cross-origin isolation · The ShadowRealm proposal16 min + experiments
    6. 41.6The Web Crypto APIRandom values, hashing, and encryption done right.Covers: crypto.getRandomValues & randomUUID · Hashing with SubtleCrypto.digest · Encryption & signing · Keys & key formats18 min + experiments
  6. 42

    Performance

    Measure first, then make it fast.6 available6 lessons
    1. 42.1Measuring performanceProfile real bottlenecks before you optimize.Covers: The Performance API & marks · The DevTools Performance panel · Flame charts · Real user monitoring · Benchmarking pitfalls18 min + experiments
    2. 42.2Keeping the main thread responsiveBreak up long tasks so the page never freezes.Covers: Long tasks & INP · scheduler.yield · requestIdleCallback · Chunking work · Moving work to workers16 min + experiments
    3. 42.3Debounce & throttleLimit how often expensive handlers run.Covers: Debounce · Throttle · Leading & trailing calls · Throttling with requestAnimationFrame16 min + experiments
    4. 42.4DOM & rendering performanceAvoid layout thrashing and unnecessary work.Covers: The rendering pipeline · Layout thrashing · Batching reads & writes · Virtualizing long lists17 min + experiments
    5. 42.5Loading performanceShip less JavaScript, and load it smarter.Covers: The cost of JavaScript · Code splitting & lazy loading · async & defer · Caching & code caching · Core Web Vitals17 min + experiments
    6. 42.6Finding memory leaksUse heap snapshots to find what's holding memory.Covers: The Memory panel · Taking & comparing heap snapshots · Detached DOM nodes · A leak-hunting workflow16 min + experiments
STAGE 10 · EXPERT

Inside the engine

How engines like V8, SpiderMonkey, and JavaScriptCore parse, compile, optimize, lay out, and garbage-collect your code.

8 modules · 54 lessons
  1. 43

    Engine architecture

    The pieces of a JavaScript engine, and the path from source text to running code.7 available7 lessons
    1. 43.1Meet the enginesV8, SpiderMonkey, JavaScriptCore, and the smaller engines, and the pipeline they share.Covers: V8, SpiderMonkey & JavaScriptCore · Hermes, QuickJS & embedded engines · Parser, interpreter, JIT compilers & GC · Engine vs host vs embedder · Exploring engines with d8, jsvu & eshost18 min + experiments
    2. 43.2Scanning source textHow raw characters become tokens before parsing begins.Covers: Byte streams & decoding source text · UTF-16 code units & surrogate pairs · The scanner & tokens · Identifiers, keywords & escapes · Why / is ambiguous: regex or division · Scanner performance18 min + experiments
    3. 43.3Parsing & abstract syntax treesHow the parser checks grammar and builds a tree the engine can work with.Covers: Recursive-descent parsing · Abstract syntax trees (ESTree) · Early errors · Cover grammars & reparsing arrow parameters · Exploring ASTs16 min + experiments
    4. 43.4Lazy parsing & preparsingWhy engines skip most function bodies at first, and what that costs later.Covers: Full vs lazy parsing · The preparser · Skipping inner functions · Possibly-invoked function expressions (PIFE) · Reparsing costs · Explicit compile hints14 min + experiments
    5. 43.5Scope analysis & variable allocationHow engines decide, before running, where each variable lives.Covers: Resolving variables at parse time · Stack-allocated vs context-allocated variables · How closures change allocation · Why eval & with defeat optimization · Context objects & context chains14 min + experiments
    6. 43.6Bytecode & interpretersThe compact instruction set engines run first, and the interpreter that runs it.Covers: Why bytecode · Ignition: a register machine with an accumulator · Reading bytecode with --print-bytecode · Bytecode handlers & dispatch · Bytecode flushing & lazy feedback allocation · SpiderMonkey's Baseline Interpreter & JSC's LLInt18 min + experiments
    7. 43.7Startup: snapshots & code cachingHow engines avoid redoing work every time a page or process starts.Covers: Startup snapshots · Lazy deserialization · Code caching · Streaming & background compilation · Writing cache-friendly code18 min + experiments
  2. 44

    JIT compilation & optimization

    How engines watch your code run, then compile the hot parts to fast machine code.8 available8 lessons
    1. 44.1Tiered compilationWhy engines start slow and simple, then recompile hot code with more effort.Covers: Interpreters vs compilers · Just-in-time compilation · V8's tiers: Ignition, Sparkplug, Maglev & TurboFan · SpiderMonkey & JavaScriptCore tiers · Hotness counters & tier-up18 min + experiments
    2. 44.2Type feedback & feedback vectorsHow engines record the types your code actually sees.Covers: Collecting types at runtime · Feedback vectors & slots · Feedback for calls, properties & operators · Why the first runs are slow · Warm-up16 min + experiments
    3. 44.3Inline cachesHow engines turn property lookups into a single memory load.Covers: Caching lookups at each call site · Monomorphic, polymorphic & megamorphic · The megamorphic stub cache · Call-site & keyed ICs · CacheIR in SpiderMonkey16 min + experiments
    4. 44.4Baseline compilersFast, simple compilers that remove interpreter overhead.Covers: Sparkplug: compiling bytecode directly · Baseline JIT in SpiderMonkey & JavaScriptCore · Interpreter-compatible frames · Compile speed vs code quality17 min + experiments
    5. 44.5Optimizing compilersThe compilers that produce the fastest code, and how they are built.Covers: Maglev: a fast SSA compiler · TurboFan & Turboshaft · Sea of Nodes vs control-flow graphs · WarpMonkey: CacheIR to MIR & trial inlining · JavaScriptCore's DFG, FTL & B3 · Concurrent compilation17 min + experiments
    6. 44.6Speculation & deoptimizationOptimizing for the types seen so far, and bailing out when they change.Covers: Speculative optimization · The feedback lattice · Type guards, checks & watchpoints · Eager vs lazy deoptimization · Deopt loops · Tracing deopts with --trace-deopt16 min + experiments
    7. 44.7What optimizing compilers doThe classic transformations that make hot JavaScript fast.Covers: Function inlining · Escape analysis & scalar replacement · Constant folding & dead-code elimination · Loop-invariant code motion · Bounds-check elimination · Representation selection: Smi, double & word18 min + experiments
    8. 44.8On-stack replacementSwitching a long-running loop to optimized code without waiting for the next call.Covers: Hot loops in cold functions · OSR entry points · Deoptimizing mid-function · Why loop benchmarks mislead17 min + experiments
  3. 45

    Values & objects inside the engine

    How engines lay out numbers, strings, objects, arrays, and functions in memory.12 available12 lessons
    1. 45.1Tagged values, Smis & heap numbersHow a single machine word can hold any JavaScript value.Covers: Pointer tagging · Small integers (Smis) · HeapNumbers & boxing · NaN-boxing in SpiderMonkey & JavaScriptCore · Mutable heap numbers · Why integers can be faster than doubles17 min + experiments
    2. 45.2Booleans inside the engineWhere true and false live, and how engines turn any value into a branch.Covers: Oddballs: true & false in read-only space · Stack slots, registers & heap pointers · ToBoolean inside V8 · JumpIfToBooleanFalse & test bytecodes · Bit representation in optimized code · Boolean wrapper objects on the heap17 min + experiments
    3. 45.3undefined inside the engineThe undefined oddball, the hole, and how engines produce undefined so cheaply.Covers: The undefined oddball · The hole vs undefined · TDZ checks in bytecode · Holey arrays & the no-elements protector · Missing properties & missing arguments · LdaUndefined, void 0 & the global undefined17 min + experiments
    4. 45.4null inside the engineWhy typeof null is "object", and how engines use null to end every prototype chain.Covers: The null oddball · typeof null: a 1995 type tag · Undetectable maps & == null · document.all · Null prototypes & dictionary-mode objects · Lookups that end at null17 min + experiments
    5. 45.5Strings inside the engineWhy concatenation is cheap, and how a tiny slice can keep a huge string alive.Covers: One-byte vs two-byte strings · Cons strings (ropes) & flattening · Sliced strings & retained memory · Thin & external strings · Internalized strings & the string table · String building strategies17 min + experiments
    6. 45.6BigInt inside the engineHow engines store integers of any size as digit arrays, and what each operation costs.Covers: BigInt layout: sign, length & 64-bit digits · Why every BigInt lives on the heap · Schoolbook, Karatsuba, Toom-Cook & FFT multiplication · Converting BigInts to and from strings · BigInt64 fast paths & BigInt64Array · Maximum BigInt size17 min + experiments
    7. 45.7Symbols inside the engineWhat a symbol object holds, where the registry lives, and how private fields reuse symbols.Covers: Symbol objects: hash, description & flags · The global symbol registry · Well-known symbols in read-only space · Interesting symbols & lookup shortcuts · Private names & private brands · Symbols as property keys & WeakMap keys17 min + experiments
    8. 45.8Hidden classes & object shapesHow engines give dynamic objects a fixed, fast layout.Covers: Maps, shapes & structures · Transition chains & trees · Descriptor arrays · In-object, fast & slow properties · Slack tracking · Dictionary (slow) mode · Shape deprecation & migration · What delete & freeze do to a shape18 min + experiments
    9. 45.9Fast arrays & elements kindsHow engines store arrays, and what makes them slow.Covers: Packed vs holey · Smi, double & generic elements · Elements-kind transitions · Dictionary elements & sparse arrays · Backing-store growth · Array-likes18 min + experiments
    10. 45.10Functions & closures inside the engineWhat a function object really is, and what a closure actually retains.Covers: SharedFunctionInfo vs JSFunction · Context objects for closed-over variables · What a closure keeps alive · Feedback cells · Bound & arrow functions internally17 min + experiments
    11. 45.11Prototypes inside the engineHow engines keep lookups up the prototype chain fast.Covers: Prototype maps · Validity cells · Shape teleporting in SpiderMonkey · Why changing a prototype is slow · Caching inherited property lookups17 min + experiments
    12. 45.12The heap & pointer compressionHow the engine's heap is organized, and how V8 halves pointer size.Covers: Heap spaces: new, old, code & large-object · Pages & bump allocation · Pointer compression & the 4 GB cage · The V8 sandbox · Heap size limits17 min + experiments
  4. 46

    The call stack in depth

    What a stack frame really holds, how calls, returns, and exceptions work, and how stack traces are built.7 available7 lessons
    1. 46.1Stack frames & calling conventionsWhat happens in memory when one function calls another.Covers: The machine stack vs the JavaScript stack · What a frame holds: return address, arguments, locals & context · Interpreter frames vs optimized frames · Mismatched argument counts · Inlined frames17 min + experiments
    2. 46.2Stack limits & stack overflowWhy deep recursion crashes, and how to measure and avoid it.Covers: Maximum call stack size · RangeError: Maximum call stack size exceeded · InternalError: too much recursion · Measuring stack depth · Converting recursion to iteration17 min + experiments
    3. 46.3Tail callsThe ES2015 feature only one engine ships, and the workarounds everyone else uses.Covers: What a tail call is · Proper tail calls in ES2015 · Why most engines don't ship them · Trampolines · Syntactic tail calls17 min + experiments
    4. 46.4Stack traces & the stack trace APIHow error.stack is built, and how to customize it.Covers: How error.stack is captured · Error.captureStackTrace & Error.stackTraceLimit · Error.prepareStackTrace & CallSite objects · Source-mapped stack traces · The Error stack accessor proposal17 min + experiments
    5. 46.5Async stack tracesHow engines reconstruct call stacks that cross await and callbacks.Covers: Why async stacks break · Zero-cost async stack traces · Async call stacks in DevTools · Long stack traces in Node.js · await vs then for debuggability16 min + experiments
    6. 46.6Suspending frames: generators & async functionsHow a function can pause mid-body and resume later.Covers: Saving a generator's frame on the heap · Resuming with next() · How await suspends & resumes · Generator objects & their state · State machines in transpiled code17 min + experiments
    7. 46.7Exceptions & unwindingWhat throw really does to the stack, and what try/catch costs.Covers: Handler tables · Stack unwinding · finally & completion values · The cost of try/catch today · Exceptions across async boundaries17 min + experiments
  5. 47

    Garbage collection in depth

    The algorithms that free memory automatically, and the trade-offs behind them.8 available8 lessons
    1. 47.1Why garbage collection?Roots, reachability, and what a collector must balance.Covers: Manual vs automatic memory management · Roots & reachability · The object graph · Throughput, latency & memory trade-offs · Stop-the-world pauses17 min + experiments
    2. 47.2Reference counting & cyclesThe simple approach, and why cycles broke it.Covers: How reference counting works · Cycles that never free · Old Internet Explorer DOM leaks · QuickJS: reference counting with cycle collection · Why most engines trace instead16 min + experiments
    3. 47.3Mark-sweep & mark-compactFind live objects, free the rest, and defragment the heap.Covers: Marking from roots · Sweeping & free lists · Fragmentation · Compaction & moving objects · Updating pointers after a move16 min + experiments
    4. 47.4Generational collection & the ScavengerWhy most objects die young, and how engines exploit it.Covers: The generational hypothesis · Young & old generations · Semi-space copying (Cheney's algorithm) · Promotion, tenuring & pretenuring · Parallel mark-evacuate · Minor vs major collections18 min + experiments
    5. 47.5Write barriers & remembered setsHow the collector tracks pointers it would otherwise miss.Covers: Old-to-new pointers · Remembered sets & store buffers · Card marking · The cost of barriers in JIT code18 min + experiments
    6. 47.6Incremental, concurrent & parallel GCCollecting garbage without freezing the page.Covers: Tri-color marking · Incremental marking · Concurrent marking & the bailout worklist · Marking worklists & work stealing · Safepoints · Parallel scavenging & compaction · Idle-time GC & Orinoco18 min + experiments
    7. 47.7Weak references & ephemeronsHow the collector handles WeakMap, WeakRef, and finalizers.Covers: Weak vs strong edges · Ephemerons: how WeakMap really works · WeakRef & FinalizationRegistry timing · Keeping objects alive across a job18 min + experiments
    8. 47.8Garbage collection across engines & the DOMHow real collectors differ, and how they trace through C++ DOM objects.Covers: V8's Orinoco & Oilpan · SpiderMonkey: incremental, compacting & partitioned heaps · JavaScriptCore's Riptide & conservative stack scanning · Hermes's Hades · Tracing between JavaScript & C++ wrappers22 min + experiments
  6. 48

    Memory in practice

    Measure, profile, and fix memory problems in large apps and servers.4 available4 lessons
    1. 48.1Heap snapshots in depthRead a snapshot like the engine does.Covers: Shallow vs retained size · Retainers & retaining paths · Dominator trees · Distance from GC roots · Summary, comparison & containment views · Internal objects: system, Context & closures · Duplicated strings & console-retained objects21 min + experiments
    2. 48.2Allocation profilingFind who allocates, and how much garbage they create.Covers: Allocation timelines · Allocation sampling · Churn & GC pressure · Measuring memory with measureUserAgentSpecificMemory18 min + experiments
    3. 48.3Memory in large appsKeep single-page apps from growing forever.Covers: Leaks across route changes · Bounded caches: LRU & WeakRef · Memory budgets · Detecting leaks in CI18 min + experiments
    4. 48.4Memory in Node.jsHeap limits, external memory, and out-of-memory crashes on the server.Covers: --max-old-space-size & heap limits · process.memoryUsage() · Heap snapshots in Node.js · Buffers & external memory · Diagnosing out-of-memory crashes18 min + experiments
  7. 49

    Asynchrony inside the engine

    How promises, await, and the microtask queue are implemented.4 available4 lessons
    1. 49.1How promises work insideReaction lists, jobs, and why some resolutions take extra ticks.Covers: Promise states & reaction records · PromiseReactionJob · Resolving with a thenable: PromiseResolveThenableJob · Why resolve(promise) costs extra ticks · Unhandled rejection tracking18 min + experiments
    2. 49.2await under the hoodThe await algorithm, and how engines made it cheaper.Covers: The await algorithm · How V8 removed extra ticks · Async functions as resumable frames · Awaiting non-promises & thenables18 min + experiments
    3. 49.3The microtask queueWhere promise jobs wait, and when hosts run them.Covers: Job queues in the spec · HostEnqueuePromiseJob · When hosts perform a microtask checkpoint · Microtask starvation · queueMicrotask vs promise jobs17 min + experiments
    4. 49.4How async code is compiled downWhat transpilers turn generators and async functions into.Covers: Generators as state machines · Regenerator & async-to-generator · Coroutines · The cost of down-leveled async18 min + experiments
  8. 50

    Performance at the engine level

    Write code that stays on the fast path, and prove it with engine tools.4 available4 lessons
    1. 50.1Writing engine-friendly codePractical habits that keep code on the fast path.Covers: Stable object shapes · Initializing every field in the constructor · Avoiding delete & holes · Monomorphic call sites · Avoiding arguments & eval in hot paths18 min + experiments
    2. 50.2Looking inside the engineEngine flags and tools that show what the JIT is doing.Covers: d8 & jsvu · --trace-opt & --trace-deopt · --allow-natives-syntax & %functions · Indicium & Deopt Explorer · Printing bytecode & optimized code18 min + experiments
    3. 50.3CPU profiling in depthHow profilers sample the stack, and how to read what they report.Covers: Sampling vs instrumenting profilers · Flame charts & bottom-up views · --prof & Linux perf · Inlined & optimized frames in profiles · Runtime call stats18 min + experiments
    4. 50.4Benchmarking without fooling yourselfWhy microbenchmarks lie, and how to measure honestly.Covers: Warm-up & JIT tiers · Dead-code elimination in benchmarks · Statistical rigor · Benchmark suites: Speedometer & JetStream18 min + experiments
STAGE 11 · EXPERT

The runtime & the platform

How browsers and Node.js host the engine: event loops, rendering, module loading, threads, embedding, and security.

5 modules · 31 lessons
  1. 51

    The event loop in depth

    The real processing model behind tasks, microtasks, and rendering.7 available7 lessons
    1. 51.1The HTML event loop processing modelThe exact steps browsers follow, straight from the HTML spec.Covers: Event loops, agents & windows · Task queues & task sources · Choosing the next task · Performing a microtask checkpoint · Update the rendering · Window vs worker event loops · Spinning & pausing: alert() & sync XHR · Host hooks: HostEnqueuePromiseJob & friends18 min + experiments
    2. 51.2Rendering & the event loopWhere frames fit between tasks, and why requestAnimationFrame is special.Covers: Rendering opportunities & frame rate · requestAnimationFrame timing · Style, layout & paint steps · Where resize, scroll & observers run in a frame · Batching work into one frame · Rendering in background tabs18 min + experiments
    3. 51.3Events, microtasks & orderingWhy the same click behaves differently from a user and from script.Covers: User vs script-dispatched events · Microtasks between listeners · The click-and-promise puzzle · Event loop ordering puzzles18 min + experiments
    4. 51.4Timers in depthClamping, throttling, and the guarantees timers really give.Covers: Nesting levels & the 4 ms clamp · Background-tab throttling · Intensive throttling & budgets · Timer ordering guarantees · setTimeout vs MessageChannel18 min + experiments
    5. 51.5Scheduling workRun work at the right priority without hurting responsiveness.Covers: requestIdleCallback & idle periods · scheduler.postTask priorities · scheduler.yield · isInputPending · Long Animation Frames18 min + experiments
    6. 51.6The Node.js event looplibuv's phases, process.nextTick, and setImmediate.Covers: Phases: timers, pending, poll, check & close · The process.nextTick queue · setImmediate vs setTimeout · Microtasks between callbacks · Event loop utilization18 min + experiments
    7. 51.7libuv & the thread poolHow Node.js does non-blocking I/O, and what still blocks.Covers: Handles & requests · Non-blocking I/O with epoll, kqueue & IOCP · The thread pool & UV_THREADPOOL_SIZE · Which APIs use the pool · Don't block the event loop: ReDoS & JSON DoS · Partitioning & offloading work18 min + experiments
  2. 52

    How browsers run JavaScript

    Processes, threads, and the pipeline from HTML bytes to running scripts and pixels.8 available8 lessons
    1. 52.1Browser architectureThe processes and threads behind every tab.Covers: Browser, renderer, GPU & network processes · Site isolation · The renderer's main thread · Compositor & raster threads · Why one slow script freezes a tab18 min + experiments
    2. 52.2What happens when you navigateFrom typing a URL to a committed page, step by step.Covers: Input handling in the browser process · The network request & response · Finding a renderer process · Committing the navigation · Service workers & navigation preload18 min + experiments
    3. 52.3From HTML to running scriptHow the parser finds, fetches, and runs your scripts.Covers: The HTML tokenizer & tree builder · Parser-blocking scripts · The preload scanner · async, defer & module scripts · document.write · Script execution order18 min + experiments
    4. 52.4The rendering pipelineHow style, layout, paint, and compositing turn the DOM into pixels.Covers: Style, layout, paint & composite · Forced synchronous layout · Layers & compositing · What triggers reflow & repaint · Off-main-thread animation18 min + experiments
    5. 52.5How input reaches your event handlersWhy scrolling stays smooth, and when your listeners make it janky.Covers: Input handled on the compositor thread · Non-fast scrollable regions · Passive listeners & cancelable events · Hit testing & finding the target · Coalesced & predicted pointer events18 min + experiments
    6. 52.6Bindings: how DOM objects exist in JavaScriptHow C++ browser objects appear as JavaScript objects.Covers: WebIDL · Type conversions: DOMString, USVString & sequences · Wrapper objects & the C++ DOM · Interface objects & prototypes · Legacy platform objects & live collections · DOMException · document.all & [[IsHTMLDDA]]18 min + experiments
    7. 52.7Realms, globals & WindowProxyWhy every iframe has its own Array, and what window really is.Covers: One realm per global · Window vs WindowProxy · Entry, incumbent, current & relevant realms · Cross-realm objects & instanceof · Same-origin access between frames · Serializable & transferable objects18 min + experiments
    8. 52.8The browser security modelHow browsers keep scripts from different sites apart.Covers: The same-origin policy · Process-per-site & site isolation · Spectre & timer precision · COOP, COEP & cross-origin isolation · The V8 sandbox & JIT hardening18 min + experiments
  3. 53

    Modules under the hood

    How module graphs are loaded, linked, and evaluated.6 available6 lessons
    1. 53.1Load, link, evaluateThe three phases every module graph goes through.Covers: Source Text Module Records · Loading the module graph · Linking & live bindings · Evaluation order: depth-first, post-order · Module namespace objects18 min + experiments
    2. 53.2Circular dependenciesWhat happens when modules import each other.Covers: Cycles in ES modules · TDZ errors across modules · Cycles in CommonJS: partial exports · Breaking cycles18 min + experiments
    3. 53.3Top-level await & async evaluationHow an awaiting module pauses the graph around it.Covers: Async module evaluation · Which modules wait · Blocking the graph · When to avoid top-level await18 min + experiments
    4. 53.4Module loading in browsersThe module map, fetching, and preloading.Covers: The module map · Fetching & MIME types · Import maps in depth · modulepreload · Module workers & worklets18 min + experiments
    5. 53.5Module loading in Node.jsThe CommonJS wrapper, the resolver, and loader hooks.Covers: The CommonJS module wrapper & require.cache · Node's resolution algorithm · Package exports & conditions · Module customization hooks · How require(esm) works18 min + experiments
    6. 53.6Modules through a bundlerHow bundlers rebuild the module system at build time.Covers: Building the module graph · Scope hoisting · How tree shaking decides · Chunk graphs & the runtime · Hot module replacement18 min + experiments
  4. 54

    Threads, agents & realms

    Shared memory, atomics, and truly parallel JavaScript.5 available5 lessons
    1. 54.1Agents, agent clusters & realmsThe spec's model of threads and globals.Covers: What an agent is · Agent clusters & shared memory · Realms & intrinsics · ShadowRealm · Cross-realm pitfalls18 min + experiments
    2. 54.2How workers workWhat it really costs to start a worker and send it data.Covers: An isolate & event loop per worker · Worker startup cost · Structured clone costs · Transferables & ownership · Shared workers & worklets18 min + experiments
    3. 54.3SharedArrayBuffer & AtomicsShare memory between workers safely.Covers: SharedArrayBuffer · Atomics operations: load, store, add & compareExchange · wait, notify & waitAsync · Cross-origin isolation22 min + experiments
    4. 54.4The memory modelData races, ordering, and what the spec guarantees.Covers: Data races · Sequential consistency · Atomics.pause & spin locks · Lock-free structures18 min + experiments
    5. 54.5Parallel patterns with workersWorker pools, message protocols, and moving data fast.Covers: Worker pools · RPC over postMessage · Transferables · WebAssembly threads18 min + experiments
  5. 55

    Engines & runtimes beyond the browser

    Isolates, embedders, and the runtimes built on top of engines.5 available5 lessons
    1. 55.1Embedding V8Isolates, contexts, and handles: how programs host an engine.Covers: Isolates · Contexts · Handles & HandleScopes · Templates & exposing native functions · Snapshots for embedders18 min + experiments
    2. 55.2Node.js architectureHow V8, libuv, and C++ bindings add up to Node.js.Covers: V8 + libuv + bindings · The C++ binding layer · Node-API & native addons · Built-in modules & primordials · Startup snapshots in Node.js18 min + experiments
    3. 55.3Inside Deno, Bun & edge runtimesDifferent engines, languages, and isolation models.Covers: Deno: V8, Rust & Tokio · Bun: JavaScriptCore & Zig · V8 isolates at the edge · WinterTC & common runtime APIs · Cold starts18 min + experiments
    4. 55.4Small & embedded enginesEngines built for phones, microcontrollers, and spec research.Covers: Hermes: ahead-of-time bytecode for React Native · QuickJS · XS & microcontrollers · engine262: a spec interpreter · Memory vs speed trade-offs18 min + experiments
    5. 55.5JavaScript & WebAssemblyWhen to reach for Wasm, and how it talks to JavaScript.Covers: What WebAssembly is · Loading & calling modules · Liftoff & tiered Wasm compilation · Sharing memory · WasmGC · JS Promise Integration18 min + experiments
STAGE 12 · EXPERT

The specification & the language

Understand JavaScript the way engine authors and TC39 do: the spec's model, its legacy, its tooling, and where it's heading.

4 modules · 28 lessons
  1. 56

    Reading the specification

    Understand JavaScript the way engine authors do.How to read ECMAScript · Spec types: Completion, Property Descriptor & more · The Reference type & this · Environment Records: how scope is specified · Execution contexts & jobs in the spec · Function calls: [[Call]] & [[Construct]] · Internal methods & exotic objects · A tour of the abstract operations · Lexical grammar & ASI · Syntax, early errors & static semantics · Evaluation order · test262 & conformance12 lessons
    1. 56.1How to read ECMAScriptAbstract operations, internal slots, and algorithm steps.Covers: How the spec is organized · Abstract operations · Internal slots & methods · The ? and ! shorthands · Syntax-directed operationsCOMING SOON
    2. 56.2Spec types: Completion, Property Descriptor & moreThe records the spec uses to describe every operation.Covers: Completion Records & abrupt completions · Property Descriptors · Lists & Records · Abstract Closures · Data BlocksCOMING SOON
    3. 56.3The Reference type & thisThe spec mechanism behind method calls and losing this.Covers: Reference Records · How obj.method() gets this · Why (obj.method)() still works · GetValue & PutValueCOMING SOON
    4. 56.4Environment Records: how scope is specifiedThe spec's precise model of variables, closures, and this.Covers: Declarative Environment Records · Object & Global Environment Records · Function Environment Records & this binding · Module Environment Records & indirect bindings · PrivateEnvironment Records · The [[OuterEnv]] chainCOMING SOON
    5. 56.5Execution contexts & jobs in the specThe execution context stack, realms, and how jobs are scheduled.Covers: The execution context stack · LexicalEnvironment vs VariableEnvironment · From ES3 variable objects to Environment Records · Realms & ScriptOrModule · Jobs & host hooks · Generator execution contextsCOMING SOON
    6. 56.6Function calls: [[Call]] & [[Construct]]Exactly what happens when a function is called or constructed.Covers: Function objects & their internal slots · OrdinaryCallEvaluateBody · FunctionDeclarationInstantiation: hoisting, precisely · Base vs derived class constructors · Bound function exotic objectsCOMING SOON
    7. 56.7Internal methods & exotic objectsHow ordinary and exotic objects are defined.Covers: The essential internal methods · Ordinary [[Get]], [[Set]] & [[DefineOwnProperty]] · Array & String exotic objects · Arguments exotic objects & mapped arguments · Proxy, TypedArray & module namespace exotics · Immutable prototype exotic objects · Invariants of the essential internal methodsCOMING SOON
    8. 56.8A tour of the abstract operationsThe algorithms behind conversions, comparisons, and iteration.Covers: ToPrimitive & OrdinaryToPrimitive · ToPropertyKey & ToNumeric · IsLooselyEqual & IsLessThan · GetIterator & IteratorStep · SpeciesConstructorCOMING SOON
    9. 56.9Lexical grammar & ASITokens, whitespace, identifiers, and automatic semicolon insertion.Covers: Format-control characters & white space · Line terminators · Identifiers & Unicode escapes · Reserved words & contextual keywords · Literals & numeric separators · ASI rules & hazards · Hashbang comments & trailing commasCOMING SOON
    10. 56.10Syntax, early errors & static semanticsHow the spec's grammar is written, and what it rejects before running.Covers: Grammar notation & parameters: [Yield], [Await] & [In] · Early errors · Cover grammars · Static semantics: BoundNames & VarDeclaredNames · [no LineTerminator here]COMING SOON
    11. 56.11Evaluation orderThe strict left-to-right rules behind every expression.Covers: Left-to-right evaluation · Assignment & compound-assignment order · Arguments & computed property keys · Short-circuiting & optional chains · Puzzles like a[i++] = iCOMING SOON
    12. 56.12test262 & conformanceHow the spec is tested, and how engines prove they follow it.Covers: The test262 suite · Reading a test262 test · Conformance across engines · Reporting engine bugsCOMING SOON
  2. 57

    Legacy JavaScript & web compatibility

    Sloppy mode, Annex B, and the deprecated features the web can't remove.Sloppy mode in depth · The with statement · Annex B: web legacy features · Deprecated & obsolete features · Don't break the web5 lessons
    1. 57.1Sloppy mode in depthWhat non-strict code does differently, and why it matters in old code.Covers: this boxing & the global this · Implicit globals · Mapped arguments & aliasing · arguments.callee & caller · Duplicate parameters · Silent failuresCOMING SOON
    2. 57.2The with statementHow with rewrites scope, and why strict mode bans it.Covers: How with changes lookups · Object Environment Records · Symbol.unscopables · Why it's banned in strict modeCOMING SOON
    3. 57.3Annex B: web legacy featuresThe features browsers must support for old websites.Covers: HTML-like comments · Legacy octal literals & escapes · escape() & unescape() · String.prototype.substr, trimLeft & trimRight · String HTML methods: anchor, bold, link… · __proto__, __defineGetter__ & __lookupGetter__ · RegExp legacy statics & compile() · Block-level & labelled function declarations · var in catch blocks & for-in initializers · Date getYear, setYear & toGMTStringCOMING SOON
    4. 57.4Deprecated & obsolete featuresWhat you'll find in old code, and what replaced it.Covers: Function.prototype.caller & arguments · Legacy regex syntax in Unicode-unaware mode · Legacy generators, comprehensions & StopIteration · for each…in, let blocks & expression closures · Object.observe, watch & __noSuchMethod__ · toSource() & uneval() · Non-standard features: InternalError, displayName & fileNameCOMING SOON
    5. 57.5Don't break the webWhy JavaScript can add features but never remove them.Covers: Web compatibility constraints · SmooshGate: flatten became flat · contains became includes · Symbol.unscopables for new methods · Use counters & deprecationCOMING SOON
  3. 58

    The evolving language

    How new features are made, and what's coming next.The early editions: ES1 to ES5 · How JavaScript evolves · Modern JavaScript: ES2015 to today · On the horizon · How new syntax is downleveled5 lessons
    1. 58.1The early editions: ES1 to ES5How JavaScript was standardized, and the edition that almost broke it.Covers: ES1 to ES3 · The abandoned ES4 · ES5: strict mode, JSON & property descriptors · Harmony & ES2015COMING SOON
    2. 58.2How JavaScript evolvesTC39, the proposal stages, and how features reach browsers.Covers: TC39 & Ecma · Stages 0 to 4 · Stage 2.7 & test262 · Implementations & BaselineCOMING SOON
    3. 58.3Modern JavaScript: ES2015 to todayWhat each yearly release added, feature by feature.Covers: ES2015 foundations · ES2016 to ES2020 · ES2021 to ES2024 · ES2025 & ES2026COMING SOON
    4. 58.4On the horizonProposals worth watching, and how to try them.Covers: Decorators · ShadowRealm · AsyncContext · The pipeline operator · Deferred & source phase imports · Pattern matching · Signals · Type annotations · Structs & shared structsCOMING SOON
    5. 58.5How new syntax is downleveledHow transpilers make tomorrow's syntax run in yesterday's engines.Covers: Transforming classes & private fields · Transforming async functions & generators · Loose vs spec-compliant output · Transforms vs polyfills · What can't be polyfilledCOMING SOON
  4. 59

    Tools that understand JavaScript

    Parse, analyze, and transform JavaScript yourself, the way compilers and linters do.Working with ASTs · Codemods & Babel plugins · How linters & formatters work · Source maps in depth · How minifiers work · Build a tiny JavaScript interpreter6 lessons
    1. 59.1Working with ASTsParse code into a tree, walk it, and change it.Covers: ESTree · Parsers: Acorn, Babel, SWC & Oxc · Visiting & transforming trees · AST ExplorerCOMING SOON
    2. 59.2Codemods & Babel pluginsRewrite code automatically across a whole codebase.Covers: Anatomy of a Babel plugin · jscodeshift codemods · Preserving formatting · Testing transformsCOMING SOON
    3. 59.3How linters & formatters workRules, scope analysis, and pretty-printing.Covers: ESLint rules & scope analysis · Writing a custom lint rule · Prettier's document format · Type-aware lintingCOMING SOON
    4. 59.4Source maps in depthHow minified code maps back to what you wrote.Covers: The source map format · VLQ-encoded mappings · Index maps & debug IDs · Symbolicating production stack tracesCOMING SOON
    5. 59.5How minifiers workShrink code safely without changing what it does.Covers: Whitespace removal & name mangling · Dead-code elimination & constant folding · Terser, esbuild & SWC · Safe vs unsafe transformsCOMING SOON
    6. 59.6Build a tiny JavaScript interpreterWrite a tokenizer, parser, and evaluator to see how engines start.Covers: A tokenizer · A recursive-descent parser · A tree-walking evaluator · Scopes & closures in your interpreter · Where real engines differCOMING SOON
CompleteFrontend Clear concepts. Working examples.