fullstackpilot Logo
fullstackpilot Logo
JavaScript map is not a function uncaught type error js map

Uncaught TypeError: map is not a function in JavaScript

Martin Milo
By on

Seeing the "Uncaught TypeError: map is not a function" in your console happens when you try to call the map() method on a non-indexed collections. Most of the time the error simply occurs when you try to call the map on object instead of an array.

Relevant post: JavaScript map - How to map over the array in JavaScript properly?

Table of Contents

TypeError: map is not a function in JavaScript

The error might occur when you try to call map() method on an object. For instance, you expect the data from the server to be an array but you forgot that the data is nested within the object.

function transformRow(row) {
  return { name: `${row.firstname} ${row.lastname}`, ...row }
}


fetchData().then(res => {
  const transformed = res.data.map(transformRow)
  // 💥 Uncaught TypeError: map is not a function
})

In the example above, we fetched the data from a server, and tried to map over the array (or we thought it will be an array). But to our surprise, we get an uncaught error.

fetchData().then(res => {
  console.log(res.data)
  // -- 👇 console.log output --
  // { data: [...], total: 120, page: 1 }
})

When we console.log the response data, we quickly realize that it is an object in which we have nested data array.

If you want to be sure you're always calling the map method on array, you can use Array.isArray method to check whether you're dealing with an array.

const data = {}


if (Array.isArray(data)) console.log('yes')
else console.log('no')


// -- 👇 console.log output --
// no

Other occurences of: map is not a function in JavaScript

The error might occur even if you're not dealing with object at all. If you try to call map on Boolean type, Number type, String type or Symbol type, you'll also get "map is not a function error".

If you try to call the method on Null type or Undefined type, you'll get different error messages.

Array-like objects also throw map is not a function error

If you're working in a browser environment with JavaScript, the most common array-like object you probably encounter is a NodeList - you can get it by trying document.querySelectorAll('p'). You may choose to get different element, not necessarily a paragraph.

If you try to call map on NodeList it also throws Uncaught TypeError: map is not a function. We need to first convert/copy the array-like object to the array. To convert array-like object to array, we can use Array.from() method.

const avengersInArrayLikeObject = {
  "0": "Thor",
  "1": "Iron man",
  "2": "Hulk",
  "length": 3
}


avengersInArrayLikeObject.map((a) => a)
// 💥 Uncaught TypeError: map is not a function


Array.from(avengersInArrayLikeObject).map((a) => a)
// ✅ Works, since we converted the object to array

Beware that the above method to convert the array-like object to an array does not work on regular (non array-like) objects. While it doesn't throw the error if you try to do so, if you use Array.from() method on regular object, you'll get an empty array.

Share: