TypeError: 'x' is not iterable

メッセージ

TypeError: 'x' is not iterable (Firefox, Chrome)
TypeError: 'x' is not a function or its return value is not iterable (Chrome)

エラータイプ

TypeError

何がうまくいかなかったのか？

for…of の右側や Promise.all や TypedArray.from のような関数の引数として与えられた値が反復可能オブジェクトではありません。反復可能なものは、Array や String、Map、ジェネレーターの結果のようなビルトイン反復可能型や反復処理プロトコルを実装したオブジェクトです。

例

オブジェクトのプロパティを反復処理する

JavaScript では、反復処理プロトコルを実装していない限り Object は反復処理できません。それゆえ、オブジェクトのプロパティを反復処理するために for…of を使用することはできません。

var obj = { 'France': 'Paris', 'England': 'London' };
for (let p of obj) { // TypeError: obj is not iterable
    // …
}

代わりに、オブジェクトのプロパティを反復処理するためには Object.keys か Object.entries を使用してください。

var obj = { 'France': 'Paris', 'England': 'London' };
// Iterate over the property names:
for (let country of Object.keys(obj)) {
    var capital = obj[country];
    console.log(country, capital);
}

for (const [country, capital] of Object.entries(obj))
    console.log(country, capital);

このユースケースのそのほかの選択肢として、Map を使用することもできます:

var map = new Map;
map.set('France', 'Paris');
map.set('England', 'London');
// Iterate over the property names:
for (let country of map.keys()) {
    let capital = map[country];
    console.log(country, capital);
}

for (let capital of map.values())
    console.log(capital);

for (const [country, capital] of map.entries())
    console.log(country, capital);

ジェネレーターを反復処理する

ジェネレーターは反復可能オブジェクトを生成するために呼び出す関数です。

function* generate(a, b) {
  yield a;
  yield b;
}

for (let x of generate) // TypeError: generate is not iterable
    console.log(x);

ジェネレーターを呼び出していないとき、ジェネレーターに対応した Function オブジェクトは呼び出し可能ですが、反復処理はできません。ジェネレーターを呼び出すと、ジェネレーターの実行中に生成された値を反復処理する反復可能オブジェクトが生成されます。

function* generate(a, b) {
    yield a;
    yield b;
}

for (let x of generate(1,2))
    console.log(x);