Cannot Read Property of Undefined - The Most Common JS Error

**TypeError: Cannot read property 'name' of undefined**

Most common JavaScript error. Ever.

Why It Happens

You try to access a property on something that doesn't exist.

```javascript const user = undefined; console.log(user.name); // boom ```

Common Scenarios

**1. API returns nothing** ```javascript const response = await fetch('/api/user'); const data = await response.json(); console.log(data.user.name); // data.user might be undefined ```

**2. Array element doesn't exist** ```javascript const users = [{name: 'John'}]; console.log(users[5].name); // users[5] is undefined ```

**3. Object property missing** ```javascript const config = { theme: 'dark' }; console.log(config.user.name); // config.user is undefined ```

Fix #1: Check Before Access

```javascript if (user && user.name) { console.log(user.name); } ```

Ugly but works.

Fix #2: Optional Chaining (Modern JS)

```javascript console.log(user?.name); ```

If user is undefined, returns undefined instead of throwing error.

Deep nesting: ```javascript console.log(user?.address?.street?.name); ```

One undefined anywhere? Returns undefined safely.

Fix #3: Default Values

```javascript const name = user?.name || 'Guest'; ```

Or with nullish coalescing: ```javascript const name = user?.name ?? 'Guest'; ```

Difference: `??` only defaults on null/undefined, not on 0 or empty string.

Fix #4: Destructuring with Defaults

```javascript const { name = 'Guest', age = 0 } = user || {}; ```

Even if user is undefined, you get defaults.

Fix #5: Try-Catch (Last Resort)

```javascript try { console.log(user.name); } catch (error) { console.log('User not found'); } ```

Don't do this unless you have no choice. Slow and ugly.

Real Example

I was building a dashboard. Users had optional profile pictures:

**Bad code:** ```javascript <img src={user.profile.picture.url} /> ```

New users had no profile object. App crashed.

**Fixed:** ```javascript <img src={user?.profile?.picture?.url || '/default.png'} /> ```

The Array Problem

```javascript const users = await fetchUsers(); const firstUser = users[0]; console.log(firstUser.name); // what if users is empty? ```

**Better:** ```javascript const firstUser = users?.[0]; console.log(firstUser?.name); ```

Note: `users?.[0]` also works with optional chaining!

Function Calls

```javascript user.getName(); // if user is undefined, crashes ```

**Fix:** ```javascript user?.getName?.(); ```

Checks if user exists AND if getName is a function.

The Response Object

Common in fetch calls: ```javascript const response = await fetch('/api/data'); const data = await response.json(); return data.results[0].title; // 💣 ```

Any of these could be undefined. Fix: ```javascript const title = data?.results?.[0]?.title ?? 'No title'; ```

My Pattern

I validate API responses: ```javascript function validateUser(data) { if (!data || !data.user) { throw new Error('Invalid user data'); } return data.user; }

try { const user = validateUser(apiResponse); console.log(user.name); // safe now } catch (error) { // handle error properly } ```

Browser Support

Optional chaining works in: - Chrome 80+ - Firefox 74+ - Safari 13.1+ - Node 14+

For older browsers, Babel transpiles it.

Bottom Line

1. Use optional chaining (`?.`) 2. Provide defaults (`??`) 3. Validate data from APIs 4. Never assume nested objects exist

This error cost me a production outage once. Never again.