JavaScript usually lets you make small mistakes without stopping the program. But sometimes, even one missing value can cause an error and stop the code from running.
You may see an error like this:
TypeError: Cannot read properties of undefinedYou may also see something more specific, such as:
Cannot read properties of undefined (reading 'name')At first, this error message looks confusing. But it is actually telling you something useful: Your code is trying to get something from a value that does not exist yet.
This error is usually easy to fix once you find which value is undefined.
What Does “Cannot Read Properties of Undefined” Mean?
Let’s start with a simple example:
let user;
console.log(user.name);Here, user does not contain anything. Its value is undefined.
Then JavaScript sees:
user.nameYour code is basically saying, “Give me the name inside user.”
But there is no user to look inside.
So JavaScript stops and shows:
TypeError: Cannot read properties of undefined (reading 'name')Think of it like opening an empty box and asking for the toy inside it. If the box itself is missing, JavaScript cannot find the toy.
That is what this error means.
Why Does This Error Happen?
The error can happen for several reasons. Sometimes a variable was never given a value. Other times, an object exists but one of its nested values is missing.
Here are the most common reasons.
The Variable Is Undefined
This is the simplest case.
let person;
console.log(person.name);The variable person exists, but it has no value.
You can fix it by giving it an object:
let person = {
name: "John"
};
console.log(person.name);Now JavaScript has something to read.
You Are Using the Wrong Object Name
A small spelling mistake can also cause the problem.
For example:
const user = {
name: "John"
};
console.log(users.name);The object is called user, but the code uses users.
That difference is enough to cause an error.
Make sure the variable name you use is the same one you created:
console.log(user.name);A Nested Property Does Not Exist
Sometimes the first object exists, but something inside it does not.
const user = {
profile: {
name: "John"
}
};
console.log(user.profile.name);This works because both user and profile exist.
But look at this:
const user = {};
console.log(user.profile.name);Here, user exists, but user.profile is undefined.
JavaScript then tries to read .name from undefined.
That causes the error.
How to Fix “Cannot Read Properties of Undefined”
Now that you know why the error happens, let’s look at the common ways to fix it.
Use Optional Chaining
One of the easiest ways to safely read a value that may be missing is optional chaining.
Instead of:
console.log(user.profile.name);you can write:
console.log(user?.profile?.name);The ?. tells JavaScript:
“Only continue if this value exists.”
If user or profile is missing, JavaScript returns undefined instead of crashing.
For example:
const user = {};
console.log(user?.profile?.name);The result is:
undefinedThere is no crash.
Use optional chaining when the value is allowed to be missing.
Use a Default Value
Sometimes you do not want undefined. You want a normal value instead.
For this, you can use the ?? operator.
const user = {};
const name = user?.name ?? "Guest";
console.log(name);The result is:
GuestThis means:
“If user.name has a value, use it. Otherwise, use Guest.”
This is useful when showing information on a website.
For example:
const username = user?.name ?? "Unknown User";Now your page can still show something even when the name is missing.
Check Your Arrays Carefully
This error is also common with arrays.
Consider this code:
const users = [];
console.log(users[0].name);The array is empty.
So:
users[0]is undefined.
Then JavaScript tries to read:
undefined.nameThat is not possible.
You can first check whether the item exists:
if (users[0]) {
console.log(users[0].name);
}Or use optional chaining:
console.log(users[0]?.name);This prevents the error when the array has no first item.
Check Array Index Numbers
Another common mistake is using an index that does not exist.
For example:
const fruits = ["Apple", "Banana"];
console.log(fruits[5].length);There is no item at index 5.
The array only has indexes 0 and 1.
So fruits[5] becomes undefined.
You can check the array before using the value:
if (fruits[5]) {
console.log(fruits[5].length);
}Or safely access it:
console.log(fruits[5]?.length);Always make sure the array item exists before reading something from it.
Check What Your Function Returns
Sometimes the problem comes from a function.
Look at this example:
function getUser() {
// Nothing is returned
}
const user = getUser();
console.log(user.name);The function does not return anything.
So getUser() gives you undefined.
Then this line fails:
user.nameThe fix is to return the value you need:
function getUser() {
return {
name: "John"
};
}
const user = getUser();
console.log(user.name);Now the function gives JavaScript an actual object.
Check Your return Statement
A small mistake with return can also cause this problem.
For example:
function getUser() {
const user = {
name: "John"
};
}The function creates user, but it never returns it.
So this:
const result = getUser();
console.log(result.name);will fail.
Add return:
function getUser() {
const user = {
name: "John"
};
return user;
}Now result contains the object.
Whenever you get this error after calling a function, check what that function actually returns.
Check the Result of find()
The find() method can return undefined when it cannot find the item you are looking for.
For example:
const users = [
{ name: "John" },
{ name: "Mike" }
];
const user = users.find(user => user.name === "David");
console.log(user.name);There is no user named David in the array.
So find() returns undefined, and JavaScript cannot read name from it.
You can safely check the result:
if (user) {
console.log(user.name);
}Or use optional chaining:
console.log(user?.name);If the user must exist, find out why find() did not return the expected item instead of simply hiding the problem.
Check API Data
Data from an API may not always look the way your code expects.
For example, your code may expect:
{
user: {
name: "John"
}
}But the actual response might be:
{}If you write:
console.log(data.user.name);then data.user is undefined.
First, check what you actually received:
console.log(data);If the value may be missing, you can safely access it:
console.log(data?.user?.name);Also check why the expected data is missing. The API may return a different property name or a different structure.
Make Sure the Data Has Loaded
Sometimes the value is not missing forever. Your code is simply trying to use it too early.
For example:
fetch("/api/user")
.then(response => response.json())
.then(data => {
console.log(data.user.name);
});The user data becomes available after the response comes back.
If you try to use the data before it has loaded, the value may still be undefined.
Make sure you use the data after the API response arrives.
How to Find the Exact Cause
If you still cannot find the problem, start with the exact line shown in the error.
For example:
TypeError: Cannot read properties of undefined (reading 'name')
at app.js:15:20Here, app.js:15:20 tells you where to look.
Suppose the line is:
console.log(order.customer.address.city);Do not guess which part is missing.
Check each part:
console.log(order);
console.log(order?.customer);
console.log(order?.customer?.address);This makes it easier to find the exact value that is undefined.
Use console.log() to Find the Missing Value
A few simple console.log() statements can save a lot of time.
For example:
console.log("user:", user);
console.log("profile:", user?.profile);
console.log("name:", user?.profile?.name);Look at the console and see where the value disappears.
If you get:
user: { profile: undefined }
profile: undefined
name: undefinedyou know that the problem is with profile.
Now you can check why profile was not created or loaded.
Check for Small Spelling Mistakes
Sometimes there is no complicated problem at all. A small spelling mistake is enough.
For example:
const user = {
name: "John"
};
console.log(user.nmae);The correct property is:
user.namenot:
user.nmaeAlso check variable names carefully:
const user = {
name: "John"
};
console.log(users.name);Here, user and users are different names.
So whenever you see this error, check your spelling before changing anything else.
What If Optional Chaining Does Not Fix the Real Problem?
Optional chaining is useful, but it should not be used just to hide every error.
For example:
user?.profile?.namewill stop the error, but it does not explain why profile is missing.
If profile should always be there, you should fix the code that creates or loads profile.
Use optional chaining when a value can normally be missing.
If the value should always exist, find out why it is missing instead.
A Simple Way to Fix the Error
When you see:
Cannot read properties of undefinedfollow these steps.
First, check the line shown in the error.
Look at the code around that line and find the value before the property.
For example:
user.profile.nameNext, check which value is undefined.
You can use:
console.log(user);
console.log(user?.profile);Then find out why it is missing.
Maybe the object was never created, a function forgot to return it, an array item does not exist, the API returned different data, or the data has not loaded yet.
Finally, use the correct fix.
That may mean adding return, checking the value, waiting for data, fixing a typo, or using optional chaining.
Frequently Asked Questions
What does “Cannot Read Properties of Undefined” mean?
It means JavaScript is trying to read a property from a value that is undefined.
For example:
let user;
console.log(user.name);Here, user has no value, so JavaScript cannot read name.
How do I fix “Cannot Read Properties of Undefined”?
Find the line causing the error and check which value is undefined.
Then fix the reason that value is missing. You may need to add a missing return, check an array item, wait for API data, fix a spelling mistake, or use optional chaining.
Final Thoughts
The “Cannot Read Properties of Undefined” error usually means one simple thing: your code expected a value, but that value was not there.
Start with the exact line shown in the error. Check the value before the property and find out why it became undefined.
In many cases, the fix is simple. You may need to add a missing return, check an array item, wait for API data, fix a spelling mistake, or safely access the property with ?..