JavaScript Variables: var, let, and const – Complete Guide

JavaScript Variables: var, let, and const — Deep Dive

JavaScript provides three ways to declare variables: var, let, and const. While they may seem similar at first, they differ significantly in scope, re-declaration rules, re-assignment behavior, and how they interact with hoisting and the Temporal Dead Zone (TDZ).

1. Scope

Scope defines where a variable can be accessed.

Types of Scope

• Global Scope: Accessible everywhere
• Function Scope: Accessible only inside a function
• Block Scope: Accessible only inside { } (if, loops, etc.)

Example

{
  var a = 10;
  let b = 20;
  const c = 30;
}

console.log(a); // 10
console.log(b); // ReferenceError
console.log(c); // ReferenceError

Explanation:

• var ignores block scope and becomes available outside the block.
• let and const are restricted to the block.

2. Re-declaration

KeywordAllowedvarYesletNoconstNo

var x = 10;
var x = 20; // allowed

let y = 10;
let y = 20; // error

const z = 5;
const z = 10; // error

3. Re-assignment

KeywordAllowedvarYesletYesconstNo

var a = 5;
a = 10; // allowed

let b = 5;
b = 10; // allowed

const c = 5;
c = 10; // error

Note: const prevents reassignment, not mutation. Objects and arrays can still be modified internally.

4. Hoisting (Deep Explanation)

What is Hoisting?

Hoisting is JavaScript’s behavior of processing declarations before executing code. During the creation phase of execution, the JavaScript engine scans the code and registers variables and functions in memory.

Execution happens in two phases:

1. Creation Phase (Memory Allocation)
2. Execution Phase (Code Runs Line by Line)

4.1 Hoisting with var

console.log(x);
var x = 5;

How JavaScript interprets it internally:

var x;          // hoisted declaration
console.log(x); // undefined
x = 5;          // assignment happens here

Key points:

• var is hoisted and initialized with undefined
• Accessing it before assignment does not throw an error

4.2 Hoisting with let and const

console.log(y);
let y = 10;

This throws a ReferenceError.

Important detail:

• let and const are also hoisted
• But they are not initialized

This leads to the Temporal Dead Zone.

5. Temporal Dead Zone (TDZ)

Definition

The Temporal Dead Zone is the time between:

• When a variable is hoisted (declared in memory)
• And when it is initialized (actual line of declaration)

During this period, the variable exists but cannot be accessed.

Example

{
  console.log(a); // ReferenceError
  let a = 10;
}

What actually happens internally

During creation phase:

// 'a' is registered in memory but NOT initialized

During execution:

• From start of block → until let a = 10
• Variable is in TDZ
• Any access → ReferenceError

Why TDZ Exists

TDZ was introduced to:

1. Prevent bugs caused by using variables before declaration
2. Make code more predictable
3. Encourage proper variable declaration order

Another Example

let a = 5;
function test() {
  console.log(a); // ReferenceError
  let a = 10;
}

test();

Explanation:

• Inside the function, a new a is created
• It enters TDZ from start of function to its declaration
• So console.log(a) fails, even though global a exists

Key Difference: var vs let/const in Memory

6. Function Hoisting

Function Declaration

greet();
function greet() {
  console.log("Hello");
}

• Fully hoisted (name + body)
• Can be called before definition

Function Expression

sayHi();
var sayHi = function() {
  console.log("Hi");
};

• var is hoisted as undefined
• Calling it results in error

With let or const:

sayHello();
const sayHello = function() {
  console.log("Hello");
};

• TDZ applies
• ReferenceError occurs

7. Final Summary

8. Key Takeaways

• Always prefer let and const in modern JavaScript
• Use const by default, and let when reassignment is needed
• Avoid var due to its confusing behavior
• Understand TDZ to avoid runtime errors
• Hoisting is not magic; it is part of JavaScript’s execution model