# iterable

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

{% hint style="success" %}
[⭐️ ES6 (2015)](/web/js/feature/es6.md)   

an object that <mark style="color:yellow;">**can**</mark> [**make iterators**](/web/js/iteration/iterable/make-iterator-method.md). (like [Sequence](https://developer.apple.com/documentation/swift/sequence) in Swift, must implement <mark style="color:blue;">.makeIterator()</mark> method)

```javascript
for (const value of iterable) { ... }    // for-of
[...iterable]                 // spread into array elements
f(...iterable)                // spread into function arguments
const [a, b, c] = iterable;   // destructuring iterable
Array.from(iterable)          // iterable -> array
```

{% endhint %}

{% tabs %}
{% tab title="🧨" %}
{% hint style="warning" %}
(by default) [object](/web/js/val/obj.md) <mark style="color:yellow;">**is**</mark>**&#x20;**<mark style="color:red;">**not**</mark> <mark style="color:purple;">**iterable**</mark>:exclamation:

```javascript
let obj = { x: 1, y: 2, z: 3 };
for (let value of obj) { }                   // ⛔ TypeError

// ⭐️ workarounds
for (let key of Object.keys(obj) { ... }
for (let key in obj) { ... }                 // for-in
for (let value of Object.values(obj) { ... }
for (let [key, value] of Object.entries(obj) { ... }
```

:point\_right: [for-in vs. for-of vs. in](/web/js/grammar/statement/loop/for/for-in-vs.-for-of-vs.-in.md)
{% endhint %}

{% hint style="warning" %}
[arrays are iterated "live"❗️](/web/js/grammar/statement/loop/for/of/live-array.md)
{% endhint %}
{% endtab %}

{% tab title="⭐️" %}
{% hint style="success" %} <mark style="color:yellow;">**use cases：**</mark>

```javascript
for (const item of iterable) { ... } // ⭐️ for-of loop
[...iterable]                        // ⭐️ spread into array elements
f(...iterable)                       // ⭐️ spread into function arguments
let [a, b, c] = iterable             // ⭐️ iterable destructuring

// ⭐️ functios that accept iterables:
Array.from(iterable/array-like)
Promise.all(iterable)
```

{% endhint %}

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

* [Array](/web/js/val/builtin/arr.md), [String](/web/js/val/prim/str.md), [Set](/web/js/val/builtin/set.md), [Map](/web/js/val/builtin/map.md), [TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray),&#x20;
* [Broken mention](broken://pages/wdsR1aBto2o3YMiF3HsH) objects returned by [generator function](/web/js/iteration/generator/func.md)s.
* [iterable examples](/web/js/iteration/iterable/custom.md)
* [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), [arguments](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments) object, ...
* 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()](/web/js/val/prim/str/method/str.matchall.md)
  {% endhint %}

{% hint style="danger" %}
must implement the [make-iterator method](/web/js/iteration/iterable/make-iterator-method.md) named \[[Symbol.iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator)].
{% endhint %}

{% hint style="danger" %}
some <mark style="color:yellow;">**iterables**</mark> [only iterate once](/web/js/iteration/iterable/only-iterate-once.md)❗️
{% endhint %}

{% hint style="info" %}
an <mark style="color:purple;">**iterable**</mark> can be <mark style="color:yellow;">**infinite**</mark>. ( 👉 see： [\*integers()](/web/js/iteration/generator/examples/integers.md))
{% endhint %}
{% endtab %}

{% tab title="🔴" %}

* <mark style="color:yellow;">**comforming to Iterable**</mark>
  * [make-iterator method](/web/js/iteration/iterable/make-iterator-method.md) - method named `[Symbol.iterator]`.
  * [Iterable+ext](/web/js/iteration/iterable+ext.md) (extension) - extends iterables with custom methods.
  * [obj.isIterable](/web/js/iteration/iterable+ext/isiterable.md) - check if an object is iterable.
* <mark style="color:yellow;">**iterable types**</mark>
  * [String](/web/js/val/prim/str.md) <mark style="color:yellow;">**/**</mark> [Array](/web/js/val/builtin/arr.md) <mark style="color:yellow;">**/**</mark> [Set](/web/js/val/builtin/set.md) <mark style="color:yellow;">**/**</mark> [Map](/web/js/val/builtin/map.md)
* :floppy\_disk: <mark style="color:yellow;">**use cases**</mark>
  * `for (const value of`` `<mark style="color:purple;">`iterable`</mark>`)` - [for-of](/web/js/grammar/statement/loop/for/of.md) loop.
  * `[...`<mark style="color:purple;">`iterable`</mark>`]` - [spread](/web/js/grammar/op/spread.md) into array elements.
  * `f(...`<mark style="color:purple;">`iterable`</mark>`)` - [spread](/web/js/grammar/op/spread.md) into function arguments.
  * `const [a, b, c] =`` `<mark style="color:purple;">`iterable`</mark>`;` - iterable [destructuring](/web/js/grammar/op/assign/destruct.md).
  * `Array.from(`<mark style="color:purple;">`iterable`</mark>`)` - convert to array.
* <mark style="color:yellow;">**special iterable**</mark>
  * [only-iterate-once iterable](/web/js/iteration/iterable/only-iterate-once.md)
* <mark style="color:yellow;">**defining iterables**</mark>
  * [make iterables](/web/js/iteration/iterable/make-iterables.md)
  * [make iterator iterable](/web/js/iteration/iterator/make-iterable.md)
  * [using class (with private properties)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#defining_an_iterable_with_a_class)
* :sparkles: [<mark style="color:yellow;">**examples**</mark>](/web/js/iteration/iterable/custom.md)：
  * [range()](/web/js/iteration/iterable+ext/range.md) - half-open range of numbers.
  * [\*integers()](/web/js/iteration/generator/examples/integers.md) - generate <mark style="color:yellow;">**infinite**</mark> iterable.
  * [ClosedRange](/web/js/iteration/iterable/custom/closedrange.md) - closed range of integers.
  * [\*integers()](/web/js/iteration/generator/examples/integers.md)
    {% endtab %}

{% tab title="👥" %}

* [for loops](/web/js/grammar/statement/loop/for.md)
* [Array](/web/js/val/builtin/arr.md)
* [array-like](/web/js/val/builtin/arr/array-like.md)s and [iterable](/web/js/iteration/iterable.md)s are <mark style="color:yellow;">**different**</mark> things.
* &#x20;[destructuring assignment](/web/js/grammar/op/assign/destruct.md) can be used with <mark style="color:yellow;">**iterables**</mark>.&#x20;
  {% endtab %}

{% tab title="🗺️" %} <img src="/files/wJwFqzHQLyJDeKPLxv02" alt="" class="gitbook-drawing">
{% endtab %}

{% tab title="💈" %}

* <mark style="color:yellow;">**defining iterable**</mark> (using [generator function](/web/js/iteration/generator/func.md))

```javascript
const iterable = {
    // ⭐️ "make-iterator" method
    *[Symbol.iterator]() {
        yield 1; yield 2; yield 3;
    },
};
```

<mark style="color:yellow;">**more examples ...**</mark>

* [\*integers()](/web/js/iteration/generator/examples/integers.md) - generate non-negative integers.
* [Sequence](/web/js/iteration/iterable/custom/sequence.md) - sequence of numbers.
  {% endtab %}

{% tab title="📗" %}

* [ ] ExploringJS ⟩ [21. Iterables and Iterators](https://exploringjs.com/es6/ch_iteration.html) ⭐️
* [ ] JS.info ⟩ [iterables](https://javascript.info/iterable)
* [ ] [JavaScript: The Definitive Guide](/web/master/ref/javascript-the-definitive-guide.md) ⟩ Ch. 12
* [ ] 2ality ⟩ [JavaScript needs more helper functions for iteration (map, filter, etc.)](https://2ality.com/2021/08/iteration-helpers.html)
  {% endtab %}

{% tab title="📘" %}

* [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
* [Array.from()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) - convert **iterable** / [array-like](/web/js/val/builtin/arr/array-like.md) to **array**.
* [iterable protocol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterable_protocol) ( = Sequence protocol in Swift )
* [Symbol.iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) ( = makeIterator in Swift )
* [Built-in APIs accepting iterables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#built-in_apis_accepting_iterables)
* [Syntaxes expecting iterables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#syntaxes_expecting_iterables)
  {% endtab %}

{% tab title="🗣" %}

* [What is the technical definition of a Javascript iterable and how do you test for it?](https://stackoverflow.com/a/41559281/5409815)
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/js/iteration/iterable.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.