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

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

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

The "Cannot read property 'filter' of undefined" error occurs when calling the filter() method on a variable that stores an undefined value. To solve the error, make sure to only call the filter method on arrays and initialize the variable to an empty array if it's undefined.

cannot read property filter of udnefined

Here is an example of how the error occurs.

index.js
const arr = undefined; // ⛔️ TypeError: Cannot read properties of undefined (reading 'filter') arr.filter(element => element);
The next code sample shows how to initialize the value for the arr variable to an empty array if it's falsy, and the snippet after that shows how to solve the error when using classes.
index.js
const fromDb = undefined; // ✅ Initialized to array const arr = fromDb || []; const result1 = arr.filter(element => element); // ✅ Check if array if (Array.isArray(arr)) { const result2 = arr.filter(element => element); } else { console.log('arr is not an array'); } // ✅ Initialize to empty array if falsy const result3 = (arr || []).filter(element => element); // ✅ Use ternary operator const result4 = arr ? arr.filter(element => element) : [];

We used the logical OR (||) operator to set the arr variable to an empty array if the fromDb value is falsy.

index.js
const fromDb = undefined; const arr = fromDb || []; const result1 = arr.filter(element => element);
The operator returns the value to the right, if the value to the left is falsy (e.g. undefined).

The next example shows how to use the Array.isArray() method to check that the arr variable stores an array before calling the Array.filter method.

index.js
const fromDb = undefined; const arr = fromDb || []; if (Array.isArray(arr)) { const result2 = arr.filter(element => element); } else { console.log('arr is not an array'); }

The next example shows how to provide a fallback value of an empty array right before calling the filter method.

index.js
const fromDb = undefined; const arr = fromDb || []; const result3 = (arr || []).filter(element => element);

The last example uses a ternary operator to check if the value stored in the arr variable is truthy before calling the filter method.

index.js
const fromDb = undefined; const arr = fromDb || []; const result4 = arr ? arr.filter(element => element) : [];

The ternary operator is very similar to an if/else statement.

If the value to the left of the question mark is truthy, the operator returns the value to the left of the colon, otherwise the value to the right of the colon is returned.

In other words, if the arr variable stores a truthy value, we return the result of calling the filter() method, otherwise we return an empty array.

The "Cannot read property 'filter' of undefined" error often occurs when using classes. Calling the filter() method on a class property that is not initialized to an array causes the error. To solve the error, initialize the class property to an empty array.

index.js
class Person { // ✅ initialize colors colors = []; constructor(countries) { // ✅ initialize countries from parameters this.countries = countries; } filterColors() { this.colors.filter(color => color === 'blue'); } filterCountries() { this.countries.filter(country => country === 'Chile'); } } const p1 = new Person(['Chile', 'Mexico', 'Peru']); p1.filterCountries(); p1.filterColors();

We initialized the colors and countries properties to empty arrays before calling the filter method.

Conclusion #

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

The easiest way to solve the error is to provide a fallback value of an empty array if the variable is falsy (e.g. undefined).

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.