JavaScript – let, const, var

In JavaScript, var, let, and const are three different ways to declare variables, each with distinct behaviors regarding scope, redeclaration, updating, and hoisting. Here’s a detailed explanation of their differences and when to use each:

var

Scope:
var is function-scoped, meaning it is accessible throughout the function in which it is declared. If declared outside any function, it becomes globally scoped.javascriptfunction example() { var x = 10; if (true) { var x = 20; // Same variable, redeclared } console.log(x); // 20 }Unlike block-scoping, var ignores block boundaries like {} unless they are part of a function.
Redeclaration:
You can redeclare a var variable within the same scope without errors.javascriptvar a = 5; var a = 10; // No error
Updating:
The value of a var variable can be updated anytime.javascriptvar b = 1; b = 2; // Allowed
Hoisting:
Variables declared with var are hoisted to the top of their scope and initialized with undefined. This means you can use them before their declaration, though their value will be undefined until assigned.javascriptconsole.log(c); // undefined var c = 3;
When to Use:
Use var only when working with older JavaScript code (pre-ES6) or if you specifically need function-scoping. In modern JavaScript, var is generally avoided because its loose scoping rules can lead to bugs, such as unintentional variable overwrites.

let

Scope:
let is block-scoped, meaning it is only accessible within the block (e.g., {}) where it is declared, such as inside loops or if statements.javascriptif (true) { let y = 5; console.log(y); // 5 } console.log(y); // ReferenceError: y is not defined
Redeclaration:
You cannot redeclare a let variable within the same scope.javascriptlet z = 10; let z = 20; // SyntaxError: Identifier 'z' has already been declared
Updating:
You can update the value of a let variable after declaration.javascriptlet w = 15; w = 25; // Allowed
Hoisting:
let variables are hoisted to the top of their block but are not initialized. Attempting to use them before declaration results in a ReferenceError (this is known as the “temporal dead zone”).javascriptconsole.log(d); // ReferenceError: Cannot access 'd' before initialization let d = 4;
When to Use:
Use let when you need a variable whose value will change over time, such as a loop counter or a value that will be reassigned.javascriptfor (let i = 0; i < 3; i++) { console.log(i); // 0, 1, 2 } console.log(i); // ReferenceError: i is not defined

const

Scope:
Like let, const is block-scoped and is only accessible within the block where it is declared.javascriptif (true) { const k = 100; console.log(k); // 100 } console.log(k); // ReferenceError: k is not defined
Redeclaration:
You cannot redeclare a const variable in the same scope.javascriptconst m = 50; const m = 60; // SyntaxError: Identifier 'm' has already been declared
Updating:
You cannot reassign a const variable after its initial assignment. However, if the variable holds an object or array, you can modify its properties or elements (because the reference remains constant, not the content).javascriptconst n = 30; n = 40; // TypeError: Assignment to constant variable const obj = { value: 1 }; obj.value = 2; // Allowed console.log(obj.value); // 2 obj = { value: 3 }; // TypeError: Assignment to constant variable
Hoisting:
Like let, const is hoisted but not initialized, so it cannot be accessed before declaration.javascriptconsole.log(e); // ReferenceError: Cannot access 'e' before initialization const e = 5;
When to Use:
Use const for variables that should not be reassigned after initialization, such as constants, configuration values, or references to objects/arrays whose structure might change but whose reference should remain fixed.javascriptconst PI = 3.14159; const settings = { theme: "dark" }; settings.theme = "light"; // Allowed

Key Differences at a Glance

Feature	var	let	const
Scope	Function-scoped	Block-scoped	Block-scoped
Redeclaration	Allowed	Not allowed	Not allowed
Updating	Allowed	Allowed	Not allowed (except object/array contents)
Hoisting	Hoisted, initialized with undefined	Hoisted, not initialized	Hoisted, not initialized

When to Use Each

var:
Use sparingly, typically only in legacy code or when you intentionally need function-scoping. Modern JavaScript favors let and const for better predictability.
let:
Use when you need a variable that will be reassigned, such as in loops or when tracking changing state.javascriptlet count = 0; count += 1; // Valid use case
const:
Use by default for variables that won’t be reassigned. This improves code readability and prevents accidental reassignments. It’s especially useful for constants or fixed references.javascriptconst MAX_USERS = 100; const userData = []; userData.push({ name: "Alice" }); // Valid

Best Practices

Prefer let and const over var because block-scoping reduces the risk of scope-related bugs.
Use const as your default choice to signal intent and prevent unintended reassignments. Switch to let only when reassignment is explicitly required.
Avoid var in modern JavaScript unless you have a specific reason tied to its function-scoping behavior.

By understanding these differences and applying these guidelines, you can write cleaner, more maintainable JavaScript code.