> 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/iterable/make-iterator-method.md).

# make-iterator method

[JS](/web/js.md)⟩ [iteration](/web/js/iteration.md) ⟩ [iterable](/web/js/iteration/iterable.md) ⟩ make-iterator method

{% hint style="success" %}
an [iterable](/web/js/iteration/iterable.md) must implement a <mark style="color:yellow;">**special method**</mark> named <mark style="color:purple;">`[Symbol.iterator]`</mark>, which returns an [iterator](/web/js/iteration/iterator.md).&#x20;

```javascript
class A {
    // ⭐️ "make-iterator" method
    // make an iterator by using generator function.
    *[Symbol.iterator]() { yield 1; yield 2; }
}
```

{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="success" %}
we can implement the <mark style="color:yellow;">**make-iterator method**</mark> by：

* returning [iterator](/web/js/iteration/iterator.md) <mark style="color:yellow;">**object**</mark> directly ( 👉 see： [ClosedRange](/web/js/iteration/iterable/custom/closedrange.md))
* using [generator function](/web/js/iteration/generator/func.md).
  {% endhint %}

{% hint style="info" %}
similar to [.makeIterator()](https://developer.apple.com/documentation/swift/sequence/makeiterator\(\)-4v0ms) method of  [**Sequence**](https://developer.apple.com/documentation/swift/sequence) protocol in Swift
{% endhint %}

{% hint style="info" %}
By default, using <mark style="color:blue;">**array\[Symbol.iterator]**</mark> will return the [`values()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/values) function.
{% endhint %}

{% hint style="danger" %}
do <mark style="color:red;">**NOT**</mark> use <mark style="color:red;">**@@iterator**</mark> as the method name, it's just a "[specification](https://stackoverflow.com/q/29492333/1048572)" thing❗️
{% endhint %}
{% endtab %}

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

* <mark style="color:purple;">`[Symbol.iterator]`</mark> is a [computed property name](/web/js/val/obj/prop/name/computed.md).
  {% endtab %}

{% tab title="✨ 範例" %}

* [Sequence](/web/js/iteration/iterable/custom/sequence.md) - sequence of numbers.
* [ClosedRange](/web/js/iteration/iterable/custom/closedrange.md)
  {% endtab %}

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

* [Symbol.iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) ( = makeIterator in Swift )
* Swift ⟩ Sequence ⟩ [.makeIterator()](https://developer.apple.com/documentation/swift/sequence/makeiterator\(\)-4v0ms)
* [Array.prototype.values()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/values) - by default, <mark style="color:blue;">arr\[Symbol.iterator]\() === arr.values()</mark>
* built-in types with a <mark style="color:purple;">**`@@iterator`**</mark> method:
  * [`Array.prototype[@@iterator]()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)
  * [`TypedArray.prototype[@@iterator]()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/@@iterator)
  * [`String.prototype[@@iterator]()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator)
  * [`Map.prototype[@@iterator]()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/@@iterator)
  * [`Set.prototype[@@iterator]()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator)
    {% endtab %}

{% tab title="🗣 討論" %}

* [ES 6: Difference between Symbol.iterator and @@iterator](https://stackoverflow.com/a/29672061/5409815)
  {% endtab %}
  {% endtabs %}