REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Generator Functions

AI & DATA SCIENCE // generators

Generators are functions that can pause and resume with yield. They return an iterator — call .next() to advance.

Syntax

function* count() {
  yield 1;
  yield 2;
  yield 3;
}
const gen = count();
console.log(gen.next()); // { value: 1, done: false }

Deep Dive Course

**Generator functions** (`function*`) produce iterators. Each **yield** pauses execution and returns a value. `next()` resumes from the last yield. They're lazy — values are computed on demand. Generators power **async/await** under the hood, are used for infinite sequences, and implement custom iterators.

1Understanding Generator Functions

Generator functions (function*) produce iterators. Each yield pauses execution and returns a value. next() resumes from the last yield. They're lazy — values are computed on demand. Generators power async/await under the hood, are used for infinite sequences, and implement custom iterators.

💡

Generators are iterators — you can use them in for...of loops and with the spread operator.

editor.html

// Infinite ID generator
function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
// Never exhausts!

localhost:3000

2Practical Example

Here is a real-world application of Generator Functions showing how it is used in production JavaScript code.

editor.html

// Use generator in for...of
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fibs = [];
for (const n of fibonacci()) {
  if (n > 100) break;
  fibs.push(n);
}
console.log(fibs);

localhost:3000

3Best Practices

Follow these guidelines when working with Generator Functions:

1. Use generators for lazy/infinite sequences

2. Use yield* to delegate to another generator/iterable

3. Return from a generator triggers done: true

⚠️

Tip: Generators are iterators — you can use them in for...of loops and with the spread operator.

editor.html

// Infinite ID generator
function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
// Never exhausts!

localhost:3000

Examples

Example 01Basic Usage

// Infinite ID generator
function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
// Never exhausts!

Example 02Advanced Example

// Use generator in for...of
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fibs = [];
for (const n of fibonacci()) {
  if (n > 100) break;
  fibs.push(n);
}
console.log(fibs);

Best Practices

Use generators for lazy/infinite sequences
Use yield* to delegate to another generator/iterable
Return from a generator triggers done: true

Interview Question

How do generators relate to async/await?▼

Hint: async/await is sugar over generators and Promises.

async/await is syntactic sugar built on generators and Promises. An async function can be thought of as a generator that yields Promises. The JS runtime (similar to a 'runner' function) takes each yielded Promise, awaits it, and sends the resolved value back with .next(value). Understanding generators helps understand why async/await works the way it does.

Exercises

MediumPractice using Generator Functions in a real scenario.

View Solution

// Infinite ID generator
function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
// Never exhausts!

Frequently Asked Questions

How do generators relate to async/await?▼

Related Functions

PromisesawaitClosuresScope-Context