JavaScript TypeError: Cannot read properties of undefined — Fixed

What Does This Error Mean?

JavaScript throws TypeError: Cannot read properties of undefined (reading 'x') when you try to access a property or call a method on a value that is undefined. The runtime expected an object but got nothing. It is one of the most common runtime errors in every JS codebase.

Common Causes (With Code)

1. Accessing a property on a function that returns nothing

Functions that don't explicitly return a value always return undefined. Chaining a property access on the result crashes immediately.

❌ Causes the error

function getUser() {
  const user = { name: "Alice" };
  // forgot to return!
}

const user = getUser();
console.log(user.name);
// TypeError: Cannot read properties of undefined (reading 'name')

2. Async data that hasn't loaded yet

Accessing a property before the async response arrives means the variable is still undefined.

❌ Causes the error

let config;

fetch("/api/config")
  .then(res => res.json())
  .then(data => { config = data; });

// Runs BEFORE fetch resolves — config is still undefined
console.log(config.timeout);
// TypeError: Cannot read properties of undefined (reading 'timeout')

3. A missing key in a nested object

Drilling into a deeply nested object with a key that doesn't exist produces undefined at that level, and the next dot access crashes.

❌ Causes the error

const response = { data: { users: [] } };

// 'profile' key doesn't exist on data
console.log(response.data.profile.name);
// TypeError: Cannot read properties of undefined (reading 'name')

How to Fix It

Fix 1 — Add the missing return statement

✅ Correct

function getUser() {
  const user = { name: "Alice" };
  return user; // ← explicit return
}

const user = getUser();
console.log(user.name); // "Alice"

Fix 2 — Use Optional Chaining (?.)

Optional Chaining short-circuits to undefined instead of throwing when any link in the chain is nullish. Combine with ?? to provide a safe default.

✅ Correct

const response = { data: {} };

// Safe — returns undefined instead of crashing
const name = response?.data?.profile?.name ?? "Anonymous";
console.log(name); // "Anonymous"

Fix 3 — Guard with an explicit null-check before access

✅ Correct

async function loadConfig() {
  const res = await fetch("/api/config");
  const config = await res.json();

  if (config) {
    console.log(config.timeout); // safe — config is defined here
  }
}

Fix 4 — Provide default values with destructuring

✅ Correct

// Destructure with a default to avoid undefined objects
const { profile = {} } = response.data;
console.log(profile.name ?? "No name"); // never crashes

Frequently Asked Questions