> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/iteration/generator/func.md).

# generator function

[JS](/web/js.md) ⟩ [iteration](/web/js/iteration.md) ⟩ generator function

{% hint style="success" %}
defined by <mark style="color:blue;">**function\***</mark> keyword and returns a [Generator](/web/js/iteration/generator.md) object.
{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* <mark style="color:yellow;">**syntax**</mark>
  * [function\*](/web/js/iteration/generator/func/func-star.md)
  * [yield](/web/js/iteration/generator/func/yield.md)
  * [yield\*](/web/js/iteration/generator/func/yield-star-expr.md)
* <mark style="color:yellow;">**use cases**</mark>
  * [generator function as ...](/web/js/iteration/generator/func/as.md) (variable, method)
  * as [make-iterator method](/web/js/iteration/iterable/make-iterator-method.md) of an [iterable](/web/js/iteration/iterable.md).
* <mark style="color:yellow;">**examples**</mark>
  * [\*list()](/web/js/iteration/generator/examples/list.md) - sequence of numbers
  * [\*closedRange()](/web/js/iteration/generator/examples/closedrange.md)
  * [\*integers()](/web/js/iteration/generator/examples/integers.md)
  * [\*fibonacci()](/web/js/iteration/generator/examples/fibonacci.md)
* <mark style="color:yellow;">**composition of generator functions**</mark>
  * [\*zip()](/web/js/iteration/generator/examples/zip.md)
  * [\*sequence()](/web/js/iteration/generator/examples/seq.md)
  * [\*interleave()](/web/js/iteration/generator/examples/interleave.md)
    {% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %} <mark style="color:blue;">yield</mark> and [yield\*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*) [operator](/web/js/grammar/op.md) can <mark style="color:red;">**only**</mark> be used <mark style="color:yellow;">**within**</mark> [generator function](/web/js/iteration/generator/func.md)s❗️
{% endhint %}

* replit：[yield must be in generator functions](https://replit.com/@pegasusroe/yield-must-in-generator-function#index.js)

```javascript
// this seems like a generator function, but there's a catch ...
function* sequence(...iterables) {

    // --------------------------------------------------------------
    // ⭐ `yield/yield*` only available within generator functions❗
    // --------------------------------------------------------------
    
    // ❌ but this `yield*` is within an "arrow function"❗
    //
    //                 ╭─── 🔸 arrow function ───╮
    iterables.forEach( iterable => yield* iterable );
    //                             ^^^^^^
    // ⛔ ReferenceError: yield is not defined 
    
}
```

{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="danger" %} <mark style="color:blue;">yield</mark> and [yield\*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield*) [operator](/web/js/grammar/op.md) can <mark style="color:red;">**only**</mark> be used <mark style="color:yellow;">**within**</mark> [generator function](/web/js/iteration/generator/func.md)s❗️
{% endhint %}

{% hint style="success" %}
we can use **generator functions** to make [iterable](/web/js/iteration/iterable.md)s.
{% endhint %}

{% hint style="info" %} <mark style="color:blue;">**yield\***</mark> <mark style="color:yellow;">**keyword**</mark> iterates an [iterable](/web/js/iteration/iterable.md) and yields each of the resulting values.
{% endhint %}

{% hint style="danger" %}
there is <mark style="color:red;">**no way**</mark> to write a <mark style="color:purple;">**generator function**</mark> using [arrow function](/web/js/val/func/arrow.md) syntax.
{% endhint %}
{% endtab %}

{% tab title="💈範例" %}
:floppy\_disk: replit：[generator functions & objects](https://replit.com/@pegasusroe/generator-functions-and-objects#generatorFunctions.js)

```javascript
// ⭐️ generator function
function* abc() {
  yield 'a';
  yield 'b';
  yield 'c';
}

// main
let str = '';

// ⭐️ for-of loop  ╭───╮ ----> ⭐️ generator object
for (const char of abc()) {
  str += char;
}                  // str = 'abc'
```

{% endtab %}

{% tab title="👥 相關" %}

* objects **returned** by **generator functions** are [iterable iterator](/web/js/iteration/iterator/iterable.md)s.
*

{% endtab %}

{% tab title="📘 手冊" %}

* [function\*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) (declaration) ⭐️
  {% endtab %}
  {% endtabs %}