The error TypeError: Cannot read property 'x' of undefined is one of the most common JavaScript errors. It occurs when you try to access a property on a variable that is undefined or null.
// ⌠Problem
let user;
console.log(user.name); // TypeError!
// ✅ Solution 1: Check if exists
if (user) {
console.log(user.name);
}
// ✅ Solution 2: Optional chaining (ES2020+)
console.log(user?.name); // undefined (no error)
// ✅ Solution 3: Default value
const name = user?.name || 'Guest';This is the most basic case where you try to access a property on a variable that hasn't been initialized.
In React or Vue, this error commonly occurs when trying to render data that hasn't been fetched yet.
When working with APIs, the response might not always contain the expected data structure.
Trying to use array methods like map, filter, or forEach on undefined.
let user;
console.log(user.name); // TypeError: Cannot read property 'name' of undefined
// Or with objects
let data = {};
console.log(data.user.name); // TypeError if data.user is undefined// Solution 1: Check before accessing
let user;
if (user && user.name) {
console.log(user.name);
}
// Solution 2: Optional chaining (recommended)
let user;
console.log(user?.name); // undefined (no error)
// Solution 3: Initialize with default
let user = { name: 'Guest' };
console.log(user.name); // 'Guest'
// Solution 4: Nested optional chaining
let data = {};
console.log(data?.user?.name); // undefined (no error)function UserProfile() {
const [user, setUser] = useState(); // undefined initially
useEffect(() => {
fetch('/api/user')
.then(res => res.json())
.then(data => setUser(data));
}, []);
return <div>{user.name}</div>; // TypeError on first render!
}function UserProfile() {
const [user, setUser] = useState(); // undefined initially
useEffect(() => {
fetch('/api/user')
.then(res => res.json())
.then(data => setUser(data));
}, []);
// Solution 1: Early return with loading state
if (!user) return <div>Loading...</div>;
return <div>{user.name}</div>; // Safe now!
}
// Solution 2: Optional chaining in JSX
function UserProfile() {
const [user, setUser] = useState();
useEffect(() => {
fetch('/api/user')
.then(res => res.json())
.then(data => setUser(data));
}, []);
return <div>{user?.name || 'Loading...'}</div>;
}
// Solution 3: Initialize with default value
function UserProfile() {
const [user, setUser] = useState({ name: 'Loading...' });
useEffect(() => {
fetch('/api/user')
.then(res => res.json())
.then(data => setUser(data));
}, []);
return <div>{user.name}</div>;
}fetch('/api/user')
.then(res => res.json())
.then(data => {
console.log(data.user.name); // TypeError if data.user is undefined
});// Solution 1: Check before accessing
fetch('/api/user')
.then(res => res.json())
.then(data => {
if (data && data.user && data.user.name) {
console.log(data.user.name);
} else {
console.log('User data not available');
}
});
// Solution 2: Optional chaining
fetch('/api/user')
.then(res => res.json())
.then(data => {
console.log(data?.user?.name || 'No name');
});
// Solution 3: Try-catch with async/await
async function getUser() {
try {
const res = await fetch('/api/user');
const data = await res.json();
console.log(data?.user?.name || 'No name');
} catch (error) {
console.error('Failed to fetch user:', error);
}
}let users;
users.map(user => user.name); // TypeError: Cannot read property 'map' of undefined// Solution 1: Initialize as empty array
let users = [];
users.map(user => user.name); // Works, returns []
// Solution 2: Check before using
let users;
if (users && Array.isArray(users)) {
users.map(user => user.name);
}
// Solution 3: Use optional chaining with default
let users;
const names = users?.map(user => user.name) || [];
// Solution 4: Nullish coalescing
let users;
(users ?? []).map(user => user.name);This error occurs when you try to access a property on a variable that is undefined or null. Common causes include uninitialized variables, async data not loaded yet, or API responses missing expected data.
Check if the object exists before accessing its properties using if statements, optional chaining (?.), or initialize variables with default values.
Optional chaining (?.) is an ES2020 feature that safely accesses nested properties. If any intermediate value is null/undefined, it returns undefined instead of throwing an error.
In React, check if data exists before rendering, use optional chaining in JSX, or initialize state with default values. Show loading states while data is being fetched.
Yes, TypeScript can catch many of these errors at compile time through strict null checks and type definitions, helping you write safer code.
Explore 500+ free tutorials across 20+ languages and frameworks.