How to fix ReferenceError: Cannot access before initialization in JavaScript

ReferenceError: Cannot access before initialization in JS

In this article, we will learn why the ReferenceError: Cannot access before initialization in JavaScript occurs and how you can fix it in Javascript by defining a variable before using it or using the var method.

What causes the ReferenceError: Cannot access before initialization in JavaScript?

Before coming to how to fix the ReferenceError: Cannot access before initialization error, we will understand why this error appears by looking at the code below.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <h2>
        ReferenceError: Cannot access before initialization in JS | LearnShareIT
    </h2>
    <h3 id="number"></h3>
    <script>
          const numberContent = document.getElementById("number");
          console.log(number);
          numberContent.innerHTML = "The number is: " + number;
          const number = 1;
    </script>
  </body>
</html>

Output:

You can see in the code after all the methods and rendering the number value to the screen are written, at the end of the javascript code, we define the name and the value for it with const. This is also the reason for the ReferenceError: Cannot access it before initialization because the program prevents us from accessing the variable before it is defined. See the next part of the article to learn how to fix this error.

How to fix this error?

Defining variable before using it

Doing this will correct the writing error and define the variable value before using and accessing it. We will move the defined code to the top of the code, and the error can be prevented.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <h2>
        ReferenceError: Cannot access before initialization in JS | LearnShareIT
    </h2>
    <h3 id="number"></h3>
    <script>
          const number = 1;
          const numberContent = document.getElementById("number");
          console.log(number);
          numberContent.innerHTML = "The number is: " + number;
    </script>
  </body>
</html>

Output:

So we can access the number variable in the code and replace it with the innerHTML of the h3 tag and prevent the annoying error from appearing.

Using the var method

Following are some properties of var. The scope of a variable is determined where it is declared in the script. For var variables, the variable’s scope is either the function scope containing the variable declaration or the global scope.

The variable var also has the property of hoisting, which means that no matter where it is declared, the variable will be brought to the top of the scope before executing the code. Therefore, variables declared with the var keyword are brought to the top of their scope and initialized with the value undefined. Let’s try using var instead of const in the error code above and see the result.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <h2>
        ReferenceError: Cannot access before initialization in JS | LearnShareIT
    </h2>
    <h3 id="number"></h3>
    <script>
          const numberContent = document.getElementById("number");
          console.log(number);
          numberContent.innerHTML = "The number is: " + number;
          var number = 1;
    </script>
  </body>
</html>

Output:

As you can see, while hoisting can prevent the cannot access before initialization error from appearing, it cannot bring the value defined at the end to the first run because Javascript also reads code from top to bottom. Hope you understand and use the methods to suit what you’re doing.

Summary

The article has shown you how to fix ReferenceError: Cannot access before initialization in JavaScript. However, I recommend you use a defining vari able before using it because only then can we access variable one in the most typical way.

Maybe you are interested:

Leave a Reply

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