Solve - forEach is not a function Error in JavaScript

Solve - forEach is not a function Error #

The "forEach is not a function" error occurs when we call the forEach() method on a value that is not of type array, Map, or Set. To solve the error, make sure to only call the forEach method on arrays, Map or Set objects.

Here are 2 examples of how the error occurs:

Copied!
// 👇️ with DOM elements
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

// ⛔️ Uncaught TypeError: boxes.forEach is not a function
boxes.forEach(element => {
  console.log(element);
});

// 👇️ with Objects
const obj = {};

// ⛔️ Uncaught TypeError: obj.forEach is not a function
obj.forEach(element => {
  console.log(element);
});

In the first example we use the getElementsByClassName method to get an array-like object, try to call the Array.forEach method on it and get the error.

The second example calls the forEach method on an object, and since it's not implemented on objects, we get back the error.

Here are the solutions for both scenarios.

Copied!
// 👇️ with DOM elements
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box, div.box]

Array.from(boxes).forEach(element => {
  console.log(element);
});

// 👇️ with Objects
const obj = {name: 'Tom', country: 'Chile'};

Object.keys(obj).forEach(key => {
  console.log(key); // 👉️ "name", "country"
  console.log(obj[key]); // 👉️ "Tom", "Chile"
});

We used the Array.from method to convert the array-like object to an array before calling the forEach() method.

Alternatively, you could check if the value is of the correct type before calling the forEach method.

Copied!
const arr = null;

if (Array.isArray(arr)) {
  arr.forEach(element => {
    console.log(element);
  });
}

If the "forEach is not a function" error still persists, console.log the value you're calling the forEach method on and make sure the value is an array, Map or a Set, depending on your use case.

If the value is fetched from a remote server, make sure you have parsed the JSON to a native JavaScript array before calling the forEach method.