イテレーターを取得する

Prompt

const iter = [1,2,3,4,5][Symbol.iterator]();
この書き方は一体なんだ？どうなってるの？

これは、イテレーターを直接取得するための書き方だよ。

---

[1,2,3,4,5][Symbol.iterator]() の意味 ✨

まず、この式を分解して見ていこう。

1. [1,2,3,4,5]:

   • これは、5つの要素を持つ配列リテラルだね。配列は、JavaScriptにおいて**イテラブル（Iterable）**なオブジェクトの代表例だよ。

2. [Symbol.iterator]:

   • これは、[1,2,3,4,5]という配列に対して、Symbol.iteratorという特別なキーを使ってプロパティにアクセスしているんだ。

   • Symbol.iteratorは、イテレーターを返すメソッドが格納されている、組み込みのSymbolだよ。

   • だから、[1,2,3,4,5][Symbol.iterator] は、[1,2,3,4,5].values() のようなイテレーターを返すメソッドへの参照を意味する。

3. ():

   • 最後に()を付けることで、そのメソッドを実行しているんだ。

   • [1,2,3,4,5][Symbol.iterator]() は、配列のイテレーターオブジェクトを生成して返す。

どうなっているの？

まとめると、この書き方は**「配列リテラルから、そのイテレーターを返すメソッドを直接呼び出して、イテレーターオブジェクトを取得している」**ということになる。

このイテレーターオブジェクトは、next()メソッドを持っていて、next()を呼び出すたびに配列の次の要素を返すんだ。

JavaScript

const arr = [1, 2, 3, 4, 5];
const iter = arr[Symbol.iterator]();

console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: 4, done: false }
console.log(iter.next()); // { value: 5, done: false }
console.log(iter.next()); // { value: undefined, done: true }

なぜこんな書き方をするのか？

これは、for...of ループの内部的な仕組みを理解する上で非常に重要だよ。

for...ofループは、以下のような処理を自動でやってくれるんだ。

1. ループ対象のオブジェクトから、Symbol.iteratorメソッドを呼び出してイテレーターを取得する。

2. イテレーターのnext()メソッドを繰り返し呼び出す。

3. next()が返すオブジェクトのdoneプロパティがtrueになるまでループを続ける。

だから、君の書いたコードは、for...ofループが内部で行っている処理を、手動で再現しているもの、と言えるんだ。