How to Fix JavaScript TypeError: Cannot read properties of undefined

In this tutorial, you'll learn about How to Fix JavaScript TypeError: Cannot read properties of undefined. We cover key concepts, practical examples, and best practices.

The Problem

JavaScript throws TypeError: Cannot read properties of undefined (reading 'X') when you try to access a property on undefined or null. This commonly happens with API responses, missing object keys, or uninitialized variables.

Quick Fix

Step 1: Find what is undefined

The error tells you which property was being accessed. Use console.log to inspect the parent object:

node -e "
const user = { name: 'Alice' };
console.log(user.address.city);
"

TypeError: Cannot read properties of undefined (reading 'city')

Print the object at each level to locate the missing key:

node -e "
const user = { name: 'Alice' };
console.log('user:', user);
console.log('user.address:', user.address);
"

user: { name: 'Alice' }
user.address: undefined

Step 2: Use optional chaining (?.)

Optional chaining returns undefined instead of throwing:

node -e "
const user = { name: 'Alice' };
console.log(user?.address?.city);
"

undefined

Step 3: Provide default values with nullish coalescing (??)

Combine optional chaining with a fallback value:

node -e "
const user = { name: 'Alice' };
const city = user?.address?.city ?? 'Unknown';
console.log(city);
"

Unknown

Step 4: Guard with an if check

For older JavaScript environments, use explicit conditionals:

node -e "
const user = { name: 'Alice' };
let city = 'Unknown';
if (user && user.address) {
    city = user.address.city;
}
console.log(city);
"

Unknown

Alternative Solutions

Use lodash get for deep property access

Lodash provides a safe get function for nested objects:

const _ = require("lodash");
const user = {};
const city = _.get(user, "address.city", "Unknown");

Use a data transformation pipeline

Normalize API responses before accessing properties:

const normalizeUser = (data) => ({
    name: data?.name ?? "Anonymous",
    city: data?.address?.city ?? "Unknown",
});

Common Mistakes to Avoid

Assuming API responses always have the same structure. An API may return null for optional fields. Use optional chaining on every nested access.

Not checking if an array element exists before accessing it. arr[0].name fails if the array is empty. Check arr.length > 0 first.

Destructuring undefined objects. const { name } = undefined throws TypeError. Provide a default: const { name } = user || {}.

Pro Tips

Use default parameters in function definitions. function greet(name = "Guest") provides a fallback without needing null checks inside the function body.

Use Array.isArray() before array methods. Check if a value is an array before calling .map(), .filter(), or .reduce() to avoid TypeError on null or undefined.

Normalize data at the API boundary. Transform API responses into a consistent shape immediately after receiving them, with defaults for every field.

Prevention

• Validate API responses with if (response.data) before accessing nested properties.
• Use optional chaining (?.) for all deep property access.
• Initialize objects with default values: const config = { theme: { color: 'blue' } } instead of const config = {}.