The Cannot read property ‘forEach’ of undefined in JS error is a common problem you may have to face in Javascript. It occurs when you call the .forEach() function on an undefined variable. 

Another possible cause is the absence of semicolons after an empty array’s declaration. In this case, an anonymous array will be iterated over on the next line.

The following article will discuss two methods to fix the error. Keep reading and choose a suitable approach.

How to Fix The Cannot Read Property ‘forEach’ Of Undefined In JS Error

Before heading for the solutions, let’s look at the example as follows to get an overview of the problem:

Code:

const arr = undefined;

// ⛔️ Cannot read properties of undefined (reading 'forEach')

arr.forEach(element => {

  console.log(element);

});

In this example, the ‘forEach’ method is called on an undefined value. That’s why the error occurs.

Method 1: Use Semicolons

let numbers = [];

[1, 2, 3].forEach(i => numbers.push(i));

console.log(numbers);

// -> [1, 2, 3]

Semicolons are an optional element in Javascript. Yet, you can make use of it to have the problem resolved. A semicolon will make your code more readable and less ambiguous. With this element, your code will avoid looking naked.

If you add a semicolon at the first line’s end, the Javascript interpreter will not consider the [1,2,3] anonymous array on the next line. 

Method 2: Check For undefined

Undoubtedly, never fail to check your variables when encountering the problem. This is because your code can be changed every time you run it. Using someArray to check the variable is highly recommended.

function myCoolFunction(someArray) {

  if (someArray) {

    someArray.forEach(item => {

      console.log(item);

    });

  }

}

This code ensures that your someArray includes some elements. undefined is called falsy, which can be identified with a simple if statement. The result will be false if you use it in a comparison. 

For better performance, someArray should be iterable as well.

function myCoolFunction(someArray) {

  if (someArray && Symbol.iterator in Object(someArray)) {

    someArray.forEach(item => {

      console.log(item);

    });

  }

}

Here, your code is working properly even with the presence of a non-iterable value to myCoolFunction() option. There is no need to worry about “a string of some sort” or the number 123.

Method 3: Use Optional Operators

Adding optional operators is one of the easiest approaches to follow. Instead of using the dot . operator, let’s use .? operator instead to see the effect:

function myCoolFunction(someArray) {

    someArray?.forEach?.(item => {

        console.log(item);

    });

}

In this example, the function calls the .forEach() option on someArray if it has a .forEach() method and defined someArray. This one allows coders to resolve the issue without writing a long if statement.

Yet, you will not control the whole situation. If you want to have some control, it would be better to use an if/else statement.

Conclusion

As mentioned before, the Cannot read property ‘forEach’ of undefined in JS error results from the wrong practice of executing the forEach method on an undefined value. 

There are two commonly used methods to solve this problem. Read the article again to get the best solution.