Modern JavaScript

The six that arrived later

ES modules, the iteration protocol, generators, proxies, optional chaining and structuredClone: six additions you meet in every codebase and no syllabus teaches. Each is drilled on short programs you predict before running, then on the notation, and the project ends with a module of your own that needs all six.

Start this project See the modules

Modules: 6
Drills: 8
Build steps: 5
Time: ~5h

Walk out able to

Read a generator-backed, proxied module and say what it prints — then write `records.js`, a lazy reader whose callers cannot reach your own state.

Six features, one module that uses them.

What you work on

Modules, and what ran

Live bindings, one evaluation, the order a graph woke up in.

Iterators and generators

What for-of calls, and producers that pause where they are.

Proxies

Name the trap an operation fires, then write one that holds.

Ragged data, copied

Reach into a shape nobody promised you, then copy it whole.

What you get

Skills that stick

Every project mixes short lessons, focused drills and real build steps, so you finish with working code and the judgement behind it.

You will practise

Live bindings and module evaluation order
The iteration protocol, and generators
Proxy traps and what they may not do
Optional chains and structured clones

Afterwards you can

Say what an importer sees after a reassignment
Count what is left in a half-used iterator
Name the trap an operation fires
Copy an object without losing its Map

Modules

Step by step

Each module builds on the last. Read a short lesson, drill it until it's second nature, then put it to work.

1
Files that import each other
~48 min
Say what an importer sees, how often a body ran, and in what order a graph evaluated.
- LessonWhat this project is about6 min
- LessonWhat an import actually gives you8 min
- LessonA module body runs once5 min
- LessonWhy the first line is not first7 min
- DrillPredict what the import sees11 min
- DrillOrder a module graph11 min
2
The protocol under for-of
~48 min
Name what the loop calls, count what a half-used cursor has left, make a type iterable.
- LessonWhat for...of actually calls11 min
- LessonStopping early closes it6 min
- DrillCount what is left in the cursor11 min
- Build stepMake your own type iterable20 min
3
Functions that stop midway
~52 min
Trace a generator across its resumptions, and pull from a source that never ends.
- LessonA function that stops in the middle7 min
- LessonA loop with no exit that ends6 min
- LessonDelegate to another generator6 min
- DrillTrace what a generator yields11 min
- Build stepBuild a pipeline that pulls22 min
4
Standing in front of an object
~45 min
Name the trap an operation fires, and write one that guards a record without breaking it.
- LessonIntercept the operation, not the value7 min
- LessonWhere a proxy stops pretending7 min
- DrillName the trap that fired11 min
- Build stepGuard a record with a proxy20 min
5
Data you did not shape
~49 min
Reach into a shape nobody promised you, and copy it without losing half of it.
- LessonReach into what might not be there7 min
- LessonDefault only what is really missing7 min
- DrillPredict where the chain stops11 min
- LessonCopy it without a JSON round trip7 min
- LessonWhat a clone still loses6 min
- DrillDecide what survives the clone11 min
6
Ship it as a module
~1h
Get the notation into your hand, then build a reader a caller cannot reach past.
- DrillWrite the six from memory12 min
- Build stepBuild the record reader26 min
- Build stepHarden it and prove it holds24 min