How to fix forEach is not a function Error in JavaScript

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

BASH
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:

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

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

If you run this code, you will get:

BASH
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:

JAVASCRIPT
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:

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

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

BASH
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
• Discord
• Share
• Post
• Share