How to fix forEach is not a function Error in JavaScript

When you work with JavaScript, you might come across this error:

	Uncaught TypeError: X.forEach is not a function

This error occurs when you try to call the forEach method on a variable that is not an array, map, or set.

In this post, we'll look at examples of how this error occurs and how to fix it.

How to fix TypeError: X.forEach is not a function

To start, lets look at some example code where this error occurs:

	const elements = document.querySelectorAll(".element");

elements.forEach(element => console.log(element));

If you run this code, you will get:

	Uncaught TypeError: elements.forEach is not a function

The reason for this is that elements is not an array, but instead an array-like object, even though it looks like it should be just a normal array.

Instead, you will need to create an array from the elements by using Array.from:

	const elements = document.querySelectorAll(".element");
const array = Array.from(elements);

array.forEach(element => console.log(element));

If you want to check ahead of time if variable is an array and therefore has access to the forEach function, simply use the Array.isArray method:

	const elements = document.querySelectorAll(".element");

if (Array.isArray(elements)) {
    console.log("elements is an array");
} else {
    console.log("elements is not an array");
}

	elements is not an array

Now you know when you can safely call forEach or not.

Conclusion

In this post, we looked at examples of what causes the Uncaught TypeError: X.forEach is not a function error.

Simply ensure that the variable you are calling forEach on is a valid array.

Thanks for reading!

• Support Us
• Join
• Share
• Tweet
• Share