Quick Answer

Object is undefined/null when accessing its properties. Use optional chaining (?.) or check if object exists before accessing properties.

Understanding the Issue

This common TypeError happens when attempting to read properties from undefined or null values. Common causes include uninitialized objects, failed API calls, missing object properties, or incorrect destructuring. The error indicates that the expected object does not exist at the point of property access. Modern JavaScript provides optional chaining and nullish coalescing operators to handle these scenarios gracefully.

The Problem

This code demonstrates the issue:

Javascript Error 
// Problem 1: Accessing undefined object property
let user;
console.log(user.name); // TypeError: Cannot read property name of undefined

// Problem 2: Failed API response
function processApiData(response) {
    // If response is undefined/null
    return response.data.users; // TypeError if response is undefined
}

// Problem 3: Missing nested property
const config = {
    app: {
        name: "MyApp"
    }
};

console.log(config.database.host); // TypeError: Cannot read property host

processApiData(undefined);

The Solution

Here's the corrected code:

Javascript Fixed 
// Solution 1: Check before accessing
let user;

// Safe property access
if (user && user.name) {
    console.log("User name:", user.name);
} else {
    console.log("User or name not available");
}

// Initialize object properly
user = { name: "John", age: 30 };
console.log("User name:", user.name); // Now works

// Solution 2: Optional chaining (modern approach)
const userData = undefined;

// Safe access with optional chaining
console.log("Name:", userData?.name ?? "No name");
console.log("Email:", userData?.contact?.email ?? "No email");

// With proper data
const validUser = {
    name: "Alice",
    contact: { email: "alice@example.com" }
};

console.log("Valid name:", validUser?.name);
console.log("Valid email:", validUser?.contact?.email);

// Solution 3: Defensive programming
function processApiData(response) {
    // Check if response exists
    if (!response) {
        console.log("No response received");
        return [];
    }
    
    // Check if data property exists
    if (!response.data) {
        console.log("No data in response");
        return [];
    }
    
    // Check if users array exists
    return response.data.users || [];
}

// Test with different scenarios
console.log("Undefined response:", processApiData(undefined));
console.log("Empty response:", processApiData({}));

// Solution 4: Safe nested property access
const config = {
    app: {
        name: "MyApp"
    }
};

// Modern optional chaining
const port = config.database?.port ?? 3000;
console.log("Port:", port);

// Solution 5: Object destructuring safety
function handleUserData(userData) {
    // Safe destructuring with defaults
    const { name = "Unknown", email = "No email" } = userData || {};
    
    console.log(`User: ${name}, Email: ${email}`);
}

handleUserData(undefined); // Safe
handleUserData({ name: "John" }); // Safe

Key Takeaways

Use optional chaining (?.) for safe property access. Check if objects exist before accessing properties. Initialize objects properly. Use default values with nullish coalescing (??).