Variable Declaration In JavaScript

Variable declaration in JavaScript goes through three phases:

1. Declaration phase
2. Initialisation phase
3. Assignment phase

1. Declaration Phase

• During the declaration phase, the variable is introduced to the JavaScript engine using a specific keyword, such as var, let, or const.
• The variable name is registered in the current scope, making it available for use within that scope.
• However, at this stage, the variable is uninitialized and holds the value of undefined.

2. Initialization Phase

• In the initialization phase, the variable is assigned an initial value.
• For variables declared using var or let, the initial value remains undefined until explicitly assigned a value.
• For variables declared using const, an initial value must be provided during declaration, and once assigned, it cannot be changed.

3. Assignment Phase

• The assignment phase occurs when a new value is assigned to an already initialized variable.
• For variables declared with var or let, the value can be reassigned to a different value at any time.
• For variables declared with const, reassignment is not allowed after the initial assignment.

Example

// Declaration Phase
var name;
let age;
const PI = 3.14;
 
// Initialization Phase
name = 'John';
age = 25;
 
// Assignment Phase
name = 'Alice';   // Reassigned with a new value
age = 30;         // Reassigned with a new value
 
// Constants cannot be reassigned (const assignment phase)
// PI = 3.14159; // Error: Assignment to constant variable

Walking through var name = 'Deepak'

Let's describe each phase for the statement var name = 'Deepak';.

Declaration Phase

• In the declaration phase, the JavaScript engine recognizes the variable name and allocates memory for it within the current scope.
• The variable name is now accessible within the function or global scope where it is declared.
• For variables declared with var, there is a concept called hoisting, which means the variable is hoisted to the top of its scope during this phase. This means that the variable is available throughout the entire scope, even before the actual declaration in the code.

Initialization Phase

• In the initialization phase, the variable name is assigned the value 'Deepak'.
• The variable now holds the value 'Deepak', and it is considered initialized.

Assignment Phase

• The assignment phase is not applicable in this case since the value 'Deepak' was assigned to the variable name during the initialization phase.
• However, in subsequent code execution, the variable name can be reassigned to a different value if needed.

Example

// Declaration Phase (Hoisting)
var name;          // The variable `name` is declared in the current scope and hoisted to the top.
 
// Initialization Phase
name = 'Deepak';   // The variable `name` is assigned the value 'Deepak'.
 
// Assignment Phase (Not applicable in this example)
// name = 'Alice'; // Reassigned with a new value if needed.

let vs var during these phases

In JavaScript, both let and var declarations go through the same phases of variable creation: the Declaration Phase and the Initialization Phase. However, there is a crucial difference between them when it comes to the value they hold during these phases.

For var declarations:

1. Declaration Phase: The variable is declared and hoisted to the top of its scope. At this point, it exists in memory and is assigned a value of undefined.
2. Initialization Phase: During this phase, the variable remains undefined until the code execution reaches the line where it is explicitly assigned a value.

Example

console.log(name);          // Output: undefined
var name = 'Deepak';
console.log(name);          // Output: Deepak

For let declarations:

1. Declaration Phase: The variable is declared and hoisted to the top of its block scope, but unlike var it is not initialized. It is in a "temporal dead zone" until the point of its declaration, and trying to access it before the declaration results in a ReferenceError.
2. Initialization Phase: When code execution reaches the declaration line, the variable is initialized — to undefined if no value was given, or to the assigned value otherwise. After this point it leaves the temporal dead zone and behaves like any other variable.

Example

console.log(name);          // ReferenceError: Cannot access 'name' before initialization
let name = 'Deepak';
console.log(name);          // Output: Deepak