Fix “Uncaught ReferenceError: is Not Defined” in JavaScript
The error “Uncaught ReferenceError: ___ is not defined” shows up when your JavaScript tries to use something that simply isn’t available — a variable, a function, anything. Most of the time it’s because the name is misspelled, never declared, or your script runs before the thing you’re trying to use even exists. It’s a small mistake that can break your whole script, but the fix is usually straightforward once you know where to look.
In this guide, I’ll break down the real reasons this error shows up and show you the exact steps to fix it — no matter how new you are to JavaScript.
Introduction
So what does “Uncaught ReferenceError: ___ is not defined” actually mean? In simple terms, your code is trying to use a variable, function, or object that doesn’t exist in the place where you’re calling it. It’s like pointing at “that red car” when there isn’t a single red car anywhere around — JavaScript can’t find what you’re referring to, so it throws the error.
This mistake hits beginners all the time, but even experienced developers run into it when refactoring or juggling multiple scripts. The good thing is that once you understand why it happens, tracking down the cause becomes much easier and fixing it usually takes a minute or two.
Why “Uncaught ReferenceError: _ is not defined” Happens (and How to Fix It Fast)
When this error pops up, JavaScript is basically telling you: “You’re using something that doesn’t exist here.”
Here’s every real-world reason this happens — with the exact fix right below it.
1. Typos and Case Mismatches
This is the #1 culprit. JavaScript treats myVariable and myvariable as two different things.
Wrong:
console.log(usernme);Fixed:
let userName = "Alice";
console.log(userName); // Correct spellingFix: Match the exact name where it’s defined. If VS Code autocomplete isn’t showing it, assume you misspelled it.
2. Variable Not Declared
If you use a variable without var, let, or const, JavaScript throws a ReferenceError.
Wrong:
console.log(userName); // Not declared anywhereFixed:
let userName = "Bob";
console.log(userName);3. Scope Problems
A variable declared inside a function is not accessible outside of it.
This bites a lot of beginners.
Wrong:
function calculate() {
let total = 50;
}
console.log(total); // ReferenceErrorFixed:
function calculate() {
let total = 50;
return total;
}
console.log(calculate());Fix: Either return values or declare the variable in the correct scope.
4. Using let/const Before Initialization (Temporal Dead Zone)
The line runs before the variable exists.
Wrong:
console.log(price);
let price = 200;Fixed:
let price = 200;
console.log(price);Fix: Move the declaration above the usage.
5. Scripts Loading in the Wrong Order
Your code might depend on another script that loads later.
Wrong:
<script src="app.js"></script>
<script src="utils.js"></script> <!-- app.js expects utils.js first -->Fixed:
<script src="utils.js"></script>
<script src="app.js"></script>Fix: Load dependency scripts first, or use defer.
6. Missing / Incorrect Import or Export (Modules)
If a module doesn’t export what you expect, or you forget to import it, this error hits.
Wrong:
import { getData } from "./api.js";
getData(); // Not exported = ReferenceErrorFixed:
// api.js
export function getData() { /* ... */ }
// app.js
import { getData } from "./api.js";
getData();Fix: Ensure the name is exported and imported correctly.
7. Object Exists, Property Doesn’t
This isn’t technically a ReferenceError, but people mistake it for one.
Wrong:
console.log(user.address.street); // address is undefinedFixed:
console.log(user.address?.street ?? "No address found");Fix: Check property existence before accessing deeper keys.
8. Function Called Before Definition (When Using let/const)
Arrow functions don’t hoist like traditional functions.
Wrong:
sayHello();
const sayHello = () => console.log("Hi");Fixed:
const sayHello = () => console.log("Hi");
sayHello();Fix: Define arrow functions before calling them.
Test the Fix
Once you’ve applied a fix, don’t assume it worked — verify it.
- Save your files.
Sounds obvious, but people forget this more than they admit. - Hard-refresh your browser (
Ctrl + Shift + RorCmd + Shift + R).
This clears cached scripts so you’re not testing old code. - Open the browser console (
F12→ “Console”).
Look specifically for the same ReferenceError. - If the error disappears, you’re done.
If it’s still there, go back to the start:
the variable is either still misspelled, still out of scope, or still loading in the wrong order. - If multiple ReferenceErrors appear, fix them one by one.
Don’t try to solve everything at once — it just slows you down.
Pro Tips
1. Use console.log() and breakpoints
When something isn’t defined, don’t guess. Log it.
If the value doesn’t appear or the code never runs, you’ve already found the issue.
2. Let your tools catch the mistake early
ESLint, Prettier, and even basic VS Code IntelliSense will warn you about undefined variables or typos before you hit refresh. If your editor isn’t suggesting the name you expect, assume you spelled it wrong or it’s out of scope.
3. Don’t write huge chunks before testing
Make one small change, test it, then move on. Debugging becomes painless when you isolate what broke the code.
4. Pay attention to scope in the sidebar
VS Code highlights which block a variable belongs to. If you see the variable dimmed or outside your current scope, that’s your problem.
5. Don’t rush
Most ReferenceErrors come from simple oversights. Slowing down for 10 seconds saves 10 minutes of debugging.
Related Errors or Alternative Scenarios
Not every error that “looks undefined” is a ReferenceError. These are the ones people often confuse with it:
1. Uncaught TypeError: Cannot read properties of undefined (reading ‘xyz’)
This means the object exists, but one of its properties doesn’t.
Example: user exists, but user.address doesn’t — so user.address.street fails.
How to confirm:
Log the parent object first (console.log(user)), then check each property step by step.
2. Uncaught TypeError: xyz is not a function
You’re calling something like a function even though it isn’t one — maybe you overwrote it, imported it wrong, or returned something unexpected.
Quick check:typeof xyz
If it’s not "function", that’s your answer.
3. Variable Shadowing
Not an error by itself, but it causes behavior that feels like a ReferenceError.
Shadowing happens when an inner scope declares a variable with the same name as an outer one, hiding the original value.
How to spot it:
Collapse blocks in your editor and check which variable is actually being referenced.
FAQ
1. What causes “Uncaught ReferenceError: variable is not defined”?
It happens when your code tries to use a variable that doesn’t exist in the current scope, wasn’t declared, is misspelled, or loads before the script that defines it.
2. How do I fix a ReferenceError in JavaScript?
Start by checking spelling, confirming the variable is declared, making sure the script loads in the right order, and verifying the variable is accessible in the current scope. After each change, reload the page and recheck the console.
3. Why does this error appear even though I defined the variable?
Because the variable might be:
- Defined after you’re using it
- Defined in a different scope
- Hidden by shadowing
- Inside a module that wasn’t imported correctly
Fixing the order or scope usually resolves it immediately.
Conclusion
The “Uncaught ReferenceError: ___ is not defined” error looks intimidating, but it’s almost always caused by something small — a typo, a missing declaration, or code running before it should. Once you know where to look, the fix is quick. Follow the checks in this guide, test after each change, and you’ll not only solve this error but prevent it from happening again in future projects.
