Difference between var, let and const in Javascript

There are a lot of tutorials on the internet that tries to grasp the difference between var, let, and const. But after going through many, it seemed like most of them just talked about the scope and functionality rather than the basic difference. So here I am trying to elaborate the basic.

Imagine you have a magic box where you can store toys 🧸

There are three kinds of boxes you can use:

---

1. var — The old box 🎁

🗣️ “I’m an old toy box. I sometimes behave strangely!”

• You can put a toy inside (var toy = "car").
• You can take the toy out and put in another (toy = "doll").
• But this box has a weird rule:
  It can pop up and exist before you even say it’s there! (This is called hoisting.)
• Also, these boxes don’t care if you’re inside a room or a cupboard — they just work everywhere in the house (global or function-scoped).

⚠️ Not safe to use anymore. Too much confusion.

Here is the simple code to show how it’s used

---

var toy = "car";
console.log(toy); // car

toy = "doll"; // we can change it
console.log(toy); // doll

// Hoisting example
console.log(game); // undefined — because var is hoisted!
var game = "chess";

💡Explanation:

• You can change toy.
• You can use game before you say what it is (but it shows undefined, not error) — weird!

2. let — The new, safer box 📦

🗣️ “I’m smarter than the old box!”

• You can change the toy inside (let toy = "car"; toy = "doll").
• But you can’t use me until you say I’m here (No hoisting problems).
• I’m very respectful — I only work inside the place (block) I’m put in, like inside a room only. (block scope)

✅ Use this when the toy might change later.

---

Here is the simple code to show how it’s used

let pet = "cat";
console.log(pet); // cat

pet = "dog"; // you can still change it
console.log(pet); // dog

// Scope example
if (true) {
  let snack = "cookie";
  console.log(snack); // cookie
}
console.log(snack); // ❌ Error! snack is only inside the if block

// Hoisting example
console.log(color); // ❌ Error! Cannot access 'color' before initialization
let color = "blue";

💡Explanation:

• let lets you change the value, like a refillable box.
• But it won’t let you peek in the box before declaring it — that’s safer.
• It also keeps things inside their room only (block scope).

3. const — The unchangeable box 🔒

🗣️ “Once I get a toy, I never change it!”

• You put one toy inside and lock the box (const toy = "car").
• You can’t change the toy (toy = "doll" ❌ — This gives an error).
• Like let, it works only in its room (block) and waits to be declared first.

✅ Use this when the toy (value) should stay the same forever.

const fruit = "apple";
console.log(fruit); // apple

fruit = "banana"; // ❌ Error! Can't change it

💡Explanation:

• Once you put something in the box, it’s locked — you can’t replace it.

---

Summary Chart for Older Kids 📊

Keyword	Can Change Value?	Scope	Hoisted?	Use When…
var	✅ Yes	Function	✅ Yes (weirdly)	Legacy code only
let	✅ Yes	Block	❌ No	You plan to change value
const	❌ No	Block	❌ No	Value should never change

I hope this sheds some light on this topic. You can watch the video below from Web Dev Simplified for deeper insight.