How to Fix Uncaught ReferenceError Variable Is Not Defined in JavaScript

The error Uncaught ReferenceError: x is not defined in JavaScript means you’re trying to use a variable or function that doesn’t exist in the current scope. It’s one of the most common JavaScript errors. Here’s every cause and fix.

What This Error Means

JavaScript looked for a variable or function named x but couldn’t find it in the accessible scope. Either it was never declared, it’s out of scope, there’s a typo, or the script defining it hasn’t loaded yet. The error names the specific identifier it couldn’t find — start there.

Cause 1: Variable Never Declared

// 🐛 Using a variable that was never declared
console.log(username);   // ReferenceError: username is not defined

// ✅ Declare it first
const username = 'Alice';
console.log(username);   // works

Cause 2: Typo in the Variable Name

// 🐛 Declared as 'userName' but used as 'username'
const userName = 'Alice';
console.log(username);   // ReferenceError - case mismatch!

// ✅ Match the exact name (JavaScript is case-sensitive)
const userName = 'Alice';
console.log(userName);   // works

// Common typos: case differences, misspellings, wrong variable

Cause 3: Out of Scope

// 🐛 Variable declared in a different scope
function setup() {
  const config = { debug: true };
}
console.log(config);   // ReferenceError - config is inside setup()

// ✅ Declare it in an accessible scope, or return it
function setup() {
  return { debug: true };
}
const config = setup();
console.log(config);   // works

// 🐛 Block scope with let/const
if (true) {
  let temp = 5;
}
console.log(temp);   // ReferenceError - temp only exists in the block

// ✅ Declare in the outer scope if you need it there
let temp;
if (true) { temp = 5; }
console.log(temp);   // works

Cause 4: Script Load Order (Browser)

<!-- 🐛 Using a function before its script loads -->
<script>
  myFunction();   // ReferenceError if library.js hasn't loaded yet
</script>
<script src="library.js"></script>

<!-- ✅ Load the dependency FIRST -->
<script src="library.js"></script>
<script>
  myFunction();   // now library.js is loaded
</script>

<!-- ✅ Or use defer to control load order -->
<script src="library.js" defer></script>
<script src="main.js" defer></script>
<!-- deferred scripts run in order, after HTML parses -->

Cause 5: Accessing Before Declaration (Temporal Dead Zone)

// 🐛 let/const can't be used before their declaration
console.log(count);   // ReferenceError (temporal dead zone)
let count = 5;

// ✅ Declare before using
let count = 5;
console.log(count);   // works

// Note: var is hoisted (returns undefined, not an error),
// but let/const throw a ReferenceError if accessed before declaration

Cause 6: Missing Import (Modules)

// 🐛 Using something from another module without importing it
console.log(helper());   // ReferenceError: helper is not defined

// ✅ Import it
import { helper } from './utils.js';
console.log(helper());   // works

Cause 7: Variable in a Different File/Module Scope

// 🐛 In ES modules, top-level variables are module-scoped, not global
// file1.js
const apiKey = 'secret';

// file2.js
console.log(apiKey);   // ReferenceError - not shared between modules

// ✅ Export and import it
// file1.js
export const apiKey = 'secret';
// file2.js
import { apiKey } from './file1.js';

Debugging Steps

1. Read the error — it names the exact identifier that’s not defined
2. Check for typos — case sensitivity and spelling (most common cause)
3. Verify it’s declared — is there a const/let/var/function/import for it?
4. Check the scope — is the variable accessible where you’re using it?
5. Check load/declaration order — is it used before it’s defined or loaded?
6. Check imports — in modules, is it imported from where it’s defined?

Frequently Asked Questions

Q: What’s the difference between “not defined” and “undefined”?
A: “x is not defined” (ReferenceError) means the variable doesn’t exist in scope at all. “undefined” means the variable exists but has no value assigned. Different problems: “not defined” means declare it or fix scope/typo; “undefined” means assign it a value.

Q: Why does it work sometimes but not others?
A: Often script load order or timing — a variable/function from another script may not be loaded yet when your code runs. Use defer on scripts, ensure dependencies load first, or wait for the DOM/load event. Intermittent ReferenceErrors usually mean a timing/order issue.

Q: I declared the variable but still get “not defined”. Why?
A: Check scope (is it declared in an accessible scope, not inside a function or block you’re outside of?), check for typos (case-sensitive), and in modules check that you imported it. Also check you’re not accessing a let/const before its declaration line (temporal dead zone).

Q: How do I fix “not defined” for a library function?
A: Ensure the library’s script is loaded BEFORE your code that uses it. Put the library’s <script> tag first, or use defer on both scripts (they run in order). For modules, import the function. The library must be available before you call it.

Q: Why do let and const throw but var doesn’t?
A: var is hoisted and initialized to undefined, so accessing it before declaration returns undefined (no error). let and const are hoisted but not initialized — accessing them before their declaration line throws a ReferenceError (the “temporal dead zone”). Declare let/const before using them.

Conclusion

“Uncaught ReferenceError: x is not defined” means JavaScript can’t find a variable or function in the accessible scope. The causes: the variable was never declared, there’s a typo (check case sensitivity), it’s out of scope, a script hasn’t loaded yet, it’s accessed before its let/const declaration, or a module import is missing. The debugging approach: read the error (it names the identifier), check for typos first (the most common cause), verify it’s declared and in scope, check load/declaration order, and confirm imports in modules. Once you ensure the identifier is declared, spelled correctly, in scope, and available when accessed, the error resolves. It’s almost always a typo, a scope issue, or a load-order problem — work through those systematically.