JavaScript Roadmap — Day 8: Assignment Operators

 

📋 In This Lesson Day 8

1. What is Assignment?

2. Basic = Operator

3. Compound Operators

4. Real World Use

5. Destructuring

6. Logical Assignment

7. Try It Yourself

8. Practice Tasks

JavaScript · Day 8 of 180 · Beginner Phase

Assignment Operators

Assignment operators are the workhorses of JavaScript — you use them in literally every program you will ever write. Master them completely today.

Day 8 / 180

Beginner Phase

Imagine you are running a small shop in Faisalabad. Every day you update your accounts:

💰 Aaj ki sale: totalSale = totalSale + 5000
📦 Stock kam hua: stock = stock - 10
🎯 Discount apply kiya: price = price * 0.9

Yeh sab operations itne common hain ke JavaScript ne inke liye shortcut operators banaye — taake tum baar baar same variable ka naam repeat na karo. totalSale = totalSale + 5000 ki jagah sirf totalSale += 5000 likhna kaafi hai.

Yeh sirf typing shortcut nahi hai — yeh professional code ka standard tarika hai. Koi bhi senior developer ko x = x + 1 dekhke pata chal jaata hai ke likhnay wala beginner hai. Aaj ke baad tum x++ ya x += 1 likhoge — aur code professional lagega.

1. Assignment Operators Kya Hain?

Assignment operator ek value ko variable mein store karta hai. Sabse basic = hai — lekin JavaScript mein 10+ assignment operators hain jo arithmetic aur assignment ko ek saath karte hain.

Operator	Matlab	Example	Same As
=	Assign karo	x = 5	—
+=	Add karke assign karo	x += 3	x = x + 3
-=	Minus karke assign karo	x -= 3	x = x - 3
*=	Multiply karke assign karo	x *= 2	x = x * 2
/=	Divide karke assign karo	x /= 2	x = x / 2
%=	Remainder assign karo	x %= 3	x = x % 3
**=	Power assign karo	x **= 2	x = x ** 2

2. Basic = Operator — Sirf Assignment

= sirf ek kaam karta hai — right side ki value ko left side ke variable mein store karta hai. Isko equality check mat samjho — woh == aur === ka kaam hai. = sirf store karta hai.

JavaScript — Basic Assignment

// Simple assignment
let name    = "Waheed";
let age     = 22;
let city    = "Faisalabad";
let salary  = 50000;

// Chained assignment — ek saath multiple variables
let a, b, c;
a = b = c = 10;
console.log(a, b, c); // 10 10 10

// Value update karna
let score = 0;
score = 100;  // purani value replace ho gayi
score = 250;  // phir se replace
console.log(score); // 250

// = aur === ka farq — ye common mistake hai!
let x = 5;        // = stores the value
console.log(x === 5); // === checks equality → true

🔥 Sabse Common Beginner Mistake: if (x = 5) likhna — yeh equality check nahi karta, yeh x mein 5 store karta hai aur hamesha true return karta hai! Hamesha if (x === 5) likho conditions mein.

3. Compound Assignment Operators — Shortcuts 🔥

Ye operators arithmetic aur assignment ek saath karte hain. Ye sirf shortcut nahi — yeh professional JavaScript ka standard style hai. Inhe seekhna zaroori hai:

JavaScript — Sab Compound Operators

let x = 10;

// += Addition assignment
x += 5;
console.log(x); // 15  (10 + 5)

// -= Subtraction assignment
x -= 3;
console.log(x); // 12  (15 - 3)

// *= Multiplication assignment
x *= 2;
console.log(x); // 24  (12 * 2)

// /= Division assignment
x /= 4;
console.log(x); // 6   (24 / 4)

// %= Remainder assignment
x %= 4;
console.log(x); // 2   (6 % 4)

// **= Exponentiation assignment
x **= 3;
console.log(x); // 8   (2 ** 3)

// += strings pe bhi kaam karta hai!
let msg = "Hello";
msg += " Waheed";
msg += "!";
console.log(msg); // "Hello Waheed!"

4. Real World Use — Shop Ka Hisaab 🏪

Ye operators real applications mein kaise use hote hain — ek practical example se samjhte hain. Faisalabad mein ek kapray ki dukan ka hisaab JavaScript mein:

JavaScript — Dukan Ka Hisaab

// Dukan ki starting inventory
let totalSale  = 0;
let stock      = 100;  // pieces
let price      = 1500; // per piece (Rs)
let reputation = 5;    // rating out of 10

// Subah sale shuru — 15 pieces bikay
stock     -= 15;
totalSale += 15 * price;
console.log(`Subah: Stock=${stock}, Sale=Rs${totalSale}`);

// Dopahar — 10% discount dia
price *= 0.9;
console.log(`Discount price: Rs${price}`);

// Sham — 20 aur pieces bikay
stock     -= 20;
totalSale += 20 * price;

// Customer ne 5 star dia
reputation += 2;

console.log(`Din ka aakhir:`);
console.log(`Total Sale: Rs${totalSale}`);
console.log(`Bacha Stock: ${stock} pieces`);
console.log(`Rating: ${reputation}/10`);

Pro Tip #1 — += strings ke saath bhi

+= sirf numbers ke liye nahi — strings ke saath bhi kaam karta hai. Long strings banana ho toh str += " more text" use karo. HTML generate karte waqt ye bahut useful hai — loop mein html += "<li>" + item + "</li>".

Pro Tip #2 — %= even/odd check ke liye

