# iterable iterator

[JS](../..)⟩ [iteration](..) ⟩ [iterator]() ⟩ iterable iterator

{% hint style="success" %}
an [](<> "mention") that is itself [iterable](../iterable "mention").  (an <mark style="color:yellow;">**iterator**</mark> can easily be [**iterable**](../iterable) by simply <mark style="color:yellow;">**returning itself**</mark> in its [**"make-iterator" method**](../iterable/make-iterator-method))
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
[](<> "mention")s [only iterate once](iterators-only-iterate-once)❗️
{% endhint %}

{% hint style="success" %}
<mark style="color:yellow;">**iterable iterators**</mark>：

* array.[keys()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys), map.[entries()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/entries), ...
* [str.matchall](../../val/prim/str/method/str.matchall "mention") - iterable iterator of <mark style="color:yellow;">**all matches**</mark>.&#x20;
* [Broken link](broken-reference "mention")s returned by [func](../generator/func "mention").
* [](<> "mention") of <mark style="color:orange;">**all**</mark> [built-in](../../val/builtin) [iterable](../iterable "mention") data types.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [Broken link](broken-reference "mention")s are iterable iterators.
* [make-iterable](make-iterable "mention")
* <mark style="color:yellow;">**examples**</mark>：
  * [words-in-sentence](../../val/prim/str/method/str.matchall/words-in-sentence "mention") - [str.matchall](../../val/prim/str/method/str.matchall "mention") returns an iterable iterator.
  * [list](../generator/examples/list "mention")
  * [integers](../generator/examples/integers "mention")
{% endtab %}

{% tab title="🗺️ 圖解" %}
<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FLDbsdTPR3ENAv8P81akq%2Fiteration-related-types.svg?alt=media&#x26;token=6c6da705-70d0-4fd6-97b8-5663b3d61f2d" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="💈範例" %}
:floppy\_disk: replit：[iterable iterator](https://replit.com/@pegasusroe/iterable-iterator#index.js)

```javascript
let array = [1, 2, 3];                         // Array is iterable

// ⭐️ make an iterator
let iterator = array[Symbol.iterator]();

// first iteration result
let head = iterator.next();                    // { value: 1, done: false }

// ----------------------------
//     ⭐️ iterable iterator
// ----------------------------

// the iterator of a built-in iterable object is itself "iterable", i.e. it can:
// ⭐️ 1. spread itself into array elements or function arguments.
// ⭐️ 2. make an iterator for itself. (in fact, the iterator === itself)

// ⭐️ 1. spread itself into array elements
let tail = [...iterator];                      // [ 2, 3 ] ⭐️ 

// ⭐️ 2. make an iterator for itself
let it = iterator[Symbol.iterator]();

// ⭐️ 2. the iterator of the `iterator` is the `iterator` itself.
it === iterator;        // true❗
```
{% endtab %}

{% tab title="📘 手冊" %}
* [iterator protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterator_protocol)
{% endtab %}
{% endtabs %}
