How to Fix the “Cannot access before initialization” Reference Error in JavaScript

The “cannot access before initialization” reference error occurs in JavaScript when you try to access a variable before it is declared with let or const and initialized in the same scope. To fix it, initialize the variables before accessing them.

The "cannot access before initialization" reference error occurring in JavaScript.
The “cannot access before initialization” reference error occurring in JavaScript.

Here are some examples of the error occurring:

index.js
// ❌ ReferenceError: Cannot access 'num' before initialization console.log(num); let num = 2; // ❌ ReferenceError: Cannot access 'name' before initialization console.log(name); const name = 'Coding Beauty'; // ❌ ReferenceError: Cannot access 'arr' before initialization arr = [7, 8, 9]; let arr = [3, 4, 5]; 

To solve the error, you need to initialize the variable before accessing it.

index.js
// ✅ No error let num = 2; console.log(num); // 2 // ✅ No error const name = 'Coding Beauty'; console.log(name); // Coding Beauty // ✅ No error let arr = [3, 4, 5]; arr = [7, 8, 9];

var vs let

The occurrence of this error shows an important difference between the var and let keywords. If you had declared the variable with var, the error wouldn’t have occurred.

index.js
// No error console.log(num); // undefined var num = 2; // No error console.log(name); // undefined var name = 'Coding Beauty'; // No error arr = [7, 8, 9]; var arr = [3, 4, 5];

This happens because variables declared with the var keyword are hoisted – they are moved by the JavaScript interpreter to the top of the current scope (to the top of the current script or current function).

Basically, this is what happens to our variables declared with var:

index.js
var num; var name; var arr; console.log(num); // undefined num = 2; console.log(name); // undefined name = 'Coding Beauty'; arr = [7, 8, 9]; arr = [3, 4, 5];

Note: The declarations are hoisted, but the initializations are not.

Because of this hoisting, even when the variable is declared in a non-function block, like an if block, the error will still not occur if you try to access the variable from outside the if statement.

index.js
// No error! console.log(num); // undefined if (true) { var num = 2; }

Only the global scope and function scopes are used for hoisting, so like before, the variable declaration is moved to the top of the file.

index.js
var num; console.log(num); // undefined if (true) { num = 2; }


11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.

1 thought on “How to Fix the “Cannot access before initialization” Reference Error in JavaScript”

Leave a Comment

Your email address will not be published. Required fields are marked *