Introduction

When you see TypeError: x is not iterable in JavaScript, it means your code tried to loop over, spread, or destructure something (x) that isn’t a valid iterable. In simple words: you treated it like a list or a string (something you can go through item by item), but it wasn't.

An iterable in JavaScript is something that has a special method named [Symbol.iterator]() that lets JavaScript get elements one by one. Built-in iterables include arrays, strings, Maps, Sets, generator results, etc.

So when you do things like for (let v of x), or [...x], or destructure as const [a, b] = x, JavaScript checks if x is iterable. If not, it throws the “not iterable” TypeError.

Detailed causes and how to recognize them

1. Looping over a plain object (using for…of)

Plain objects (like { key: value }) are not iterable by default. So:

const obj = { name: "Alice", age: 25 };
for (const x of obj) {
  console.log(x);
}
// → TypeError: obj is not iterable

Why? Because objects don’t implement the iteration protocol ([Symbol.iterator]). They are key-value stores, not ordered lists.

How to fix / workaround:

Example?

const obj = { name: "Alice", age: 25 };

for (const key of Object.keys(obj)) {
  console.log(key, obj[key]);
}

for (const [k, v] of Object.entries(obj)) {
  console.log(k, v);
}

2. Using spread syntax (...) or array destructuring on non-iterables

Spread syntax and destructuring expect an iterable. If you try to spread a non-iterable:

const obj = { a: 1, b: 2 };
const arr = [...obj];  // Error: obj is not iterable

Or destructure wrongly

const data = { x: 10, y: 20 };
const [a, b] = data;  // Error: data is not iterable

Fix / safe approach

const { x, y } = data;  // Correct for object

Or if inside the object there’s an array

const data = { items: [5, 10] };
const { items: [first, second] } = data;  // OK

3. Passing undefined, null, or missing data to loops/functions

Sometimes you think x is an array, but it's actually undefined or null. That also leads to “is not iterable”.

Example

let arr = null;
for (const v of arr) {
  console.log(v);
}
// → TypeError: arr is not iterable

Or

const [a, b] = undefined;  // Error: undefined is not iterable

How to guard against this

4. Not invoking a generator function (forgetting ())

Generator functions (declared with function*) return iterators when invoked. If you forget to call them:

function* gen() {
  yield 1;
  yield 2;
}

// Wrong:
for (const v of gen) {
  console.log(v);
}
// → TypeError: gen is not iterable

// Correct:
for (const v of gen()) {
  console.log(v);  // 1, then 2
}

So always call the generator (with ()) to get an iterable object.

5. Passing bad data to functions expecting iterables (e.g. Promise.all, Array.from, Set(...))

Some JavaScript APIs assume you pass an iterable. If you pass a plain object or something that is not iterable, you'll get the error:

const obj = { name: "Alice" };
Promise.all(obj);    // Error: obj is not iterable
Array.from(obj);     // Error: obj is not iterable
new Set(obj);         // Error

Fix

if (x && typeof x[Symbol.iterator] === "function") {
  return Promise.all(x);
} else {
  console.error("Expected iterable for Promise.all, got:", x);
  return Promise.resolve([]);  // fallback
}

6. Debugging the error (how to find where it occurs)

When you see TypeError: x is not iterable, you need to find which x is causing the error.

Steps to debug

By doing this, you’ll understand exactly which variable is non-iterable and why.

Summary

When you see “TypeError: x is not iterable” in JavaScript, it means your code tried to treat x like something you can loop over or spread (an iterable), but it wasn’t. To fix it:

By carefully validating and converting your data before using loops, spreads, or destructuring, you’ll avoid this common JavaScript error and make your code more robust in JS projects in India or anywhere. If you like, I can also craft a cheat sheet or template code optimized for React, Node.js or your environment. Do you want me to prepare that?