Difference-between-var-let-const.md

What is the Difference Between var, let, and const in JavaScript ?

In JavaScript, var, let, and const are used to declare variables. However, they differ in terms of scope, hoisting, reassignability, and block-level usage. Understanding these differences is crucial for writing clean, efficient, and bug-free code.

---

1. var

var was the original way to declare variables in JavaScript before ES6.

Characteristics:

• Scope: Function-scoped.
  • A variable declared with var is accessible within the function it is defined in, but not outside of it.
• Hoisting: Variables declared with var are hoisted to the top of their scope and initialized as undefined.
• Reassignment: Variables declared with var can be re-assigned and re-declared.
• Block-Level Behavior: var is not block-scoped; it ignores block-level {} braces and behaves as though the block doesn't exist.

Example:

function example() {
  if (true) {
    var x = 10;
  }
  console.log(x); // Output: 10 (accessible outside the block)
}
example();

console.log(y); // Output: undefined (hoisted)
var y = 20;

---

2. let

let was introduced in ES6 as an improvement over var.

Characteristics:

• Scope: Block-scoped.
  • Variables declared with let are accessible only within the block they are defined in.
• Hoisting: Variables declared with let are hoisted but are not initialized, meaning they cannot be accessed before their declaration (Temporal Dead Zone).
• Reassignment: Variables declared with let can be re-assigned but not re-declared within the same scope.

Example:

function example() {
  if (true) {
    let x = 10;
    console.log(x); // Output: 10
  }
  // console.log(x); // Error: x is not defined (block-scoped)
}
example();

let y = 20;
// let y = 30; // Error: Identifier 'y' has already been declared
y = 30; // Reassignment works

---

3. const

const was also introduced in ES6 and is used for variables that should not be re-assigned.

Characteristics:

• Scope: Block-scoped.
  • Similar to let, const is accessible only within the block it is defined in.
• Hoisting: Variables declared with const are hoisted but not initialized, leading to a Temporal Dead Zone.
• Reassignment: Variables declared with const cannot be re-assigned or re-declared.
• Constant Reference: If a const variable holds an object or array, its properties or elements can still be modified because const prevents reassignment of the reference, not the content.

Example:

const x = 10;
// x = 20; // Error: Assignment to constant variable

const obj = { name: "John" };
obj.name = "Doe"; // This works (modifying object properties)
console.log(obj); // Output: { name: "Doe" }

// const y; // Error: Missing initializer in const declaration

---

Key Differences: var, let, and const

Feature	var	let	const
Scope	Function-scoped	Block-scoped	Block-scoped
Hoisting	Hoisted and initialized	Hoisted but uninitialized	Hoisted but uninitialized
Reassignment	Allowed	Allowed	Not allowed
Re-declaration	Allowed	Not allowed (same scope)	Not allowed (same scope)
Block-Level Usage	Not block-scoped	Block-scoped	Block-scoped

---

Summary

• Use var only when you need to support very old browsers or specific legacy cases.
• Use let for variables that may change value.
• Use const for variables that should not be reassigned (e.g., constants or fixed references).

By understanding the differences, you can choose the appropriate variable declaration method for your needs, making your code cleaner and more predictable.