Uncaught Type Error: Javascript map is not a function

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. 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

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.

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 animalsInArrayLikeObject = {
  "0": "Dog",
  "1": "Cat",
  "2": "Bird",
  "length": 3
}

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

Array.from(animalsInArrayLikeObject).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.