? JavaScript let, var, and const

? Quick Overview

JavaScript provides three ways to declare variables: var, let, and const. Understanding their differences is crucial for writing clean, bug-free code.

var – function-scoped, can be re-declared and updated, and is hoisted.
let – block-scoped, can be updated but not re-declared in the same scope.
const – block-scoped, cannot be re-assigned or re-declared. Commonly used for constants.

? Key Concepts

Scope:
- var → function scope.
- let and const → block scope ({ }).
Re-declaration:
- var can be re-declared in the same scope.
- let and const cannot be re-declared in the same scope.
Re-assignment:
- var and let can be re-assigned.
- const cannot be re-assigned.
Hoisting:
- var is hoisted and initialized with undefined.
- let and const are hoisted but stay in the “temporal dead zone” until the declaration line.
Objects and arrays with const:
- You cannot reassign the variable itself.
- You can change the contents (properties or elements).

? Syntax and Behavior

All three keywords follow the basic pattern:

var name = value;
let name = value;
const NAME = value;

In modern JavaScript, you will mostly use let and const. var mainly appears in older codebases or when you specifically need function-scoped behavior.

? Code Examples

? var and Function Scope

var is function-scoped and allows re-declaration within the same function. Changes inside a block like if affect the same variable.

? View var Example

function testVar() {
var x = 10;
if (true) {
var x = 20; // same variable!
console.log(x); // 20
}
console.log(x); // 20
}
testVar();

? let and Block Scope

let creates a new variable for each block. An inner let does not overwrite the outer one.

? View let Example

function testLet() {
let x = 10;
if (true) {
let x = 20; // new variable, separate from the outer one
console.log(x); // 20
}
console.log(x); // 10
}
testLet();

? const and Immutability of the Binding

const must be initialized and cannot be re-assigned. It is still block-scoped like let.

? View const Re-assignment Example

const PI = 3.14;
PI = 3.14159; // ❌ Error: Assignment to constant variable

When the value is an object or array, the binding is constant, but the contents are still mutable.

? View const with Object Example

const person = { name: "Alice" };
person.name = "Bob"; // ✅ Allowed
console.log(person.name); // Bob

? Live Output and Explanation

? What the Examples Show

testVar():
- Inside the if block, x becomes 20 and logs 20.
- Outside the block, the same x is still 20, so it logs 20 again.
testLet():
- Inside the if block, the inner x is 20, so it logs 20.
- Outside the block, the outer x is still 10, so it logs 10.
const PI:
- Trying to reassign PI causes a runtime error: “Assignment to constant variable”.
const person object:
- person still refers to the same object.
- Changing person.name from "Alice" to "Bob" is allowed and logs Bob.

? Tips and Best Practices

Use const by default. Switch to let only when you truly need to reassign a variable.
Avoid var in modern code unless necessary for legacy browser support.
Prefer block-scoped variables (let and const) to avoid accidental leaks into outer scopes.
Give meaningful names to const values that never change (for example, MAX_USERS, API_URL).

? Try It Yourself

Create a variable with let and try to re-declare it in the same scope. Observe the error you get.
Use var inside a function and see how it behaves across if blocks.
Use const to declare an object and try changing one of its properties.
Test hoisting by logging variables before they are declared using both var and let. Compare the results.