JavaScript ES6+

Generators

Pausable functions with yield - create iterators easily

Find videos you like?

Save to resource drawer for future reference!

Generators: Pausable Functions

A generator is a special function that can pause execution and resume later. Use function* syntax and yield to return multiple values over time!

Generators = Easy Iterators

Generators automatically implement the iterator protocol - they return an iterator when called!

Creating Generators

function* and yield keyword

❌ Regular Function - Returns Once

// Returns all at once
function getNumbers() {
  return [1, 2, 3, 4, 5];
}

const nums = getNumbers();
console.log(nums); // [1, 2, 3, 4, 5]

// Must create iterator manually
function createIterator() {
  let index = 0;
  const arr = [1, 2, 3, 4, 5];
  
  return {
    next() {
      if (index < arr.length) {
        return { value: arr[index++], done: false };
      }
      return { done: true };
    }
  };
}

✅ Generator - Yields Multiple Times

// function* creates generator
function* getNumbers() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

const nums = getNumbers();
console.log(nums.next()); // { value: 1, done: false }
console.log(nums.next()); // { value: 2, done: false }
console.log(nums.next()); // { value: 3, done: false }

// Works with for...of!
for (const num of getNumbers()) {
  console.log(num); // 1 2 3 4 5
}

Basic Generator Examples

function* and yield in action

javascript

code

DarkEditable

// Simple generator
function* countTo3() {
  yield 1;
  yield 2;
  yield 3;
}

const counter = countTo3();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3
console.log(counter.next().done);  // true

// Generator with loop
function* countdown(n) {
  while (n > 0) {
    yield n;
    n--;
  }
}

for (const num of countdown(5)) {
  console.log(num); // 5 4 3 2 1
}

// Infinite generator
function* infiniteNumbers() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const nums = infiniteNumbers();
console.log(nums.next().value); // 0
console.log(nums.next().value); // 1
console.log(nums.next().value); // 2
// Can keep going forever!

// Generator with return
function* withReturn() {
  yield 1;
  yield 2;
  return 'done';
  yield 3; // Never reached
}

Console Output

Click "Run Code" to see output here...

yield* (Delegation)

Delegate to another generator or iterable

Compose Generators!

function* gen1() {
  yield 1;
  yield 2;
}

function* gen2() {
  yield 3;
  yield 4;
}

// Manually combining
function* combined1() {
  for (const value of gen1()) {
    yield value;
  }
  for (const value of gen2()) {
    yield value;
  }
}

// Using yield* (cleaner!)
function* combined2() {
  yield* gen1();
  yield* gen2();
}

console.log([...combined2()]); // [1, 2, 3, 4]

// Works with any iterable
function* letters() {
  yield* 'ABC'; // String is iterable
  yield* [1, 2, 3]; // Array is iterable
}

console.log([...letters()]); // ['A', 'B', 'C', 1, 2, 3]

yield* Examples

Delegating to other generators

javascript

code

DarkEditable

// Tree traversal with yield*
class TreeNode {
  constructor(value, left = null, right = null) {
    this.value = value;
    this.left = left;
    this.right = right;
  }
  
  *[Symbol.iterator]() {
    yield this.value;
    if (this.left) yield* this.left;
    if (this.right) yield* this.right;
  }
}

const tree = new TreeNode(
  1,
  new TreeNode(2),
  new TreeNode(3)
);

console.log([...tree]); // [1, 2, 3]

// Flatten nested arrays
function* flatten(arr) {
  for (const item of arr) {
    if (Array.isArray(item)) {
      yield* flatten(item); // Recursive delegation
    } else {
      yield item;
    }
  }
}

const nested = [1, [2, [3, 4]], 5];
console.log([...flatten(nested)]); // [1, 2, 3, 4, 5]

// Combining multiple sequences
function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

function* take(n, iterable) {
  let count = 0;
  for (const value of iterable) {
    if (count++ >= n) return;
    yield value;
  }
}

function* sequence() {
  yield* [1, 2, 3];
  yield* take(5, fibonacci());
}

console.log([...sequence()]); // [1, 2, 3, 1, 1, 2, 3, 5]

Console Output

Click "Run Code" to see output here...

Two-Way Communication

Pass values back into generator with next()

Send Values Into Generator!

function* conversation() {
  const name = yield 'What is your name?';
  const age = yield `Hello ${name}! How old are you?`;
  return `${name} is ${age} years old`;
}

const chat = conversation();

console.log(chat.next().value);
// 'What is your name?'

console.log(chat.next('Alice').value);
// 'Hello Alice! How old are you?'

console.log(chat.next(25).value);
// 'Alice is 25 years old'

// Practical example: alternating values
function* alternator() {
  let toggle = true;
  while (true) {
    toggle = yield toggle;
  }
}

const alt = alternator();
console.log(alt.next().value);     // true
console.log(alt.next(false).value); // false
console.log(alt.next(true).value);  // true

Generator Error Handling

throw() and return() methods

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Real-World Example: Pagination

Lazy loading pages of data

javascript

code

DarkEditable

// Paginated data fetching
function* fetchPages(endpoint, pageSize = 10) {
  let page = 1;
  let hasMore = true;
  
  while (hasMore) {
    const response = yield fetch(
      `${endpoint}?page=${page}&size=${pageSize}`
    ).then(r => r.json());
    
    hasMore = response.hasMore;
    page++;
    
    yield* response.items; // Yield each item
  }
}

// Usage with async
async function loadAllUsers() {
  const generator = fetchPages('/api/users');
  
  for await (const user of generator) {
    console.log(user);
    // Process one user at a time
  }
}

// ID generator
function* idGenerator(prefix = 'id') {
  let counter = 0;
  while (true) {
    yield `${prefix}_${counter++}`;
  }
}

const ids = idGenerator('user');
console.log(ids.next().value); // user_0
console.log(ids.next().value); // user_1
console.log(ids.next().value); // user_2

// State machine
function* trafficLight() {
  while (true) {
    yield 'green';
    yield 'yellow';
    yield 'red';
  }
}

const light = trafficLight();
console.log(light.next().value); // green
console.log(light.next().value); // yellow
console.log(light.next().value); // red
console.log(light.next().value); // green (cycles)

// Lazy evaluation pipeline
function* numbers() {
  let i = 0;
  while (true) yield i++;
}

function* map(iterable, fn) {
  for (const value of iterable) {
    yield fn(value);
  }
}

function* filter(iterable, predicate) {
  for (const value of iterable) {
    if (predicate(value)) yield value;
  }
}

function* take(n, iterable) {
  let count = 0;
  for (const value of iterable) {
    if (count++ >= n) return;
    yield value;
  }
}

// Compose pipeline
const result = [
  ...take(5, 
    filter(
      map(numbers(), x => x * 2),
      x => x % 3 === 0
    )
  )
];

console.log(result); // [0, 6, 12, 18, 24]

Console Output

Click "Run Code" to see output here...

Key Takeaways

⏸️

Pausable Functions

Use function* and yield
Execution pauses at each yield

🔄

Auto Iterator

Generators return iterators
Works with for...of, spread, destructuring

↔️

Two-Way

next(value) sends values in
throw() and return() control flow

🎯

yield* Delegation

Delegate to other generators/iterables
Perfect for composition

Pro Tip

Use generators for lazy evaluation, infinite sequences, and when you need to pause/resume execution. Much easier than writing iterators manually!

Previous Topic

Iterators

Creating custom iterators for object iteration.

Next Topic

Proxy & Reflect

Intercepting and customizing object operations.

Ask a Question

Have a question about Generators? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript ES6+

Generators

Pausable functions with yield - create iterators easily

Find videos you like?

Save to resource drawer for future reference!

Generators: Pausable Functions

A generator is a special function that can pause execution and resume later. Use function* syntax and yield to return multiple values over time!

Generators = Easy Iterators

Generators automatically implement the iterator protocol - they return an iterator when called!

Creating Generators

function* and yield keyword

❌ Regular Function - Returns Once

// Returns all at once
function getNumbers() {
  return [1, 2, 3, 4, 5];
}

