How to Fix JavaScript ReferenceError: variable is not defined

In this tutorial, you'll learn about How to Fix JavaScript ReferenceError: variable is not defined. We cover key concepts, practical examples, and best practices.

The Problem

JavaScript throws ReferenceError: X is not defined when you try to use a variable that has not been declared in the current scope. This can happen from typos, missing declarations, or accessing variables outside their scope.

Quick Fix

Step 1: Check for typos

The variable name in the error exactly matches what you typed. Compare it to your declaration:

node -e "console.log(userName); let userName = 'Alice';"

ReferenceError: Cannot access 'userName' before initialization

Fix the spelling or declare the variable first:

node -e "let userName = 'Alice'; console.log(userName);"

Alice

Step 2: Declare with let, const, or var

Variables without a declaration keyword become global in non-strict mode or throw in strict mode:

node -e "'use strict'; x = 10; console.log(x);"

ReferenceError: x is not defined

Add let, const, or var:

node -e "'use strict'; let x = 10; console.log(x);"

10

Step 3: Verify scope

A variable declared inside a block or function is not accessible outside it:

node -e "if (true) { let msg = 'hello'; } console.log(msg);"

ReferenceError: msg is not defined

Move the declaration to the outer scope:

node -e "let msg; if (true) { msg = 'hello'; } console.log(msg);"

hello

Step 4: Check script load order in HTML

In a browser, if a script loads before the variable is defined, you get a ReferenceError. Move script tags to the end of the body or use defer.

Alternative Solutions

Use typeof to check for variable existence

When you are not sure if a variable is defined, check with typeof:

if (typeof someVariable !== "undefined") {
    console.log(someVariable);
}

Use window for global variables in browsers

In browser environments, global variables declared with var are accessible on window:

if (window.myGlobal) {
    console.log(window.myGlobal);
}

Common Mistakes to Avoid

Using a variable before declaring it with let or const. console.log(x); let x = 5; raises ReferenceError because of the temporal dead zone.

Spelling a variable name differently than its declaration. JavaScript is case-sensitive. myVariable and myvariable are different variables.

Accessing a local variable outside its function scope. A variable declared inside a function is not accessible globally. Return the value or declare it in the outer scope.

Pro Tips

Enable ESLint no-undef rule. Configure ESLint to flag undeclared variables: "no-undef": "error" catches ReferenceError causes before runtime.

Use 'use strict' at the top of every file. Strict mode makes undeclared variable assignments throw errors instead of creating global variables silently.

Use const by default, let when reassignment is needed. const prevents accidental reassignment and makes variable declarations explicit.

Prevention

• Always declare variables with let or const before first use.
• Enable strict mode with 'use strict' to catch undeclared variable assignments.
• Use a linter like ESLint with the no-undef rule enabled.