You run your code, and instead of the output you expected, the console shows this:
TypeError: Cannot read properties of undefined (reading 'name')Nearly every JavaScript beginner meets this error in their first few weeks, and it frustrates people out of proportion to how simple it usually is. The message looks cryptic, but it is actually telling you exactly what went wrong — once you know how to read it. This post breaks the error down into the 7 causes that produce it in real beginner code, with the broken version and the fixed version side by side for each one.
What This Error Actually Means
Read the message backwards. The part in brackets — (reading ‘name’) — is the property your code tried to read. The important part is of undefined: the thing you tried to read it from was undefined.
So this code:
console.log(user.name);does not fail because name is wrong. It fails because, at the moment this line runs, user holds no value at all. JavaScript cannot open a box that does not exist, so it stops and throws this TypeError.
That single insight covers every case below: somewhere, a variable you expected to hold an object actually holds undefined. Your job is only to find out why. Older browsers word the same error as “Cannot read property ‘name’ of undefined” — it is the same problem.
First, Find the Line That Really Failed
The error in your console comes with a small stack trace. The first line under the error names your file and the exact line number, something like script.js:14. Go to that line — but do not stare at the property name. Look at the variable before the dot, and ask one question: where was this supposed to get its value?
A two-second habit that finds the answer almost every time:
console.log(user); // add this just ABOVE the failing line
console.log(user.name);If the first line prints undefined, you have confirmed the diagnosis, and one of the 7 causes below is yours.
Cause 1: The Variable Was Declared but Never Given a Value
let user;
console.log(user.name); // TypeError — user is undefinedDeclaring a variable with let and never assigning anything leaves it undefined. This often happens when the assignment sits inside an if block that did not run, or when you planned to fill the variable later and forgot.
Fix: assign a starting value, or check before you read:
let user = { name: "Guest" };
console.log(user.name); // GuestCause 2: The Function Forgot to Return Anything
A function with no return statement hands back undefined — even if it did useful work inside.
function findUser(id) {
const users = [{ id: 1, name: "Asha" }];
users.find(function (u) { return u.id === id; }); // found, but never returned!
}
const user = findUser(1);
console.log(user.name); // TypeError — findUser returned undefinedFix: return the result:
function findUser(id) {
const users = [{ id: 1, name: "Asha" }];
return users.find(function (u) { return u.id === id; });
}Cause 3: A Search Found Nothing — find() and Array Indexes
find() returns undefined when nothing matches, and an array index beyond the end of the array is also undefined. Both look like a normal object until you touch a property on them.
const products = [
{ id: 1, name: "Keyboard" },
{ id: 2, name: "Mouse" }
];
const item = products.find(function (p) { return p.id === 99; });
console.log(item.name); // TypeError — no product has id 99Fix: handle the “not found” case before using the result:
const item = products.find(function (p) { return p.id === 99; });
if (item) {
console.log(item.name);
} else {
console.log("Product not found");
}Cause 4: Your Code Ran Before the Data Arrived
This is the most common cause in real projects. fetch() takes time; the lines after it do not wait.
let profile;
fetch("https://api.example.com/users/1")
.then(function (res) { return res.json(); })
.then(function (data) { profile = data; });
console.log(profile.name); // TypeError — this line runs FIRST, profile is still undefinedFix: use the data where it actually exists — inside the promise, or with await (if you are new to how APIs and requests work, our guide on what an API is explains the request–response cycle behind this):
async function showProfile() {
const res = await fetch("https://api.example.com/users/1");
const profile = await res.json();
console.log(profile.name); // runs only after the data is here
}
showProfile();Cause 5: A Key in the Middle of the Path Does Not Exist
When you chain properties — response.data.profile.city — the error can come from a key in the middle. If profile is not in the data, profile is undefined, and reading .city from it throws.
const response = { data: { userName: "Asha" } };
console.log(response.data.profile.city); // TypeError — there is no "profile" keyThis usually means the API’s response shape is different from what you assumed. Fix: print the whole object first and look at its real shape, then read the keys that exist:
console.log(response.data); // { userName: "Asha" } — now you see the truth
console.log(response.data.userName); // AshaCause 6: The Function Was Called Without Its Argument
function showCity(user) {
console.log(user.address.city);
}
showCity(); // TypeError — user is undefined because nothing was passedA parameter nobody passed is undefined, and the error then appears one level deeper, at user.address. Fix: give the parameter a safe default, or guard at the top:
function showCity(user) {
if (!user) {
console.log("No user provided");
return;
}
console.log(user.address.city);
}Cause 7: You Used the Result of a Method That Returns Nothing
Some array methods transform data; others just loop and return undefined. forEach() is the classic trap — beginners often expect it to hand back a new array the way map() does.
const names = ["Asha", "Ravi"].forEach(function (n) { return n; });
console.log(names.length); // TypeError — forEach returned undefinedFix: use map() when you want a new array back:
const names = ["Asha", "Ravi"].map(function (n) { return n; });
console.log(names.length); // 2The Safety Toolkit — and When Not to Use It
Once you have found the cause, JavaScript gives you three tools for values that are allowed to be missing:
// 1. Optional chaining — stops quietly instead of throwing
console.log(user?.address?.city); // undefined, no error
// 2. A fallback with ?? — used only when the value is null or undefined
const city = user?.address?.city ?? "Unknown";
// 3. A guard clause — handle the missing case openly (see Cause 6)One honest warning: optional chaining everywhere is a smell, not a solution. If a value should exist and it is undefined, ?. hides the real bug — a forgotten return, a wrong key — and lets it surface later in a stranger place. Use the toolkit where “missing is acceptable” (an optional profile field, a search with no match), and fix the cause where it is not. (Optional chaining arrived after ES6, but if the basics of modern syntax still feel shaky, work through our JavaScript ES6 features guide first — it will make the code in this post easier to read.)
Common Mistakes When Fixing This Error
- Wrapping the line in try/catch and moving on. The error disappears; the missing data does not. Your page now fails silently instead of loudly.
- Blaming the API before logging the response. In Cause 5 situations, one console.log of the raw response settles in seconds what guessing takes an hour to not settle.
- Using || for every fallback. value || “default” also replaces legitimate values like 0 and “”. Use ?? when only null/undefined should trigger the fallback.
- Fixing the line the error names instead of the lines above it. The throw line is where the problem showed up. The cause is almost always earlier — an assignment, a return, a fetch.
Frequently Asked Questions
What is the difference between “of undefined” and “of null”? Both errors mean “you tried to read a property of nothing”. The difference is where the nothing came from: undefined means a value was never assigned or a key does not exist; null is an empty value that code (or a DOM/API method) deliberately set. The fixes in this post work for both.
Why does the error appear only sometimes? Because it is data-dependent. The same line works while a search finds a match and fails the first time it does not, or works on a fast network and fails when a fetch is slow. Intermittent does not mean mysterious — it means one of the 7 causes depends on data or timing.
Is this error my fault or the library’s? Almost always the data in your own code: a variable, a missing return, a response shape. Read the first file-and-line entry in the stack trace that points to your file — that is where to start.
Does this happen in other languages too? Yes, under other names: Java calls it a NullPointerException and Python raises an AttributeError when you use a None value. The habit transfers — find what should have held the value, then find why it did not.
I added ?. and the error stopped. Am I done? Only if that value is genuinely allowed to be missing. If it should have had data, you have moved the bug, not fixed it — go back to the 7 causes and find which one is yours.
The One Habit to Take From This Post
Do not fear this error, and do not fight the line it names. Print the variable, walk it back to where it was supposed to get its value, and match your situation to one of the 7 causes. That two-minute routine will solve this error for the rest of your JavaScript journey — and if you are still early in that journey, our JavaScript roadmap for beginners lays out the order in which to build these fundamentals.
