# make iterables

[JS](../..)⟩ [iteration](..) ⟩ [iterable]() ⟩ make iterables

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}
we can make [class](../../val/class "mention")/[obj](../../val/obj "mention") [iterable]() by letting them：

* make [iterator](../iterator "mention") <mark style="color:yellow;">**object**</mark> directly ( 👉 see： [closedrange](custom/closedrange "mention"))
* return new [iterator](../iterator "mention") using [func](../generator/func "mention") ( 👉 see：�[�例一](#fan-li) )
{% endhint %}
{% endtab %}

{% tab title="📗 參考" %}
* [ ] 2ality ⟩ [iterable iterator](https://2ality.com/2021/08/iteration-helpers.html#iterators-that-are-also-iterable)
{% endtab %}
{% endtabs %}

## examples

{% tabs %}
{% tab title="💈例一" %}
{% hint style="success" %}
use [func](../generator/func "mention") to return new [iterator](../iterator "mention").
{% endhint %}

:floppy\_disk: replit：[make class iterable](https://replit.com/@pegasusroe/generate-iterables#index.js)

```javascript
// an iterable (that can make iterators)
class ValueContainer {

    // private properties
    #values;

    // init
    constructor(...values) {
        this.#values = values;
    }

    // ⭐ "make iterator" method
    // ⭐ use generator function to return new iterator
    *[Symbol.iterator]() {
        for (const value of this.#values) {
            yield value;
        }
    }

}

// main
let container = new ValueContainer(1,2,3);
[...container];        // [ 1, 2, 3 ]
```
{% endtab %}

{% tab title="👥 相關" %}
* [private](../../val/class/member/private "mention")
{% endtab %}
{% endtabs %}
