ReferenceError occurs when you try to use a variable that hasn't been declared or is not in the current scope. This is one of the most common JavaScript errors, especially for beginners.
// ⌠Problem
console.log(userName); // ReferenceError: userName is not defined
// ✅ Solution 1: Declare the variable first
let userName = 'John';
console.log(userName); // 'John'
// ✅ Solution 2: Check if variable exists
if (typeof userName !== 'undefined') {
console.log(userName);
}
// ✅ Solution 3: Use try-catch
try {
console.log(userName);
} catch (error) {
console.log('Variable not defined');
}The most basic case - trying to use a variable that was never declared.
A simple typo can cause ReferenceError. JavaScript is case-sensitive.
Variables declared with let/const are block-scoped and not accessible outside their block.
With let/const, you can't access variables before their declaration, even in the same scope.
In modern JavaScript with modules, forgetting to import can cause ReferenceError.
console.log(age); // ReferenceError: age is not defined
age = 25; // This won't help - error already thrown// Declare before using
let age = 25;
console.log(age); // 25
// Or use var (hoisted but undefined initially)
console.log(age); // undefined (no error)
var age = 25;let userName = 'John';
console.log(username); // ReferenceError: username is not defined
// Note: userName vs username (capital N)let userName = 'John';
console.log(userName); // 'John' - correct spelling
// Use consistent naming conventions
// camelCase for variables
let firstName = 'John';
let lastName = 'Doe';if (true) {
let message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined
// Same with loops
for (let i = 0; i < 5; i++) {
// i is only available here
}
console.log(i); // ReferenceError: i is not defined// Solution 1: Declare outside the block
let message;
if (true) {
message = 'Hello';
}
console.log(message); // 'Hello'
// Solution 2: Use var (function-scoped, not recommended)
if (true) {
var message = 'Hello';
}
console.log(message); // 'Hello' (works but not recommended)
// Solution 3: Return value from block
function getMessage() {
if (true) {
let message = 'Hello';
return message;
}
}
console.log(getMessage()); // 'Hello'console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = 'John';
// Same with const
console.log(PI); // ReferenceError
const PI = 3.14;// Always declare variables at the top
let name = 'John';
console.log(name); // 'John'
const PI = 3.14;
console.log(PI); // 3.14
// Or use var (hoisted, but not recommended)
console.log(name); // undefined (no error)
var name = 'John';// main.js
const result = calculateSum(5, 10); // ReferenceError: calculateSum is not defined
// utils.js (separate file)
export function calculateSum(a, b) {
return a + b;
}// main.js - Import the function
import { calculateSum } from './utils.js';
const result = calculateSum(5, 10); // 15
// Or import everything
import * as utils from './utils.js';
const result = utils.calculateSum(5, 10);ReferenceError occurs when you try to use a variable that hasn't been declared or is not accessible in the current scope. Common causes include typos, using variables before declaration, or accessing block-scoped variables outside their block.
Declare the variable before using it with let, const, or var. Check for typos in variable names. Ensure the variable is in the correct scope. Use typeof to check if a variable exists before accessing it.
Temporal Dead Zone (TDZ) is the period between entering a scope and the actual declaration of a let/const variable. Accessing the variable during TDZ causes ReferenceError.
ReferenceError means the variable doesn't exist at all. undefined means the variable exists but has no value. var variables are hoisted and return undefined before declaration, while let/const throw ReferenceError.
Use typeof operator: if (typeof myVar !== 'undefined') { }. This won't throw ReferenceError even if the variable doesn't exist.
Explore 500+ free tutorials across 20+ languages and frameworks.