ReferenceError: variable is not defined - How to Fix (2026)

What is ReferenceError?

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.

Error Message:
ReferenceError: userName is not defined

Common Causes

Using a variable before declaring it
Typo in variable name
Variable is out of scope (block scope with let/const)
Accessing variable in wrong execution context
Missing import statement for external variables/functions

Quick Fix (TL;DR)

Quick Solution

// ❌ 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');
}

Common Scenarios & Solutions

Scenario 1: Variable Not Declared

The most basic case - trying to use a variable that was never declared.

Problem

console.log(age); // ReferenceError: age is not defined
age = 25; // This won't help - error already thrown

Solution

// 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;

Scenario 2: Typo in Variable Name

A simple typo can cause ReferenceError. JavaScript is case-sensitive.

Problem

let userName = 'John';
console.log(username); // ReferenceError: username is not defined
// Note: userName vs username (capital N)

Solution

let userName = 'John';
console.log(userName); // 'John' - correct spelling

// Use consistent naming conventions
// camelCase for variables
let firstName = 'John';
let lastName = 'Doe';

Scenario 3: Block Scope with let/const

Variables declared with let/const are block-scoped and not accessible outside their block.

Problem

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

// 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'

Scenario 4: Temporal Dead Zone (TDZ)

With let/const, you can't access variables before their declaration, even in the same scope.

Problem

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = 'John';

// Same with const
console.log(PI); // ReferenceError
const PI = 3.14;

Solution

// 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';

Scenario 5: Missing Import (ES6 Modules)

In modern JavaScript with modules, forgetting to import can cause ReferenceError.

Problem

// main.js
const result = calculateSum(5, 10); // ReferenceError: calculateSum is not defined

// utils.js (separate file)
export function calculateSum(a, b) {
    return a + b;
}

Solution

// 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);