How to fix TypeError: forEach is not a function in JavaScript?

As anyone who is a beginner at JavaScript or is actively learning JavaScript, there is nothing more frustrating than trying to find the error in your code. You can spend hours looking at the same lines of code, and still not see the mistake. But as any experienced programmer will tell you, the key to finding the error is to take a step back and look at the big picture. Of course, sometimes no matter how hard you try, you can’t find the error in your code. If you’re getting the Type Error “forEach is not a function” when trying to use the forEach() method on a variable, you’ve come to the right place. In this article, we will understand what this annoying error message means and show you how to fix this error for good.

What is TypeError?

To understand TypeError, we must first comprehend how JavaScript errors function. Aside from logical problems, there are two other types of errors in JavaScript: syntax errors and runtime errors (we commonly call them exceptions).

When the compiler recognizes an incorrect statement, syntax errors happen. However, in our case, TypeError is a runtime error. A runtime error occurs when a program crashes even though the syntax is correct. TypeError is one of many runtime errors that can occur depending on the type of problem the program faces.

When an exception occurs, the kind of exception your program encountered (in this case, TypeError) is displayed in the output along with the error message. The error message in our case is “forEach is not a function” which denotes that there is a problem with the variable or method with the name “forEach”. TypeError occurs when we try to access a method or a property from a variable whose type does not have that method or property.

When does this error happen?

If you are getting the “TypeError: forEach is not a function” error, chances are you are trying to call the forEach() method on a variable that is not an Array, Map, or Set. Here is an example,

// calling forEach() on a variable of number type
const test = 0;
test.forEach(element => {
  console.log(element);
});

// output
//Uncaught TypeError: test.forEach is not a function
Code language: JavaScript (javascript)

As you can see, we got the error because the forEach() method is not available on number types for obvious reasons. This error will occur with any variable that does not have the type of Array, Map, or Set.

The solution

The solution is simple, do not try calling the forEach() method on anything that is not an Array, Map, or Set.

Often times when working with JavaScript on the Front-end, you’ll get array-like values as the return type of many functions. In this case, if you want to use the forEach() method, you first need to convert the object into an Array using the Array.from() method and then call the forEach() method on that. Here is an example of doing the same,

// For example, getElementsByTagName returns an Array-like object
const arrayLike = document.getElementsByTagName('li');

// converting to array
const arr = Array.from(arrayLike);

// using forEach
arr.forEach(el => {
  console.log(el);
});
Code language: JavaScript (javascript)

And there you go, no errors! Often times you might think you are working with an Array but it might as be an Array-like object. So you can simply convert it to an Array before using the forEach() method just like shown above.

If you are ever unsure if some variable or property is an Array or not, you can simply use the Array.isArray() method to check just that. Here is an example of it in action,

const test = 5;

if (Array.isArray(test)) {
  console.log("It's an array!");
} else {
  console.log("NOT an array!");
}
// output
// "NOT an array!"
Code language: JavaScript (javascript)

Similarly, if you are using an object with a key and value pair you can simply loop over the keys of the object with the forEach() method rather than the whole object. You can access the array of keys using the Object.keys() method and passing the object as an argument.

If you are still getting the error, try printing the variable and make sure it is an Array, Set, or Map. One more important thing to note here is that if you are using an API to fetch some sort of array, make sure to parse it to a native JavaScript Array. Otherwise, you will not be able to use array methods such as forEach() on it.

Conclusion

When you run into a problem, your first course of action should be to Google it. It’s possible that another programmer has already encountered and resolved this issue! Organizing and using comments on your code can help you to more easily debug it. When you are debugging, it is often helpful to print out the values of variables to see where the problem is. You can also use a debugging tool such as a debugger or a linter to help find and fix errors. In this article, we understood the meaning of the error message “TypeError: forEach is not a function in JavaScript” in detail. We also looked at when this error usually occurs as well as the solution to getting rid of this error. I hope this article has helped you clear your doubts regarding the “TypeError” kinds of errors in JavaScript!

If you have any questions regarding this article or want to talk about anything technology, you can find me on Twitter. Thank you for reading!