TypeError: Cannot read property 'forEach' of Undefined in JS

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

TypeError: Cannot read property 'forEach' of Undefined in JS #

The "Cannot read property 'forEach' of undefined" error occurs when the forEach() method is called on an undefined value. To solve the error, make sure to only call the forEach method on arrays, Set or Map objects.

cannot read property foreach of undefined

Here is an example of how the error occurs.

index.js
const arr = undefined; // ⛔️ TypeError: Cannot read properties of undefined (reading 'forEach') arr.forEach(element => { console.log(element); });

We called the forEach method on an undefined value, so the error occurred.

Instead, initialize the value of the variable to the correct data type before calling the forEach method.

index.js
const fromDb = undefined; // ✅ Initialize to empty array if falsy const arr = fromDb || []; // ✅ Using optional chaining arr?.forEach(element => { console.log(element); }); // ✅ Check if truthy if (arr) { arr.forEach(element => { console.log(element); }); } // ✅ Check if Array if (Array.isArray(arr)) { arr.forEach(element => { console.log(element); }); }

We used the logical OR (||) operator to provide a fallback value if the value to the left is falsy (e.g. undefined).

The logical OR (||) operator returns the value to the right, if the value to the left is falsy.

The next example shows how to use the optional chaining (?.) operator. The operator short-circuits returning undefined if the reference is equal to null or undefined.

index.js
const fromDb = undefined; const arr = fromDb || []; arr?.forEach(element => { console.log(element); });
The third example shows how to use a basic if statement to check if the arr variable stores a truthy value. Since undefined is falsy, it wouldn't pass the test.
index.js
const fromDb = undefined; const arr = fromDb || []; if (arr) { arr.forEach(element => { console.log(element); }); }

The last example shows how to use the Array.isArray method to check if the variable stores an array.

index.js
const fromDb = undefined; const arr = fromDb || []; if (Array.isArray(arr)) { arr.forEach(element => { console.log(element); }); }

The forEach() method is implemented by multiple objects:

If you use the method with arrays, use the optional chaining operator or the Array.isArray method to only call the forEach method on a valid array.

Otherwise, you can use an if statement with a truthiness check, since all arrays, Map and Set objects are truthy values.

The "Cannot read property 'forEach' of undefined" error often occurs when trying to access an array index that doesn't exist.

index.js
const arr = []; // ⛔️ Cannot read properties of undefined (reading 'forEach') arr[0].forEach(element => { console.log(element); });

We accessed an empty array at index 0, which returns undefined, on which we called the forEach method and got the error.

If you're unsure whether the index exists in the array, use the optional chaining operator.

index.js
const arr = []; arr[0]?.forEach(element => { console.log(element); });

The optional chaining (?.) operator won't invoke the forEach method because accessing the array at index 0 returns an undefined value.

Conclusion #

The "Cannot read property 'forEach' of undefined" error occurs when calling the forEach method on an undefined value.

To solve the error make sure to initialize the variable to the correct value and only call the forEach method on the correct data type.

Further Reading #

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.