Skip to main content

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.

Labels:

Comments

Post a Comment

Popular posts from this blog

Top 10 Web Hosting Companies in 2024

 As the world of internet grows, the need for high-quality, reliable web hosting has never been more important. In this blog post, we'll delve into the top 10 web hosting companies in 2024, examining their features, pricing, and how they stack up against each other. Exploring The Importance of Reliable Web Hosting The lifeblood of the digital universe is web hosting. It's the sturdy anchor keeping every website afloat in the sea of the internet. Reliable web hosting is your ally in carving out your own piece of the online world, ensuring your site remains accessible, loading with speed, and guarding your precious data securely. It's like owning prime real estate in the metropolis of the internet, where your digital presence is steadfast, standing tall among the rest. This, in a nutshell, is the essential role of a trustworthy web hosting service. It's not just about the space; it's about the quality, reliability, and safety of that space. The Rise of Green Hostin...
Post a Comment
Read more

Cannot find module 'commander' error in Node.js

If you’re seeing the error Cannot find module 'commander' while working with Node.js, it means that the commander module is not installed in your project. This module is a popular command-line interface (CLI) module that helps you build CLIs for your Node.js applications. Installing the Commander Package To fix the error, you’ll need to install the commander package in your project. Here’s how you can do that: Open your terminal in your project’s root directory (where your package.json file is located). Run the following command: npm install commander This will add the commander package to the dependencies of your project. Restarting Your IDE and Development Server If installing the commander package doesn’t solve the error, try restarting your Integrated Development Environment (IDE) and your development server. Sometimes, a simple restart can fix issues like these. [Fixed]: ImportError: cannot import name ‘json’ from ‘itsdangerous...
Post a Comment
Read more

TypeError: got multiple values for argument in Python

When working with functions and classes in Python, you may encounter the “ TypeError: got multiple values for argument ” error. This error occurs when you pass the same argument multiple times in a function call, either by using both a positional and a keyword argument or by passing self as a variable in a class method. In this post, we will explore different ways to solve this error and prevent it from happening in the future. Understanding the error TypeError: got multiple values for argument in Python The “ TypeError: got multiple values for argument ” error occurs when you pass the same argument multiple times in a function call. This can happen in two ways: When passing a positional and a keyword argument for the same variable. def get_employee(name, **kwargs): return {'name': name, **kwargs}result = get_employee('Alice', name='Alice')print(result) In the example above, we pass the name argument as both a positional and a keyword argument, which causes t...
Post a Comment
Read more