Fix: TypeError: Cannot read properties of undefined (reading ‘x’)

This is the most common JavaScript runtime error. The full message names the property you tried to read, for example:

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

It means the thing to the left of .name was undefined. A variant says (reading 'x') on null. Older browsers and Node versions phrase it as Cannot read property 'name' of undefined, and Safari says undefined is not an object. All mean the same thing.

Find the missing value

The property in the message is not the problem; the object before it is. In order.customer.address.city failing with (reading 'city'), it is address that is undefined.

1. Open the stack trace and go to the first line that is in your own code.
2. Log or inspect each step of the chain: console.log(order, order.customer), or set a breakpoint and hover the values.
3. Ask why that value is missing, before deciding how to guard it.

Usual causes

• Data not loaded yet. A UI renders before a fetch finishes, so user is still undefined on the first render.
• A missing await. const data = getData() gives a promise; data.items is undefined.
• API shape differs from what you expected. The field is results, not items, or it is nested one level deeper.
• Array index out of range. rows[0].id on an empty array. find() returning undefined when nothing matched.
• Lost this. Passing obj.method as a callback detaches it, so this.config fails. Use an arrow function or .bind(obj).
• Typo in a property name, including case: userId vs userID.

Fixes

If the value should always exist, fix the cause: await the promise, correct the property path, or wait for data before rendering. Do not just hide the error.

If the value is legitimately optional, guard it. Optional chaining ?. stops and returns undefined if the left side is null or undefined. The nullish coalescing operator ?? then supplies a default:

const city = order.customer?.address?.city ?? "Unknown";

const first = rows[0]?.id;
const count = (items ?? []).length;
api.onReady?.(); // call only if the function exists

Prefer ?? over || for defaults. || also replaces valid values like 0 and empty strings: 0 || 10 is 10, but 0 ?? 10 is 0.

For early exits, a plain check is often the clearest:

function shipOrder(order) {
  if (!order?.customer) {
    throw new Error(`Order ${order?.id} has no customer`);
  }
  // order.customer is safe from here on
}

Prevent it

• TypeScript with strict mode reports most of these before the code runs, as Object is possibly ‘undefined’.
• Validate external data (API responses, JSON files, form input) at the boundary, so the rest of the code can trust its shape.
• In UI code, render a loading state until data exists instead of sprinkling ?. everywhere.
• Do not overuse ?.: chaining it everywhere turns an obvious crash into a silent undefined that shows up somewhere harder to debug.