Solve - Cannot read property 'filter' of Undefined in JS

avatar

Borislav Hadzhiev

Sat Oct 23 20212 min read

banner

Photo by Austin Neill

Solve - Cannot read property 'filter' of Undefined #

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.

index.js
const arr = undefined; // ⛔️ Cannot read properties of undefined (reading 'filter') arr.filter(element => element);
The next code snippet 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; const arr = fromDb || []; // ✅ Initialized to array 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.

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 make sure the arr variable stores an array before calling the Array.filter method.

The next example shows how to initialize the value of the arr variable to an empty array if its falsy right before calling the filter method.

The last example uses a ternary operator to check if the value stored in the arr variable is truthy before calling the filter method. If the value is falsy, we return an empty array.

The "Cannot read property 'filter' of undefined" error often occurs when using classes. If you access call the filter() method on a class property that is not initialized to an array, you will get the error. To solve it, initialize the class property setting it to an 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();

In the code snippet, we initialized the colors and countries properties setting them to an array, so we can call the filter method on them.

Had we not done that, we would call the filter method on an undefined value and get the error.

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 initialize the value for the variable on which you're calling the method to an empty array.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee