The error isn't about map() at all. It means the value before the dot isn't an array: usually an object, a Set, or an unparsed string. Here's the fix.

Adapted from the JavaScript Essentials Companion Guide.

You fetch some data and try to loop over it:

const response = { data: [1, 2, 3], total: 3 }; const doubled = response.map(x => x * 2); 
TypeError: response.map is not a function

The message reads as if map is broken, or missing from your version of JavaScript. It isn't. map works fine. The error is describing response, and it's saying that this particular value doesn't have a map on it.

What's actually happening

map isn't a general-purpose tool that works on any collection. It's a method that belongs to arrays specifically. When you write something.map(...), JavaScript looks for a property called map on something. If something is a real array, it finds one and runs it. If it's anything else, it finds nothing, and calling nothing as a function produces "is not a function."

So the error never means "map failed". It means "the thing before the dot is not an array." The message even shows you which thing: response.map is not a function points at response. Your job is to find out what that value actually is and why it isn't the array you expected.

The usual suspects all look a bit like arrays, which is why this error confuses people:

  • An object that contains an array. APIs often wrap their results, like { data: [...], total: 3 }. The array is inside the object. The object itself has no map.
  • A Set or a Map. They hold collections of values and can be looped over, but neither has map.
  • A string. JSON you received but haven't parsed is just text, and text has no map.
  • An array-like object. Things with numbered keys and a length look like arrays but aren't, and don't carry array methods. In browsers, document.querySelectorAll() returns a NodeList, which has forEach but not map.

The fix, step by step

1. Find out what the value really is. Log it, along with its type, before the failing line:

console.log(response, typeof response, Array.isArray(response));

Array.isArray is the reliable check. It returns true only for real arrays, and false for objects, strings, Sets, and array-likes.

2. If it's an object holding the array, reach inside. Use the property that contains the array:

const doubled = response.data.map(x => x * 2); // [2, 4, 6]

3. If it's a Set, convert it to an array first. Spreading it into an array literal does that:

const set = new Set([1, 2, 2, 3]); const doubled = [...set].map(x => x * 2); // [2, 4, 6]

The same works for a Map ([...map] gives [key, value] pairs), and for a NodeList ([...document.querySelectorAll('li')]). For array-likes with numbered keys and a length, use Array.from(arrayLike).

4. If it's an object you want to loop over, use Object.entries. It turns an object's key-value pairs into an array:

Object.entries({ a: 1, b: 2 }).map(([key, value]) => key + value); // ['a1', 'b2']

5. If it's a string, parse it first. A JSON string needs JSON.parse before it's an array:

JSON.parse('[1, 2]').map(x => x); // [1, 2]

Two mistakes worth knowing about ahead of time

Silencing the error without finding the cause. Wrapping the call in a check like if (response.map) { ... } makes the error go away, but the loop quietly never runs and you end up with a blank screen instead of a crash. Find out why the value isn't an array. If the data legitimately might be missing, handle that on purpose: (items ?? []).map(...) gives you an empty array to loop over when items is undefined or null.

Confusing this with "cannot read properties of undefined". If the value is undefined or null, you get a different message: Cannot read properties of undefined (reading 'map'). That one means the variable holds nothing at all, not a wrong kind of value. It has its own explanation in How to Fix 'Cannot Read Properties of Undefined'.

A habit that prevents the confusion entirely

When data comes from outside your code, from an API, a file, or user input, check its shape once at the edge, before it travels through the rest of your program. Log it, look at what's actually there, and write down in a comment or a type what you expect: "this is an object with a data array." Most is not a function errors come from assuming the shape instead of looking at it. A single console.log at the start usually settles the question in seconds.

If you'd like more posts like this sent straight to your inbox, subscribe to the newsletter.

Prefer to dig in yourself? The JavaScript Essentials repo on GitHub has more free examples and exercises.