IconVault logoIconVault
Sign in

JS Iterators & Generators - Interactive Lab | IconVault

Step through yield line by line, stream async generators, and build ES2025 Iterator helper pipelines live in your browser.

All tools

JS Iterators & Generators

Step through yield, async generators and ES2025 helpers

5 of 5 free uses left
1function* countUp() {
2  yield 1;            // step 1
3  yield 2;            // step 2
4  const name = yield 3; // step 3 - send a value back in
5  return `done:${name ?? "nobody"}`;
6}

Before step 3 runs, type a value and press Step: it is delivered into the generator as the result of yield 3.

Execution log

Press Start, then Step through each yield. Watch the highlighted line move and the returned objects appear here.
function* countUp() {
  yield 1;
  yield 2;
  const name = yield 3; // value sent via next(value)
  return `done:${name ?? "nobody"}`;
}

const gen = countUp();
gen.next();        // { value: 1, done: false }
gen.next();        // { value: 2, done: false }
gen.next("sameer"); // { value: 3, done: false } - name is received
gen.next();        // { value: "done:sameer", done: true }

5 of 5 free guided runs left. Everything runs in your browser, nothing is uploaded.

About this tool

IconVault's JS Iterators & Generators lab turns one of JavaScript's most misunderstood features into something you can watch happen. Start a generator and step through each yield one at a time: the current line highlights, the returned { value, done } object appears in the execution log, and you can even send a value back into the paused generator with next(value) to see two-way communication in action. It is free and runs fully in your browser, with copyable code for everything you try.

Two more playgrounds cover the rest of the story. The async generator demo streams values with real timed delays so you can see how for await...of pulls results instead of waiting for all of them. The ES2025 Iterator helpers builder lets you chain map, filter, take and drop on Iterator.from(), previewing the array after every step and generating the exact pipeline code to paste into your project. Native support is feature-detected, with an honest fallback note on older browsers.

Frequently asked questions

Popular searches

javascript iteratorsjs generators tutorialjavascript generator yield explainedhow to use yield in javascriptasync generators javascriptjavascript iterator protocoles2025 iterator helpersiterator.from javascriptjavascript map filter takegenerator next value donejavascript for of custom objectsymbol.iterator examplejavascript lazy evaluationgenerator vs iterator javascriptasync iterator javascript examplejavascript yield keyword tutorialhow generators work javascriptiterator helpers browser supportjavascript infinite generatorgenerator function explainedjs iterator map filtertake drop javascript iteratorjavascript generator send value nextcoroutine javascript generatorasync generator for await ofjavascript iterable vs iteratorcustom iterable javascriptjavascript generator return valueyield star javascriptdelegation yield*javascript iterator helpers mdnes2025 features javascriptjavascript lazy sequencesgenerator based state machine jsjavascript pagination generatorhow to iterate custom object jsjavascript iterator protocol explainedsymbol.asynciterator examplejavascript generator memoryinfinite sequence javascript generatorjs generator tutorial beginnersjavascript yield expressionnext() parameter javascript generatorjavascript async generator tutorialiterator helper methods listjavascript from iterable to iteratorgenerator throw method javascriptjavascript generator done truelazy map filter javascriptjavascript range generatorjs interview iterators generatorsjavascript generator two way communicationiterator take limit javascriptjavascript dropwhile takewhile

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →