TypeError: 'x' is not iterable

JavaScript の例外 "is not iterable" は、 for…of の右辺として与えられた値や、 Promise.all または TypedArray.from のような関数の引数として与えられた値が反復可能オブジェクトではなかった場合に発生します。

エラーメッセージ

js

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 を使用することはできません。

js

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

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

js

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 を使用することもできます。

js

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);

ジェネレーターの反復処理

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

js

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

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

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

js

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

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

独自の反復可能オブジェクトでの反復処理

独自の反復可能オブジェクトは、 Symbol.iterator メソッドを実装することで作成することができます。 iterator メソッドはイテレーターであるオブジェクト、すなわち next メソッドを返す必要があります。

js

const myEmptyIterable = {
  [Symbol.iterator]() {
    return []; // [] は反復可能ですが、イテレーターではありません。 -- next メソッドがないからです。
  },
};

Array.from(myEmptyIterable); // TypeError: myEmptyIterable is not iterable

こちらは正しい実装です。

js

const myEmptyIterable = {
  [Symbol.iterator]() {
    return [][Symbol.iterator]();
  },
};

Array.from(myEmptyIterable); // []

関連情報