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

Best Health Insurance For Students in USA

Whether you're a domestic or international student studying in the USA, having health insurance coverage is not just a luxury, it's a necessity. With the high cost of healthcare in the USA, having the best health insurance for students in the USA can provide you with peace of mind while you focus on your studies. Understanding the Need for Health Insurance for Students Being a student, the likelihood of you being healthy and not needing frequent medical attention is quite high. But life is unpredictable, and emergencies can arise at any time. If a sudden injury or illness strikes, the resulting healthcare costs can become a major financial burden if you are uninsured. With the steep price of medical care in the United States, even a simple trip to the emergency room can lead to exorbitant bills. By having a good health insurance plan, students can mitigate these financial risks. Such plans cover a wide array of medical services, ranging from regular preventive care to prolonge...
Post a Comment
Read more

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

Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'

Are you encountering the error “attempted import error: ‘switch’ is not exported from ‘react-router-dom'” or variations like “export switch was not found in react-router-dom” or “switch is not exported from react-router”? If so, you’re not alone—this is a common problem that many React developers face when using the ‘react-router-dom’ library. In this blog post, we’ll explore the causes of this error and provide a few solutions to help you fix it and get your ‘React application up and running. What Causes the “Export ‘Switch’ (imported as ‘Switch’) was not found in ‘react-router-dom'” Error? This error occurs when a developer tries to import the ‘Switch’ component from the ‘react-router-dom’ library, but the component is not actually exported by the library. For example, the following code will trigger the error: import { Switch } from 're...
Post a Comment
Read more