%= ka sabse common use even/odd check karna hai. if (number % 2 === 0) — agar remainder 0 hai toh even hai. Games mein, pagination mein, loops mein — ye har jagah use hota hai. Isko zaroor yaad rakho.

Pro Tip #3 — **= power calculations ke liye

**= ES2016 mein aaya. x **= 2 matlab x ko square karo. Compound interest calculate karna ho, area nikaalni ho, ya scientific calculations — **= use karo. Math.pow(x, 2) se ziada clean lagta hai.

5. Destructuring Assignment — Modern JavaScript 🔥

Destructuring ES6 ka ek powerful feature hai. Isse tum array ya object se multiple values ek saath extract kar sakte ho — ek hi line mein. Ye React, Node.js, aur modern JavaScript mein har jagah use hota hai:

JavaScript — Array Destructuring

// Purana tarika — boring
const colors = ["red", "green", "blue"];
const first  = colors[0];
const second = colors[1];
const third  = colors[2];

// Naya tarika — destructuring ✅
const [red, green, blue] = colors;
console.log(red);   // "red"
console.log(green); // "green"
console.log(blue);  // "blue"

// Skip karna — comma use karo
const [,, thirdColor] = colors;
console.log(thirdColor); // "blue"

// Default values
const [a = "default", b = "default"] = ["Waheed"];
console.log(a); // "Waheed"
console.log(b); // "default"

// Do variables swap karna — classic trick!
let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1 — swapped!

JavaScript — Object Destructuring

const developer = {
  name:   "Waheed",
  city:   "Faisalabad",
  salary: 150000,
  skills: ["JavaScript", "React"]
};

// Purana tarika
const name   = developer.name;
const city   = developer.city;

// Destructuring tarika ✅
const { name, city, salary } = developer;
console.log(name);   // "Waheed"
console.log(city);   // "Faisalabad"
console.log(salary); // 150000

// Rename karna
const { name: devName, city: devCity } = developer;
console.log(devName); // "Waheed"

// Default value
const { name, experience = 0 } = developer;
console.log(experience); // 0 — property nahi thi

// Function parameter mein destructuring
function greet({ name, city }) {
  console.log(`Hello ${name} from ${city}!`);
}
greet(developer); // Hello Waheed from Faisalabad!

6. Logical Assignment Operators — ES2021 ✨

Ye teen operators ES2021 mein aaye. Ye logical operators aur assignment ko combine karte hain — modern JavaScript mein bahut use hote hain:

JavaScript — Logical Assignment

// ||= — assign karo agar value falsy hai
let username = "";
username ||= "Guest";
console.log(username); // "Guest" — kyunki "" falsy tha

let name = "Waheed";
name ||= "Guest";
console.log(name); // "Waheed" — already truthy tha

// &&= — assign karo agar value truthy hai
let isAdmin = true;
isAdmin &&= false;
console.log(isAdmin); // false

// ??= — assign karo sirf agar null ya undefined hai
let score = null;
score ??= 0;
console.log(score); // 0

let points = 0;
points ??= 100;
console.log(points); // 0 — 0 null nahi tha!

7. Try It Yourself

Code edit karo aur Run Code dabao. Shop wala example apne naam aur city ke saath try karo!

✏️ Try it Yourself — Assignment Operators

// Compound operators let score = 0; score += 50; console.log("After +=50:", score); score -= 10; console.log("After -=10:", score); score *= 2; console.log("After *=2:", score); score /= 4; console.log("After /=4:", score); score %= 7; console.log("After %=7:", score); score **= 2; console.log("After **=2:", score); // String += let msg = "Hello"; msg += " from"; msg += " Faisalabad!"; console.log(msg); // Array Destructuring const [first, second, third] = [10, 20, 30]; console.log(first, second, third); // Object Destructuring const { name, city, salary } = { name: "Waheed", city: "Faisalabad", salary: 150000 }; console.log(`${name} from ${city} earns Rs${salary}`); // Swap trick let a = "React", b = "JavaScript"; [a, b] = [b, a]; console.log("Swapped:", a, b);

OUTPUT

// Click Run Code to see output

💡 Code edit karo aur Run dabao!

8. Practice Tasks

Task 1 — Easy: Counter Banana

Ek counter variable banao starting value 0 ke saath. Phir += se 5 baar 10 add karo. -= se 2 baar 15 minus karo. Final value console mein print karo. Expected answer: 20.

Task 2 — Medium: Apna Profile Destructure Karo

Ek profile object banao apne name, age, city, skills (array) ke saath. Destructuring use karke sabhi values alag variables mein nikalo. Phir ek template literal mein sab print karo: "Main [name] hun, [age] saal ka, [city] se. Mujhe [skill1] aur [skill2] aati hai."

Task 3 — Hard: Bank Account Simulator

Ek simple bank account simulate karo. Start: balance = 10000. Operations: deposit 5000 (+=), withdraw 3000 (-=), 2% monthly interest (*= 1.02), bank charges 1% (*= 0.99). Har step ke baad balance print karo. Final mein ??= use karo — agar balance null ya undefined ho toh 0 set karo.

Next Lesson

Day 9 — Comparison Operators

View Full Roadmap →

Roadmap pasand aa raha hai?

Muhammad Waheed Asghar ko follow karo daily JavaScript tips ke liye!

Follow on LinkedIn Follow on Facebook

``` --- ## 📋 Post Details **Title:** ``` JavaScript Roadmap — Day 8: Assignment Operators