TypeError: 'X' is not iterable in JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

TypeError: 'X' is not iterable in JavaScript #

The "TypeError: 'X' is not iterable" occurs when using the for...of loop with a right-hand side value that is not iterable, e.g. an object. To solve the error, use the Object.keys() or Object.values() methods to get an array with which you can use the for...of loop.

typeerror is not iterable

Here's an example of how the error occurs.

index.js
const obj = {name: 'Tom', age: 30}; // ⛔️ TypeError: obj is not iterable for (const key of obj) { console.log(key); }

We used the for...of loop to try to iterate over an object.

Since objects are not iterable, we got "TypeError: obj is not iterable".

Instead, you should use the Object.keys(), Object.values() or Object.entires() methods to get an array with which you can use the for...of loop.

index.js
const obj = {name: 'Tom', age: 30}; // ✅ Using Object.keys() for (const key of Object.keys(obj)) { console.log(key); // 👉️ name, age console.log(obj[key]); // 👉️ 'Tom', 30 } // ✅ Using Object.values() for (const value of Object.values(obj)) { console.log(value); // 👉️ Tom, 30 } // ✅ Using Object.entries() for (const entry of Object.entries(obj)) { console.log(entry); // 👉️ ['name', 'Tom'], ['age', 30] }

We can only iterate over iterable values, e.g. an array, string, Map, Set, generator, etc.

We used the Object.keys method to get an array of the object's keys before using the for...of loop.

Similarly, you can use the Array.forEach() method to iterate over the array.

index.js
const obj = {name: 'Tom', age: 30}; Object.keys(obj).forEach(key => { console.log(key); // 👉️ name, age console.log(obj[key]); // 👉️ 'Tom', 30 });

The Object.values method returns an array of the object's values.

The Object.entries() method returns an array of arrays where each nested array contains 2 elements - the key and the corresponding value - [key, value].

If you need to iterate over a generator function, use the for...of loop.

index.js
function* generator(a, b, c) { yield a; yield b; yield c; } for (const num of generator(5, 10, 15)) { console.log(num); // 👉️ 5, 10, 15 }
Notice that we had to call the function for it to return the generator object we can iterate over.

If you forget to call the function, you would get the "TypeError: 'X' is not iterable".

index.js
function* generator(a, b, c) { yield a; yield b; yield c; } // ⛔️ TypeError: generator is not iterable for (const num of generator) { console.log(num); }

We forgot to call the function, so we passed a right-hand side value of a function to the for...of loop, which caused the error.

Conclusion #

The "TypeError: 'X' is not iterable" occurs when using the for...of loop with a right-hand side value that is not iterable, e.g. an object. To solve the error, use the Object.keys() or Object.values() methods to get an array with which you can use the for...of loop.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.