Let’s dive into Variables in JavaScript step by step.

---

📦 Variables in JavaScript

A variable is a container for storing data (values).
👉 Think of it as a labeled box where you can keep information.

---

1️⃣ Declaring Variables

In JavaScript, you can declare variables using var, let, and const.

🔹 var (Old way)

• Function-scoped (not block-scoped).
• Can be redeclared and updated.
• Not recommended in modern JS.

var name = "Raj";
var name = "Kumar"; // Redeclaration allowed
console.log(name);  // Kumar

---

🔹 let (Modern way)

• Block-scoped (exists only inside { }).
• Can be updated, but not redeclared in the same scope.

let age = 20;
age = 21;       // ✅ allowed
// let age = 22; // ❌ Error: cannot redeclare
console.log(age); 

---

🔹 const (Constant)

• Block-scoped.
• Cannot be redeclared or reassigned.
• Must be assigned at the time of declaration.

const PI = 3.14;
// PI = 3.15; ❌ Error (cannot reassign)
console.log(PI);

---

2️⃣ Rules for Naming Variables (Identifiers)

✅ Allowed:

• Letters, digits, _, $
• Must start with a letter, _, or $ (not a number)
• Case-sensitive (myVar ≠ myvar)

❌ Not allowed:

let 1name = "Raj";   // ❌ Invalid
let my-name = "Raj"; // ❌ Invalid
let myName = "Raj";  // ✅ Valid (camelCase recommended)

---

3️⃣ Types of Values Variables Can Hold

JavaScript variables can store different data types:

let str = "Hello";      // string
let num = 42;           // number
let isActive = true;    // boolean
let x;                  // undefined
let y = null;           // null
let arr = [1, 2, 3];    // array (object)
let obj = {name: "Raj"}; // object

---

4️⃣ Variable Scope

• Global Scope → Accessible everywhere.
• Local/Function Scope → Accessible only inside the function.
• Block Scope (let & const) → Accessible only inside { }.

{
  let a = 10;
  var b = 20;
}
console.log(b); // ✅ Works (var is function-scoped)
// console.log(a); ❌ Error (let is block-scoped)

---

5️⃣ Hoisting (Important)

• var is hoisted (moved to the top) but initialized as undefined.
• let and const are also hoisted but in a “temporal dead zone” (not accessible before declaration).

console.log(x); // undefined (hoisted)
var x = 5;

console.log(y); // ❌ Error (cannot access before initialization)
let y = 10;

---

✅ Summary

• var → old, function-scoped, can redeclare.
• let → modern, block-scoped, can update but not redeclare.
• const → modern, block-scoped, cannot redeclare or reassign.
• Variables can store any type (string, number, object, etc.).
• Variable names are case-sensitive and must follow rules.

---

Perfect 👍 Here’s a clear comparison table of var, let, and const in JavaScript:

---

📊 Difference Between var, let, and const

Feature	var	let	const
Scope	Function-scoped	Block-scoped ({ })	Block-scoped ({ })
Redeclaration	✅ Allowed	❌ Not allowed	❌ Not allowed
Reassignment	✅ Allowed	✅ Allowed	❌ Not allowed
Default Initialization	undefined	❌ Not initialized (TDZ error)	❌ Not initialized (TDZ error)
Hoisting	✅ Hoisted (initialized as undefined)	✅ Hoisted (but in Temporal Dead Zone)	✅ Hoisted (but in Temporal Dead Zone)
Use in Loops	Not safe (because no block scope)	Safe	Safe
Best Use Case	Legacy code, older browsers	General-purpose variables that may change	Constants that should never change

---

🔹 Examples

var

var x = 10;
var x = 20;  // ✅ Redeclaration allowed
console.log(x); // 20

let

let y = 30;
// let y = 40; // ❌ Error: redeclaration not allowed
y = 40;       // ✅ Reassignment allowed
console.log(y); // 40

const

const PI = 3.14;
// PI = 3.1415; // ❌ Error: cannot reassign
console.log(PI); // 3.14

---

✅ In modern JavaScript:

• Use let for variables that can change.
• Use const for constants or values that shouldn’t change.
• Avoid var (only for legacy/old code).