function* in JS

JavaScriptMiddle~2 min read

1. What `function*` does

function* creates a generator function, which, when called, does not run immediately, but returns a generator object (an iterator).

This object lets you control the function's execution manually - via calls to .next(), .throw(), .return().

2. Syntax

javascript

function* functionName(parameters) {
  yield value1;
  yield value2;
  // ...
}

The asterisk (*) after the word function turns the function into a generator.
The yield keyword is used inside it to pause execution and return an intermediate value.

3. Example - a simple generator

javascript

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

const iterator = gen(); // ← the function does not run immediately

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

The first call to gen() returns an iterator, not a result.
Each .next() runs execution up to the next yield.
After the last yield, the function finishes.

4. How `yield` works

yield is a "pause" inside a generator function. It:

returns a value to the outside (value);
pauses execution of the function;
waits for the next .next() call to continue.

javascript

function* greet() {
  console.log('Start');
  yield 'Hi';
  console.log('Continue');
  yield 'How are you?';
}

const it = greet();
console.log(it.next().value); // "Hi"
console.log(it.next().value); // "How are you?"
console.log(it.next());       // done: true

Between yield calls, execution genuinely stops, which is impossible with regular functions.

5. Generators = iterators

The object returned by function* implements the iterator protocol:

javascript

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

for (const n of gen()) {
  console.log(n);
}

Output:

javascript

1
2

6. Async generators (ES2018)

If you add async, you can use await inside the generator:

javascript

async function* fetchChunks() {
  yield await Promise.resolve('Chunk 1');
  yield await Promise.resolve('Chunk 2');
}

for await (const chunk of fetchChunks()) {
  console.log(chunk);
}

Async generators return an async iterator, and are iterated over with for await...of.

7. Key differences from regular functions

Trait	`function`	`function*`
Returns	a result (`value`)	an iterator (generator object)
Can pause execution	No	Yes, via `yield`
Runs immediately	Yes	No, only on `.next()`
Used for	regular operations	lazy computation, iterators, streams
Can receive values back	No	Yes, via `next(value)`

8. Example of passing a value back into a generator

javascript

function* conversation() {
  const name = yield 'What is your name?';
  yield `Hi, ${name}!`;
}

const chat = conversation();

console.log(chat.next().value);      // "What is your name?"
console.log(chat.next('Tim').value); // "Hi, Tim!"

The first next() starts the generator. The second passes 'Tim' back - that value ends up in const name.

SUMMARY

Property	Description
`function*`	Declares a generator function
What it returns	An iterator (an object with `.next()`, `.throw()`, `.return()` methods)
Keyword inside	`yield`
Trait	You can run and pause code "step by step"
Async variant	`async function*`
Main use	Iterators, lazy computation, data streams, complex async processes

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.