Differences between undeclared and undefined variables in JavaScript

This article will give the idea of undefined & undeclared variables in Javascript, also discussing their differences & understanding the implementation through the examples.

In a programming language, the variables are used to store some kind of information & every programming language contains different kinds of procedures and techniques to create these variables and access them. In javascript, there exists the execution context, which is nothing but a little separate section in which the variables get memory and the code being executed. The execution of the program takes place in two-phase:

• Memory Allocation Phase: In this, all variables declared inside the program get memory in the heap area, and the Javascript engine assigns the value undefined to all of these variables.
• Thread Execution Phase: The code written inside the javascript file is being executed line by line. Also, when the js encounter the line of code in which we are assigning some kind of value to a variable, then the value, which is undefined of variable, is being replaced by the actual value which was assigned by the programmer.

Now, we will understand how the variables get allocated in the memory & how the Javascript executes these variables if it is encountered in the line of code.

undefined variable: The variables which are written in the code but haven’t been assigned any value yet are called undefined.

Syntax:

let x;
console.log(x);

For instance, in this case, the variable x will remain undefined till the assignment.

Explanation: The execution of the program will be as follows:

• In the memory Allocation phase: Javascript will scan all the variables and functions in the code. Here, we have only variable x in the entire code. So, it will get space in memory, and undefined will be assigned to each variable(only x in our case).
• In the code execution phase: In the first line of code, console.log(x) is written. Now Javascript will search for this variable in memory and it will be found, but as the javascript engine hasn’t encountered any line on which the programmer is assigning some value to x. Hence undefined will be printed. Later, in the next line, (x=5), the undefined will be replaced by 5.

Example:

Javascript

<script>
  let x;
  console.log(x);
  x = 5; // Now, variable is no longer undefined.
  console.log(x);
</script>

Output:

undeclared variable: The variables which don’t exist in the memory heap area, ie., not written inside the code, are called undeclared.

Syntax:

console.log(y); // y will be considered as undeclared

For instance, in this case, the variable y is not declared in the code ie., in the memory allocation phase, no space was allocated which has been named y. So it will be considered as undeclared.

Example:

Javascript

<script>
  let x;
  console.log(y); // y will be undeclared
  x = x*2;
</script>

Explanation: The execution of the program will be as follows:

• In the memory allocation phase: All variables and functions (only x in our case) will get space in memory.
• In the thread of execution: Javascript will encounter the first line of console.log(y). Now, it will search y in memory space but y will not be found. Hence, it will be considered undeclared.

Output:

Difference between undeclared and undefined variables:

S.No.	undeclared	undefined
1.	These are the variables that do not exist in the memory heap.	These variables are the ones that do exist in memory but nothing is being assigned to them explicitly by the programmer.
2.	The variables are considered to be undeclared because of programmer does not write them with var, let, or const.	The variables are considered to be undefined because it is assigned by javascript to them.
3.	If we try to access them in the code execution phase then javascript will throw a Reference error.	If we try to access these variables we’ll get the undefined as value.

Practical Illustration: In the memory allocation phase, the variable a will get memory, and javascript will assign undefined to it. You can see the situation in the first breakpoint where we have stopped our program at the first line of code. 

After then, the code execution phase will start with the first line of the console.log, undefined will be printed. Later the value of a will be replaced by 5, you can observe this on the second breakpoint. And finally, when the code will try to access some kind of variable(b in our case) that doesn’t exist in memory it will throw a Reference error because it was undeclared by the programmer.

HTML

<script>
  console.log(a);   // a will be undefined here
  var a = 5;
  console.log(a);   // a will be 5 here
  console.log(b);   // b will be undeclared here
</script>

Output: