JavaScript Roadmap — Day 3: Variables — var, let, and const
JavaScript · Day 3 of 180
Beginner Phase
Variables — var, let, and const
Variables are containers that store data. Understanding var, let, and const is the foundation of writing clean, bug-free JavaScript.
Day 3 / 180
Beginner Phase
Every program needs to store data — names, numbers, scores, prices. In JavaScript, we use variables to store this data. There are three ways to create variables: var (old), let (modern), and const (constant). Choosing the right one prevents bugs and makes your code predictable.
What is a Variable?
A variable is like a labeled box — you put data inside it and give it a name so you can find it later.
JavaScript — Variables
// Three ways to declare variablesvar name = "Waheed"; // old waylet age = 22; // modern — can changeconst country = "Pakistan"; // constant — cannot change
console.log(name); // Waheed
console.log(age); // 22
console.log(country); // Pakistan
var vs let vs const — Quick Comparison
Feature
var
let
const
Scope
Function scope
Block scope
Block scope
Reassign
✅ Yes
✅ Yes
❌ No
Redeclare
✅ Yes
❌ No
❌ No
Hoisting
Yes (undefined)
Yes (TDZ)
Yes (TDZ)
Use today?
❌ Avoid
✅ Yes
✅ Yes (prefer)
let — The Modern Variable
Use let when the value will change later — like a counter, score, or user input.
JavaScript — let
let score = 0;
score = 10; // ✅ OK — let can be reassigned
score = 25; // ✅ OK again
console.log(score); // 25// Block scope — only lives inside {}
{
let x = 100;
console.log(x); // 100 — works inside
}
console.log(x); // ❌ ReferenceError — x is not defined outside
const — The Constant
Use const when the value should NOT change — like a website URL, API key, or configuration value. This is the default choice in modern JavaScript.
JavaScript — const
const PI = 3.14159;
const siteName = "WaheedBlog";
// PI = 3; // ❌ TypeError — cannot reassign const// IMPORTANT: const with objects — properties CAN changeconst user = { name: "Waheed", age: 22 };
user.age = 23; // ✅ OK — modifying property
console.log(user); // { name: "Waheed", age: 23 }// user = {}; // ❌ Error — cannot reassign the variable itself
var — Why You Should Avoid It
var was the original way to declare variables — but it has confusing behavior that causes bugs. Modern JavaScript uses let and const instead.
JavaScript — Why var is problematic
// Problem 1: var leaks out of blocks
{
var x = 10;
}
console.log(x); // 10 — var leaks! (let would give error)// Problem 2: var can be redeclared (confusing!)var name = "Waheed";
var name = "Ali"; // No error — overwrites silently!// Problem 3: Hoisting — var is undefined before declaration
console.log(city); // undefined (no error, but wrong!)var city = "Bahawalpur";
Pro Tips
Pro Tip #1 — Use const by default
Start with const for everything. Only switch to let if you know the value will change. This makes your code safer and more predictable. Never use var in modern JavaScript.
Pro Tip #2 — Use camelCase naming
JavaScript convention: myVariableName not my_variable_name. Use descriptive names — userAge is better than just x.
Pro Tip #3 — const does not mean immutable
const prevents reassigning the variable — but if it holds an object or array, the contents CAN still be changed. const only locks the reference, not the data inside.
Try it Yourself
✏️ Try it Yourself — var, let, const
// Output will appear here
💡 Code edit karo aur Run dabao!
Today's Practice Tasks
Task 1 — Declare All Three
Declare variables using var, let, and const. Try reassigning each one and observe what error you get with const.
Task 2 — Block Scope Test
Create a block using {} and declare a variable with let inside it. Try accessing it outside the block. Then do the same with var — notice the difference.
Mini Exercise — Your Profile
Create variables for: your name (const), age (let), city (const), isStudent (const). Log them all with a descriptive message using template literals.
Coming Next
Day 4 — Data Types: String, Number, Boolean
Learn the 7 data types of JavaScript and how to work with them
.jpg.png)
