Command Palette

Search for a command to run...

Hectal
Phase 14Advanced15 of 16 in JavaScript

Advanced Language

Iterators, generators, Map and Set, weak references, symbols, Proxy and Reflect, tagged templates, memory and garbage collection, and strict mode.

This phase opens up the machinery under the JavaScript you already write. Why does for...of work on arrays, strings and Maps but not on plain objects? How can a function pause in the middle and continue later? What does a Map give you that an object doesn't, and when does the engine free memory you no longer use? Each answer is a protocol or a built-in object you can use yourself.

You'll learn the iteration protocol and generators (lazy, even endless, sequences), the keyed collections Map, Set, WeakMap, WeakSet and WeakRef, symbols and the well-known symbols that let your objects hook into the language, Proxy and Reflect (the idea behind reactive frameworks), and tagged templates (how libraries build safe HTML and SQL).

The phase ends with what senior engineers get asked about: how garbage collection decides what to free, the four classic memory leaks in browser code and how to find them in DevTools, and what strict mode changes. It builds on closures (Phase 3), prototypes and classes (Phase 7), the event loop (Phase 10) and modules (Phase 12).

0/9 · 0%
9 topics ~3 h 31 code blocks & diagrams
Start with the first topic
1
14.1

Iterators and the Iteration Protocol

An iterable is any object with a Symbol.iterator method that returns an iterator: an object whose next() hands out { value, done } results one at a time. for...of, spread, destructuring and Array.from all speak this protocol, so you can make your own objects work with them.

21 min 4 code practice

2
14.2

Generators

A generator function (function*) can pause at each yield and resume later; calling it returns a generator object that is both an iterator and an iterable, which makes lazy and even endless sequences a few lines of code.

27 min 4 code practice

3
14.3

Map and Set

Map is a key-value collection whose keys can be any value (objects included) and which remembers insertion order; Set is a collection of unique values. Both are iterable, have a real size, and are built for frequent adding, looking up and removing.

26 min 3 code practice

4
14.4

WeakMap, WeakSet and WeakRef

WeakMap and WeakSet hold objects without keeping them alive: when nothing else uses a key object, the garbage collector may remove it and its entry. WeakRef points at an object without keeping it alive. They exist for private data, caches and tagging objects you don't own.

22 min 4 code practice

5
14.5

Symbols and Well-Known Symbols

A symbol is a unique, primitive value used as a property key that can never clash with another key; the language's own well-known symbols, such as Symbol.iterator and Symbol.toPrimitive, are hooks that let your objects change how built-in operations treat them.

19 min 3 code practice

6
14.6

Proxy and Reflect

A Proxy wraps an object and lets you intercept basic operations on it (reading, writing, deleting, in, calling) with handler functions called traps; Reflect offers the default version of each operation, so a trap can add behaviour and then do the normal thing.

22 min 3 code practice

7
14.7

Tagged Templates and String.raw

Putting a function name right before a template literal, as in tagHi ${name}, calls that function with the literal's fixed text parts and its values separately, so it can escape, format or reshape them before building the result; String.raw is the built-in tag that keeps backslashes as written.

21 min 3 code practice

8
14.8

Memory and Garbage Collection

JavaScript frees memory automatically: the garbage collector keeps every object that can be reached from the roots (globals, the running functions, live closures and the DOM) and reclaims the rest. A memory leak is an object you no longer need that is still reachable, most often through a forgotten listener, timer, closure, cache or detached DOM node.

24 min 4 code practice

9
14.9

Strict Mode and Language Quirks

Strict mode, switched on by "use strict" and automatically on in modules and classes, turns silent mistakes into errors, removes a few confusing features and makes this safer; the rest of JavaScript's odd legacy behaviours stay in the language forever, so you learn to recognise and avoid them.

22 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Make a playlist iterable

The playlist object holds its songs in a songs array. Make the object itself iterable, so [...playlist] and for (const song of playlist) give the songs in order.

Intermediate
2

A lazy range() generator

Write a generator function range(start, end, step = 1) that yields start, start + step, ... up to but not including end. Assume step is positive.

Intermediate
3

Word counts with a Map

Write countWords(text) that returns a Map from each word (lower-case, without punctuation) to how many times it appears, in the order words first appear.

Intermediate
4

Settings guarded by a Proxy

Write createSettings() that returns a Proxy around { volume: 50, theme: "light" } with these rules for writes:

Advanced
5

A reactive task list that cleans up after itself

Build a small task app. Keep the tasks in state.tasks, where state comes from a reactive(obj, onChange) helper you write with a Proxy: every property write calls onChange, which re-renders the list.

Advanced