Introduction

The “Cannot read property ‘X’ of undefined” error is one of the most common errors encountered by JavaScript developers. It usually occurs when trying to access a property of an object that is undefined or null. This article explains the common causes of this error and how to resolve it.

Common reasons

1. Access to a property of an undefined object :

let user;
console.log(user.name); // Error: Cannot read property 'name' of undefined

2. Access to a property of an undefined nested object :

let user = { address: null };
console.log(user.address.city); // Error: Cannot read property 'city' of null

3. Use of API data not available yet :

let response = fetchDataFromAPI();
console.log(response.data); // Error if response is undefined or null

Solutions

1. Verifying object definitions :
   Before accessing a property, make sure the object is defined :

let user;
if (user) {
    console.log(user.name);
}

2. Optional operator (Optional Chaining) :
   Use the optional “?.” operator to avoid errors when the object or property is undefined:

let user = { address: null };
console.log(user?.address?.city); // undefined without error

3. Default Values :
   Use default values for potential null or undefined properties:

let user = { address: null };
console.log(user.address ? user.address.city : 'Address not available');

Exemple

Here's a practical example combining several of these techniques to resolve the error:

function getUserCity(user) {
    return user?.address?.city || 'City not available';
}

let user = {
    name: 'Alice',
    address: {
        city: 'Wonderland'
    }
};

console.log(getUserCity(user)); // Wonderland
console.log(getUserCity(null)); // City not available

Conclusion

The “Cannot read property ‘X’ of undefined” error can be resolved with appropriate checks and the use of techniques such as the optional operator and default values. By following these tips, you can make your code more robust and avoid these common JavaScript errors.