TypeError: Cannot read property 'includes' of Null in JS

avatar

Borislav Hadzhiev

Last updated: Jul 24, 2022

banner

Photo from Unsplash

TypeError: Cannot read property 'includes' of Null in JS #

The "Cannot read property 'includes' of null" error occurs when the includes() method is called on a variable that stores a null value. To solve the error, make sure you're calling the method on the correct data type - array or string.

cannot read property includes of null

Here is an example of how the error occurs.

index.js
const arr = null; // ⛔️ TypeError: Cannot read properties of null (reading 'includes') console.log(arr.includes('test'));
To solve the error, initialize the value to an empty array or an empty string before calling the includes() method, and check that the value is of the correct type.

Here are some examples that show how to avoid getting the error when working with arrays and strings.

index.js
// 👇👇️👇️️ WITH ARRAYS const fromDb = null; // ✅ Provide empty array as fallback const arr = fromDb || []; // ✅ Using optional chaining (?.) const ex1 = arr?.includes('test'); // ✅ Using Array.isArray if (Array.isArray(arr)) { const ex2 = arr.includes('test'); } // ✅ Provide fallback value in place const ex3 = (arr || []).includes('test'); // ----------------------------------------------- // 👇️👇️👇️ WITH STRINGS // ✅ Provide empty string as fallback const str = fromDb || ''; // ✅ Using optional chaining (?.) const ex4 = str?.includes('test'); // ✅ Using typeof if (typeof str === 'string') { const ex5 = str.includes('test'); } // ✅ Provide fallback value in place const ex6 = (str || '').includes('test');

We used the logical OR (||) operator when initializing the arr and str variables.

index.js
const fromDb = null; // ✅ Provide empty array as fallback const arr = fromDb || []; console.log(arr) // 👉️ [] // ----------------------------------------------- // ✅ Provide empty string as fallback const str = fromDb || ''; console.log(str) // 👉️ ""
The logical OR (||) operator returns the value to the right if the value to the left is falsy (e.g. null).

Alternatively, you can use the optional chaining (?.) operator.

index.js
const fromDb = null; const arr = fromDb || []; const ex1 = arr?.includes('test'); // ----------------------------------------------- const str = fromDb || ''; const ex4 = str?.includes('test');

The optional chaining (?.) operator short-circuits if the reference is equal to null or undefined, otherwise it calls the method.

You can also use the Array.isArray method or the typeof operator to check if the value is an array or a string before calling the includes() method.
index.js
const fromDb = null; const arr = fromDb || []; if (Array.isArray(arr)) { const ex2 = arr.includes('test'); } // ----------------------------------------------- const str = fromDb || ''; if (typeof str === 'string') { const ex5 = str.includes('test'); }

The last example shows how to use the logical OR (||) operator to provide a fallback value right before calling the includes() method.

Conclusion #

The "Cannot read property 'includes' of null" error occurs when calling the includes() method on a null value.

To avoid getting the error, make sure to only call the method on data types that implement it - arrays or strings.

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.