Differences Between Undeclared and Undefined Variables in JavaScript

In JavaScript, variables are declared using keywords like var, let, or const. The scope and behavior of variables depend on how they are declared:

• var: Has function scope or global scope. If not declared explicitly, a var variable becomes an undeclared global variable when assigned a value.
• let and const: Have block scope. They throw a ReferenceError if used before declaration or when undeclared.

An undeclared variable is created implicitly by assigning a value without declaring it. An undefined variable is one that is declared but not assigned a value.

// Undefined variable
// Declared but not assigned
let a;

// Output: undefined
console.log(a);

// Undeclared variable
console.log(b);

the variable a is declared but not initialized hence it will give the undefined as a value. while the b will show the error as it is not declared anywhere in the code.

1. 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.

• 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.

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

2. 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.

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

• 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

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.

// a will be undefined here
console.log(a);
var a = 5;

// a will be 5 here
console.log(a);

// b will be undeclared here  
console.log(b);  

Output: