> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# JavaScript Generator Method
A generator method is a function defined within an object literal or a class that returns a `Generator` object. Denoted by an asterisk (`*`) preceding the method name, it allows the method to pause and resume its execution context using the `yield` keyword. Generator methods inherently conform to both the iterable and iterator protocols.
## Syntax Contexts
The asterisk (`*`) precedes the method name. JavaScript allows whitespace between the asterisk and the method identifier (e.g., `* generatorMethod() { ... }` is perfectly valid syntax). Generator methods can be declared in object literals, as class instance methods, and as class static methods.
**Object Literals:**
```javascript theme={"dark"}
const iterableObject = {
* generatorMethod() { // Whitespace between asterisk and name is permitted
yield 1;
yield 2;
}
};
```
**Classes (Instance and Static):**
```javascript theme={"dark"}
class Collection {
// Instance generator method
*traverse() {
yield 'node1';
yield 'node2';
}
// Static generator method
static *generateDefaults() {
yield 'defaultA';
yield 'defaultB';
}
}
```
**Computed Property Names:**
Generator methods fully support ES6 computed property names. The asterisk precedes the bracket notation.
```javascript theme={"dark"}
const dynamicName = 'customIterator';
const obj = {
*[dynamicName]() {
yield 'dynamic';
}
};
```
## Execution Mechanics
1. **Initialization:** Invoking a generator method does not execute its body. Instead, it returns a suspended `Generator` instance.
2. **The `next()` Method:** Execution begins only when the `next()` method is called on the returned generator object. The method runs until it encounters a `yield` expression, which pauses the execution state.
3. **IteratorResult Object:** The `next()` method returns an `IteratorResult` object to the caller containing two properties:
* `value`: The evaluated expression following the `yield` keyword.
* `done`: A boolean indicating whether the generator has completed execution.
4. **Two-Way Communication:** The `next()` method can accept an optional argument. Inside the generator, the paused `yield` expression evaluates to the argument passed to the *subsequent* `next()` call that resumes execution. This allows the caller to inject values back into the generator's internal scope.
```javascript theme={"dark"}
const interactive = {
*dialogue() {
// The first next() call starts execution and yields 'Hello'
const firstReply = yield 'Hello';
// The second next('Hi!') resumes execution, assigning 'Hi!' to firstReply
const secondReply = yield `You said: ${firstReply}`;
// The third next('Bye') resumes execution, assigning 'Bye' to secondReply
return `Finished with: ${secondReply}`;
}
};
const gen = interactive.dialogue();
console.log(gen.next()); // { value: 'Hello', done: false }
console.log(gen.next('Hi!')); // { value: 'You said: Hi!', done: false }
console.log(gen.next('Bye')); // { value: 'Finished with: Bye', done: true }
```
## Delegation via `yield*`
Generator methods can delegate iteration control to another iterable object (such as an Array, Map, or another Generator) using the `yield*` expression.
```javascript theme={"dark"}
class Tree {
*branch() {
yield 'leaf1';
yield 'leaf2';
}
*trunk() {
yield 'root';
yield* this.branch(); // Delegates to the branch generator method
yield 'canopy';
}
}
const myTree = new Tree();
const iterator = myTree.trunk();
console.log(iterator.next().value); // 'root'
console.log(iterator.next().value); // 'leaf1'
console.log(iterator.next().value); // 'leaf2'
console.log(iterator.next().value); // 'canopy'
```
## `this` Binding
Like standard methods, the `this` context inside a generator method refers to the object or class instance upon which the method was called. Arrow functions cannot be used as generator methods, so lexical `this` binding via arrow syntax is not applicable to the generator declaration itself.
```javascript theme={"dark"}
const counter = {
base: 10,
*countUp() {
yield this.base + 1;
yield this.base + 2;
}
};
const gen = counter.countUp();
console.log(gen.next().value); // 11
```
Tired of Poor JavaScript Skills? Fix That With Deep Grasping!
Learn More
