How to fix forEach is not a function Error in JavaScript

Updated onbyAlan Morel
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.


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!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!
Copyright © 2017 - 2024 All rights reserved. Made with ❤ in NY.