TypeError: Cannot Read Property ‘Filter’ Of Undefined In JavaScript – How To Fix It?

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

TypeError: Cannot read property ‘filter’ of Undefined in JavaScript. Is it a serious error? To answer this question, we will find out the cause and how to fix it right now.

Why does the TypeError: Cannot read property ‘filter’ of Undefined in JavaScript appear?

You use the filter() function to filter some items in the array but don’t know that your array is not containing any value. At this point, the error will appear.

// The array is not containing any value.
let array;

array.filter((element) => typeof element === "string");

Error:

Uncaught TypeError: Cannot read properties of undefined

How to fix this error?

Check for undefined before calling the function

To fix this error is very simple, check if the array is undefined or not. If true, log a message line to check again. If false, call the filter() function. Like below:

// The array is not containing any value
let array1;

// The array contains values
let array2 = ["learn", 1, "share", 2, "IT", null];

function checkUndefined(array) {
  if (typeof array === "undefined") {

    // Cannot use filter()
    console.log("The array is undefined. Please check again");
  } else {

    // Can use filter()
    let result = array.filter((element) => typeof element === "string");
    console.log(result);
  }
}

checkUndefined(array1); // The array is undefined. Please check again
checkUndefined(array2); // ['learn', 'share', 'IT']

Output:

The array is undefined. Please check again
(3) ['learn', 'share', 'IT']

Using OR(||) Operator

If we use the || Operator between an array and the empty array, the || Operator will definitely never return undefined. That way, we will avoid the error “Cannot read property ‘filter’ of Undefined”. Like this:

// The undefined array
let undefinedArray;

// If undefinedArray has no value -> return []
let array = undefinedArray || [];

// Use filter() without error
let result = array.filter((element) => typeof element === "string");
console.log(result); // []

Output:

[]

Using Optional Chaining(?.)

We have already introduced Optional Chaining(?.) in this article. You can read it if you want.

Using Optional chaining(?.) will avoid the error “TypeError: Cannot read property ‘filter’ of Undefined in JavaScript” because it will return undefined if we cannot use the filter() on an array. Like the below:

// The undefined array
let array;

// Returns undefined if the array cannot use the filter() function
let result = array?.filter((element) => typeof element === "string");

console.log(result); // undefined

Output:

undefined

Summary

That’s all about the TypeError: Cannot read property ‘filter’ of Undefined in JavaScript. We hope that you have learned something from this article, and don’t be confused when you get the same error again. If you have any questions, comment in the comment section, and we will answer them.

Have a beautiful day!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *