Reading "Uncaught TypeError" Without Panicking

"Uncaught TypeError: Cannot read properties of undefined (reading 'name')." It looks scary. It's actually one of the most helpful errors JavaScript gives you. It says exactly what was missing and which property you tried to use. Read it in order, find the line, check the value, fix the cause. That's the whole method.

What it looks like

Here's a real one in Chrome, from a page where a selector has a typo:

const status = document.querySelector(".stauts");
status.textContent = "Paid";

Read it in this order

1. Uncaught: nothing caught this error, so the script stopped here. Lines after it didn't run. That's why other things on the page may also be broken.
2. TypeError: you used a value in a way its type doesn't allow. Here, using a property on null.
3. The message: Cannot set properties of null (setting 'textContent'). The value before .textContent is null. If you were reading instead of setting, it says Cannot read properties of null (reading '...').
4. The location: script.js:2 on the right. Click it and DevTools opens the line.

So on line 2, status is null. The question is never "why is JavaScript broken?" It's "why is this value null or undefined here?"

Check what's actually missing

On the error line, find the thing just before the dot. That's what's null or undefined. If the line has a chain like order.customer.address.city, the message tells you which property it tried to read. (reading 'city') means address was missing, not city.

Log it right before the error line:

console.log("status:", status);

Or set a breakpoint: click the line number in the Sources tab, reload, and hover over the variables.

The four usual causes

1. A selector that matched nothing (null). querySelector returns null when nothing matches. Check the spelling, # for id, . for class, and that the script runs after the element exists (script at the end of <body>, or defer).

2. An array position that doesn't exist (undefined).

const cart = [{ name: "Coffee" }];
try {
  console.log(cart[1].name);
} catch (error) {
  console.log(error.message);
}

Cannot read properties of undefined (reading 'name')

There's only one item, at position 0. cart[1] is undefined. Usually it's an off-by-one in a loop (<= instead of <) or an empty list you didn't expect.

3. find() that found nothing (undefined).

const products = [{ id: 1, price: 95 }];
const p = products.find(item => item.id === 2);
console.log(p);

undefined

p.price would crash. Check the result before using it.

4. Data that hasn't arrived yet, or has a different shape. Data from a server can be missing a field, or not loaded yet when your code runs. Log the actual data once and compare it with what your code expects. user.profile.email fails if this user has no profile.

Fix the cause, not the message

You can make the error disappear with optional chaining:

const order = {};
console.log(order.customer?.address?.city);

undefined

?. stops and gives undefined instead of throwing. That's the right tool when the value is allowed to be missing, for example an optional address. It's the wrong tool when the value should be there. Then you've hidden a bug: the page doesn't crash, it just shows nothing, and nobody knows why.

Other TypeErrors you'll meet

• x is not a function: you added () to something that isn't a function. Often a typo in a method name (queryselector), or a variable with the same name as a function.
• Assignment to constant variable: you reassigned a const. Use let if the change is intended.
• x is not iterable: you used for...of on something that isn't a list, like a plain object or undefined.

Next time you see a TypeError, before touching the code, answer two questions: which value was missing, and should it have been there?