When and Where to Declare a Variable
Published: 2023-05-08 20:47:14

ReferenceError: ____ is not defined
ReferenceError: Cannot access ____ before initialization

A reference error in Javascript occurs when a function or variable being called has not yet been declared or is outside the scope of where you are trying to access it. It also happens in strict mode and when redeclaring variables.
In this post, you will find common errors and how to fix them when dealing with variables and reference errors. Declaring or accessing your variables in the wrong places can be avoided.

**HOW TO AVOID THE FOLLOWING:**
ReferenceError: ____ is not defined
ReferenceError: Cannot access ____ before initialization

Javascript runs top down and left to right, meaning that before accessing something, you must declare it, typically with const, let, or var.
As Javascript is written, code becomes encased and nested in complicated structures. Thinking of it as a sort of tree or root system, each set of brackets can have multiple sets of brackets within them. This decides the scope which describes when and where variables and functions can be called within the code. Functions and variables cannot be called outside the set of curly brackets { } that they are declared and initialized in. 

A variable that is declared within a set of curly brackets (whether it is in a function [function scope] or a loop or an if/else statement [block scope]) cannot be called outside that set of curly brackets.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtlto9jcrmg5dgng0458.png)
_Uncaught ReferenceError: a is not defined_
In this example, though the function is declaring and assigning the variable when it is called, the variable itself is not within accessible the console.log(). The variable must be defined outside the function scope where the function call and console.log() sit.

A variable also must be declared prior to calling it, meaning that as Javascript runs, it runs from top to bottom, line by line, and the variable must be declared before it is called.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axf724tb9p1n3bpjeozn.png)
_Uncaught ReferenceError: Cannot access ‘a’ before initialization_
The variable must be declared in the lines preceding the call for access to the variable. Remember that Javascript runs from top to bottom. Because the variable is being declared in the line after the console.log(), Javascript cannot access the variable before it was created.

This is why functions declared as variables cannot be hoisted. They are variables, and therefore follow the rules of declaration that all variables follow.

The variable can be declared by const, let, or var, and once declared, it can be used within the local scope it was declared in after it has been declared.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uapkpeu7lbfi5m2ll4qm.png)
_Uncaught ReferenceError: b is not defined_
The first variable is still being called within the function brackets it was encased in, though it is also nested inside another set of curly brackets. This will not cause an error, and it will be logged. The second variable is being called outside the block scope that it was declared in. Therefore, the second variable will not be logged and will return an error.

A variable declared without const, let, or var is automatically a global variable, no matter between which local scope it is declared in.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zjx6rsw31g0o46gs1x6.png)
The global scope is anything written that is not encased in curly brackets. This means that a variable declared at the beginning of a set of instructions in the global scope can be accessed from anywhere else in the code, whether bracketed or not.

**Quiz Yourself**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8n1dnu3fsxtlw047jiz.png)
Which of the console.log() will throw an error, and which are able to access the variable it is calling?

Answers can be found below.

**Summary**
Variables must be declared in specific places to be called in other places. Because of Javascript’s top down nature, they must be declared above the place they are being called. They must also be declared within the scope of where they are being accessed. Scope can be determined by the curly brackets. Anything declared inside a pair of curly brackets of a function cannot be accessed outside of them (function scope). Anything declared inside a pair of curly brackets of a loop or if statement cannot be accessed outside of them (block scope). Globally declared variables can be accessed in all the places that follow the declaration of the variable.

**Quiz Answers**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjxjcq2iifdbv3evflav.png)
a is variable in the global scope. It is accessible at any point below it in the code.
b is being accessed within the function scope it was declared in, even though it is nested in another block scope.
d is being called outside (and also above) the block scope it was declared in.
e is both declared and called within the block scope in the right order.
f is being called above the line it was declared in, even if it is still being called in the function’s scope.