How to Resolve "TypeError: Cannot read properties of undefined (or null) reading 'includes'" Error in JavaScript

The JavaScript TypeError: Cannot read properties of undefined (reading 'includes') and its nearly identical cousin, ...of null (reading 'includes'), are common errors that occur when you try to call the .includes() method on a variable that does not hold an array or a string. The error message is direct: your code tried to find the includes function on a value that was undefined or null.

This guide will explain what the .includes() method is, why these errors happen, and provide the standard, robust solutions to fix them, from providing simple fallbacks to using modern optional chaining.

Understanding the .includes() Method

The .includes() method is a function that exists on arrays and strings. It checks if an element or substring is present and returns a simple boolean (true or false).

Correct usage with Array:

const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // Output: true

Correct Usage with String:

const message = "Hello, world!";
console.log(message.includes('world')); // Output: true

Understanding the Error: Why undefined or null?

This error occurs when the variable you are calling .includes() on is not an array or a string, but is instead undefined or null. The .includes() method simply does not exist on these values.

Problem Code (undefined)

let myVar; // Declared but not initialized, so it is `undefined`

// ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'includes')
myVar.includes('test');

Problem Code (null)

const dataFromApi = null; // A function or API might return `null`

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'includes')
dataFromApi.includes('test');

This commonly happens when a function fails to return an expected array or string, or when a variable is not properly initialized.

Solution 1: Provide a Fallback to a Default Value

If a variable might be null or undefined, the simplest way to prevent the error is to provide a fallback to a valid default value (like an empty array [] or an empty string "") using the logical OR (||) operator.

const dataFromApi = undefined;

// If `dataFromApi` is falsy (like undefined or null), use an empty array instead.
const items = dataFromApi || [];

// ✅ This is now safe. The .includes() method is called on an empty array.
const result = items.includes('apple');
console.log(result);  // Output: false

note

This is a very common and effective pattern for ensuring a variable can always be safely used with methods like .includes().

You can also use this inline for a more compact fix:

const items = null;
const result = (items || []).includes('apple');
console.log(result); // Output: false

Solution 2: Use a Conditional Check Before Calling

A more explicit and often more readable solution is to check if the variable is a valid type before you try to use it.

Solution for Arrays

Use the Array.isArray() method to confirm the variable holds an array.

const items = null;

if (Array.isArray(items)) {
  console.log(items.includes('apple'));
} else {
  console.log('Cannot check for inclusion, because `items` is not an array.');
}

Solution for Strings

Use the typeof operator to confirm the variable holds a string.

const message = undefined;

if (typeof message === 'string') {
  console.log(message.includes('hello'));
} else {
  console.log('Cannot check for inclusion, because `message` is not a string.');
}

Solution 3: Use Optional Chaining (?.) for a Concise Guard

For modern JavaScript (ES2020 and newer), the optional chaining operator (?.) is the most elegant solution. It allows you to safely attempt to call a method. If the value on the left is null or undefined, the expression "short-circuits" and returns undefined instead of throwing an error.

const items = undefined;

// The `?.` checks if `items` is null or undefined. Since it is,
// the .includes() call is never made. The expression returns `undefined`.
const result = items?.includes('apple');

console.log(result);  // Output: undefined

You can combine this with the logical OR operator to provide a clean boolean result.

const items = null;
// If the optional chain returns `undefined`, the `||` provides a fallback of `false`.
const result = items?.includes('apple') || false;

console.log(result);  // Output: false

Conclusion

The TypeError: Cannot read properties of undefined (or null) reading 'includes' error is a clear sign that your variable is not the array or string you expected it to be.

To fix it, you must add a safeguard before calling the .includes() method:

1. Provide a Fallback: Use the logical OR operator to default to an empty value: const items = data || [];. This is a quick and effective fix.
2. Use a Conditional Check: Use if (Array.isArray(items)) or if (typeof message === 'string') for clear, robust, and readable code.
3. Use Optional Chaining (Best for Conciseness): Use items?.includes(...) for a clean, modern, and safe way to call the method on a potentially nullish value.