var vs let vs const (Scope and Hoisting)

JavaScript provides three ways to declare variables:

• var

• let

• const

Although all three are used to store values, they behave very differently in terms of:

• Scope

• Hoisting

• Re-declaration

• Re-assignment

• Best practices

This chapter explains everything you need to know with simple examples.

1. var — Function Scoped (Old JavaScript)

Characteristics of var:

• Can be updated ??

• Can be redeclared ??

• Is function-scoped

• Is hoisted (but initialized as undefined)

Example 1: var Redeclaration

var age = 20;
var age = 30;

console.log(age);

Output:

30

Redeclaring the same variable is allowed — which is dangerous.

Example 2: var is Function Scoped

function test() {
    var x = 10;
    console.log(x);
}

test();
console.log(x); // Error: x is not defined

Example 3: var Hoisting

console.log(a);
var a = 10;

Output:

undefined

Because var is hoisted like:

var a;
console.log(a);
a = 10;

2. let — Block Scoped (Modern JavaScript)

Characteristics of let:

• Can be updated ??

• Cannot be redeclared ?

• Is block-scoped

• Hoisted but not initialized (Temporal Dead Zone)

Example 1: let Cannot Be Redeclared

let x = 10;
// let x = 20; ? Error
x = 20; // ?? allowed

console.log(x);

Example 2: Block Scope

{
    let num = 5;
    console.log(num);
}

console.log(num); // Error

Variables inside {} cannot be accessed outside.

Example 3: let Hoisting (TDZ)

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

Output:

ReferenceError

let is hoisted but cannot be used before initialization ? Temporal Dead Zone.

3. const — Block Scoped & Cannot Change Value

Characteristics of const:

• Cannot be reassigned ?

• Cannot be redeclared ?

• Must be initialized

• Is block-scoped

• Good for values that should not change

Example 1: const Must Have a Value

const x = 10;

But:

const x; // ? Error

Example 2: const Cannot Change

const pi = 3.14;
pi = 4.5; // ? Error

Example 3: const Allows Object Mutation

const user = {
    name: "Aman"
};

user.name = "Riya"; // ?? allowed

console.log(user.name);

Output:

Riya

You cannot change the variable itself, but you can change properties inside objects.

4. Summary Table (Easy Comparison)

5. Real-Life Examples

Example: Using let in Loops (Safer)

for (let i = 1; i <= 3; i++) {
    console.log(i);
}
console.log(i); // Error

let keeps loop variables safe.

Example: const for Arrays

const colors = ["red", "blue"];
colors.push("green"); // ?? allowed

Example: Avoiding var Problems

if (true) {
    var msg = "Hello";
}
console.log(msg);

Output:

Hello

This is risky — var leaks outside the block.

6. Hoisting Summary

var hoisting:

console.log(x); // undefinedvar x = 10;

let / const hoisting:

console.log(x); // ReferenceErrorlet x = 10;

Example Program (Complete)

function test() {
    if (true) {
        var a = 10;
        let b = 20;
        const c = 30;
    }

    console.log(a); // OK
    // console.log(b); ? Error
    // console.log(c); ? Error
}

test();

Best Practices (Very Important)

1. Never use var — use let and const instead

2. Use const by default

3. Use let only when value changes

4. Avoid redeclaring variables

5. Keep variables block-scoped to prevent bugs

Common Mistakes Beginners Make

1. Thinking const makes the whole object unchangeable

2. Mixing var, let, and const randomly

3. Using let inside loops but expecting access outside

4. Not understanding hoisting rules

5. Using var inside functions and getting unexpected values

Practice Tasks (Do It Yourself)

1. Declare a variable with let, then redeclare it.

2. Create a const object and modify its properties.

3. Create a block and test block scope with let.

4. Test hoisting difference between var and let.

5. Create a program that uses const wherever possible.