const nums = getNumbers();
console.log(nums); // [1, 2, 3, 4, 5]

// Must create iterator manually
function createIterator() {
  let index = 0;
  const arr = [1, 2, 3, 4, 5];
  
  return {
    next() {
      if (index < arr.length) {
        return { value: arr[index++], done: false };
      }
      return { done: true };
    }
  };
}

✅ Generator - Yields Multiple Times

// function* creates generator
function* getNumbers() {
  yield 1;
  yield 2;
  yield 3;
  yield 4;
  yield 5;
}

const nums = getNumbers();
console.log(nums.next()); // { value: 1, done: false }
console.log(nums.next()); // { value: 2, done: false }
console.log(nums.next()); // { value: 3, done: false }

// Works with for...of!
for (const num of getNumbers()) {
  console.log(num); // 1 2 3 4 5
}

Basic Generator Examples

function* and yield in action

javascript

code

DarkEditable

// Simple generator
function* countTo3() {
  yield 1;
  yield 2;
  yield 3;
}

const counter = countTo3();
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3
console.log(counter.next().done);  // true

// Generator with loop
function* countdown(n) {
  while (n > 0) {
    yield n;
    n--;
  }
}

for (const num of countdown(5)) {
  console.log(num); // 5 4 3 2 1
}

// Infinite generator
function* infiniteNumbers() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const nums = infiniteNumbers();
console.log(nums.next().value); // 0
console.log(nums.next().value); // 1
console.log(nums.next().value); // 2
// Can keep going forever!

// Generator with return
function* withReturn() {
  yield 1;
  yield 2;
  return 'done';
  yield 3; // Never reached
}

Console Output

Click "Run Code" to see output here...

yield* (Delegation)

Delegate to another generator or iterable

Compose Generators!

function* gen1() {
  yield 1;
  yield 2;
}

function* gen2() {
  yield 3;
  yield 4;
}

// Manually combining
function* combined1() {
  for (const value of gen1()) {
    yield value;
  }
  for (const value of gen2()) {
    yield value;
  }
}

// Using yield* (cleaner!)
function* combined2() {
  yield* gen1();
  yield* gen2();
}

console.log([...combined2()]); // [1, 2, 3, 4]

// Works with any iterable
function* letters() {
  yield* 'ABC'; // String is iterable
  yield* [1, 2, 3]; // Array is iterable
}

console.log([...letters()]); // ['A', 'B', 'C', 1, 2, 3]

yield* Examples

Delegating to other generators

javascript

code

DarkEditable

const tree = new TreeNode(
  1,
  new TreeNode(2),
  new TreeNode(3)
);

console.log([...tree]); // [1, 2, 3]

const nested = [1, [2, [3, 4]], 5];
console.log([...flatten(nested)]); // [1, 2, 3, 4, 5]

// Combining multiple sequences
function* fibonacci() {
  let [prev, curr] = [0, 1];
  while (true) {
    yield curr;
    [prev, curr] = [curr, prev + curr];
  }
}

function* take(n, iterable) {
  let count = 0;
  for (const value of iterable) {
    if (count++ >= n) return;
    yield value;
  }
}

function* sequence() {
  yield* [1, 2, 3];
  yield* take(5, fibonacci());
}

console.log([...sequence()]); // [1, 2, 3, 1, 1, 2, 3, 5]

Console Output

Click "Run Code" to see output here...

Two-Way Communication

Pass values back into generator with next()

Send Values Into Generator!

function* conversation() {
  const name = yield 'What is your name?';
  const age = yield `Hello ${name}! How old are you?`;
  return `${name} is ${age} years old`;
}

const chat = conversation();

console.log(chat.next().value);
// 'What is your name?'

console.log(chat.next('Alice').value);
// 'Hello Alice! How old are you?'

console.log(chat.next(25).value);
// 'Alice is 25 years old'

// Practical example: alternating values
function* alternator() {
  let toggle = true;
  while (true) {
    toggle = yield toggle;
  }
}

const alt = alternator();
console.log(alt.next().value);     // true
console.log(alt.next(false).value); // false
console.log(alt.next(true).value);  // true