Skip to main content

How to Resolve the "ReferenceError: Cannot access before initialization" Error in JavaScript

The ReferenceError: Cannot access '...' before initialization is a common error in modern JavaScript that occurs when you try to access a variable declared with let or const before its declaration in the code. This error is a direct result of a feature called the Temporal Dead Zone (TDZ).

This guide will explain what the TDZ is, why it exists, and show you how to solve this error in common scenarios, including variable access and function calls.

The Core Concept: The Temporal Dead Zone (TDZ)​

Variables declared with let and const are block-scoped. When the JavaScript engine enters a new block of code (like a function or an if statement), it scans for all let and const declarations. From the start of the block until the line where a variable is declared, that variable is in the Temporal Dead Zone.

Any attempt to read or write to a variable while it is in the TDZ will result in the ReferenceError: Cannot access before initialization error.

This is a safety feature designed to prevent bugs that were common with the older var keyword, where a variable could be accessed before its declaration and would have the value undefined. The TDZ ensures you don't accidentally use a variable before you've intentionally declared it.

Cause 1 (Most Common): Accessing a Variable Before Declaration​

This is the most straightforward cause of the error. The code tries to use a variable before the line that declares it.

Example of problem:

// Problem: `console.log(myVar)` is in the TDZ for `myVar`.
if (true) {
  console.log(myVar); // ⛔️ ReferenceError: Cannot access 'myVar' before initialization
  
  const myVar = 'Hello, World!';
}
note

Even though the code looks sequential, the engine knows that myVar will be declared later in the block, so it places it in the TDZ from the opening { until the const declaration.

The solution is to always declare and initialize your variables before you access them. Move the access line to after the declaration.

// ✅ Solution: Access `myVar` after it has been initialized.
if (true) {
  const myVar = 'Hello, World!';
  console.log(myVar); // Output: Hello, World!
}

Cause 2: Shadowing a Variable in a Block​

This is a more subtle version of the same problem. You might have a variable in an outer scope, but if you declare another variable with the same name in an inner scope, the inner variable "shadows" the outer one, creating a new TDZ.

Example of the problem:

let myVar = 'outer scope';

if (true) {
  // The TDZ for the *inner* `myVar` starts here.
  // Any reference to `myVar` inside this block now refers to the inner one.
  console.log(myVar); // ⛔️ ReferenceError: Cannot access 'myVar' before initialization

  let myVar = 'inner scope';
}

Solution: Either rename the inner variable to avoid shadowing (recommended) or move the access to after the declaration.

// ✅ Solution: Use a different name for the inner variable.
let myVar = 'outer scope';

if (true) {
  const innerVar = 'inner scope';
  console.log(myVar);    // Output: outer scope
  console.log(innerVar); // Output: inner scope
}

Cause 3: Calling a Function Expression Before Declaration​

Function declarations are "hoisted," meaning you can call them before they appear in the code. However, function expressions and arrow functions that are assigned to variables are not hoisted. They are subject to the same TDZ rules as any other variable.

Example of the problem:

// Problem: `myFunction` is in the TDZ until its `const` declaration.
myFunction(); // ⛔️ ReferenceError: Cannot access 'myFunction' before initialization

const myFunction = () => {
  console.log('Hello!');
};

Solution: there are two ways to fix this:

  1. Move the function call to after the declaration (for function expressions).
  2. Use a function declaration (which is hoisted) if you need to call the function before its physical location in the code.
// ✅ Solution 1: Move the call
const myFunction = () => {
  console.log('Hello!');
};
myFunction();

// ✅ Solution 2: Use a function declaration
anotherFunction(); // This works because declarations are hoisted.

function anotherFunction() {
  console.log('World!');
}

Hoisting: var vs. let/const​

The older var keyword has different behavior. var declarations are hoisted to the top of their scope, but their assignments are not. This means the variable exists but is undefined until the assignment line is reached.

console.log(myVar); // Output: undefined (No ReferenceError!)

var myVar = 'Hello';

This is why let and const were introduced—to prevent this potentially confusing behavior with the TDZ.

Conclusion​

The ReferenceError: Cannot access before initialization is a protective error that enforces good coding practices.

  • It is caused by the Temporal Dead Zone (TDZ), a feature of let and const that prevents you from accessing variables before they are declared.
  • To fix the error, ensure that you always declare and initialize your variables before you use them.
  • Be mindful of variable shadowing, where an inner-scope variable can create a new TDZ.
  • Remember that function expressions and arrow functions are not hoisted, so you must declare them before you call them.

Table of Contents