Cannot read property 'includes' of Undefined in JavaScript

Have you ever encountered the error message “Cannot read property ‘includes’ of undefined” while working with JavaScript? This error occurs when the ‘includes()’ method is called on a value that is undefined.

To fix this error, it’s important to only call the ‘includes()’ method on data types that support it – namely, arrays and strings. Let’s consider an example to understand how this error can occur:

const arr = undefined;arr.includes('example');  // TypeError: Cannot read property 'includes' of undefinedconst str = undefined;str.includes('example');  // TypeError: Cannot read property 'includes' of undefined

To solve this error, you can provide a fallback value for the variable in question and only call ‘includes()’ if the value is of the expected type. Here are a few different approaches you can use to avoid this error when working with arrays and strings:

Avoiding the Error with Arrays

const fromDb = undefined;// Initialize to an empty array if falsyconst arr = fromDb || [];// Use optional chainingconst r1 = arr?.includes('example');  // false// Check if the value is an array using Array.isArrayif (Array.isArray(arr)) {  const r2 = arr.includes('example');}// Provide a fallback value right before calling includes()const r3 = (arr || []).includes('example');

Avoiding the Error with Strings

const fromDb = undefined;// Initialize to an empty string if falsyconst str = fromDb || '';// Use optional chainingconst r4 = str?.includes('example');  // false// Check if the value is a string using typeofif (typeof str === 'string') {  const r5 = str.includes('example');}// Provide a fallback value right before calling includes()const r6 = (str || '').includes('example');

In the examples above, we used the logical ‘OR’ (||) operator to provide a fallback value if the value to the left of the operator is false (e.g., undefined). If the value to the left is false, the ‘||’ operator returns the value to the right.

[Fixed]: tsc command not found TypeScript error [Solved]

Using optional chaining operator

Alternatively, you can use the optional chaining operator (?.) to avoid getting an error. If the reference is equal to undefined or null, the optional chaining operator short-circuits and returns undefined.

const fromDb = undefined;const arr = fromDb || [];const r1 = arr?.includes('example');  // falseconst str = fromDb || '';const r4 = str?.includes('example');  // false

Solve the problem using Arrays

You can also use the Array.isArray method and the typeof str === ‘string’ comparison to verify that the value is an array or a string before calling the ‘includes()’ method.

const fromDb = undefined;const arr = fromDb || [];if (Array.isArray(arr)) {  const r2 = arr.includes('example');}

const fromDb = undefined;const str = fromDb || '';if (typeof str === 'string') {  const r5 = str.includes('example');}

Finally, you can use the || operator to provide a fallback value right before calling the includes() method.

const fromDb = undefined;const arr = fromDb || [];const r3 = (arr || []).includes('example');const str = fromDb || '';const r6 = (str || '').includes('example');

Conclusion

The “Cannot read property ‘includes’ of undefined” error occurs when calling the ‘includes() ‘method on an undefined value. To avoid this error, make sure to only call the ‘includes()’ method on data types that support it – arrays and strings.

You can use techniques like providing a fallback value, using optional chaining, or verifying the data type before calling ‘includes()’ to prevent this error from occurring.

It’s always a good idea to test your code and handle edge cases to ensure that your program is robust and can gracefully handle unexpected input. By following the tips above, you should be able to avoid the “Cannot read property ‘includes’ of undefined” error and keep your code running smoothly.