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

Look at how a simple shop tracking app updates its data every day:

💰 Daily sale recorded: totalSale = totalSale + 5000
📦 Stock decreased: stock = stock - 10
🎯 Discount applied: price = price * 0.9

These operations are so common that JavaScript created shortcut operators for them — so you never have to repeat the variable name twice. Instead of totalSale = totalSale + 5000 you just write totalSale += 5000.

This is not just a typing shortcut — it is the professional standard. Any senior developer who sees x = x + 1 immediately knows it was written by a beginner. After today you will write x++ or x += 1 — and your code will look professional.

1. What Are Assignment Operators?

An assignment operator stores a value into a variable. The most basic is = — but JavaScript has 10+ assignment operators that combine arithmetic and assignment into a single step.

Operator	Meaning	Example	Same As
=	Assign	x = 5	—
+=	Add and assign	x += 3	x = x + 3
-=	Subtract and assign	x -= 3	x = x - 3
*=	Multiply and assign	x *= 2	x = x * 2
/=	Divide and assign	x /= 2	x = x / 2
%=	Remainder and assign	x %= 3	x = x % 3
**=	Power and assign	x **= 2	x = x ** 2

2. The Basic = Operator — Just Assignment

= does one thing only — it stores the right side value into the left side variable. Do not confuse it with equality checking — that is the job of == and ===. The single = only stores.

JavaScript — Basic Assignment

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

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

// Updating a value
let score = 0;
score = 100;  // old value replaced
score = 250;  // replaced again
console.log(score); // 250

// = vs === — most common beginner mistake!
let x = 5;            // = stores the value
console.log(x === 5); // === checks equality → true

🔥 Most Common Beginner Mistake: Writing if (x = 5) — this does not check equality, it assigns 5 to x and always returns true! Always write if (x === 5) inside conditions.

3. Compound Assignment Operators — The Professional Way 🔥

These operators combine arithmetic and assignment into a single step. This is not just shorter — it is the standard style in professional JavaScript. Every senior developer writes code this way:

JavaScript — All Compound Operators

let x = 10;

x += 5;   console.log(x); // 15  (10 + 5)
x -= 3;   console.log(x); // 12  (15 - 3)
x *= 2;   console.log(x); // 24  (12 * 2)
x /= 4;   console.log(x); // 6   (24 / 4)
x %= 4;   console.log(x); // 2   (6 % 4)
x **= 3;  console.log(x); // 8   (2 ** 3)

// += works with strings too!
let msg = "Hello";
msg += " Waheed";
msg += "!";
console.log(msg); // "Hello Waheed!"

4. Real World Use — Shop Inventory Tracker 🏪

Here is how these operators work in a real application — a shop inventory tracker for a clothing store in Faisalabad:

JavaScript — Shop Inventory Tracker

let totalSale  = 0;
let stock      = 100;
let price      = 1500;
let rating     = 5;

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

// Afternoon — 10% discount applied
price *= 0.9;
console.log(`Discounted price: Rs${price}`);

// Evening — 20 more pieces sold
stock     -= 20;
totalSale += 20 * price;
rating    += 2;

console.log(`Total Sale: Rs${totalSale}`);
console.log(`Remaining Stock: ${stock} pieces`);
console.log(`Store Rating: ${rating}/10`);

Pro Tip #1 — += works with strings too

+= is not just for numbers — it concatenates strings too. When building HTML dynamically in a loop use html += "<li>" + item + "</li>". This is one of the most common patterns in real JavaScript applications.

Pro Tip #2 — %= for even/odd checking

The most common use of %= is checking even or odd — if (number % 2 === 0). If the remainder is 0 the number is even. You will use this in games, pagination, loops, and alternating row colors in tables.

Pro Tip #3 — **= for power calculations

**= was added in ES2016. x **= 2 squares x. Use it for compound interest, area calculations, and scientific formulas. It is cleaner than Math.pow(x, 2) and reads more naturally in code.

5. Destructuring Assignment — Modern JavaScript 🔥

Destructuring is an ES6 feature that lets you extract multiple values from an array or object in a single line. It is used everywhere in React, Node.js, and modern JavaScript. Once you learn it you will use it every single day:

JavaScript — Array Destructuring

// Old way — repetitive
const colors = ["red", "green", "blue"];
const first  = colors[0];
const second = colors[1];

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

// Skip elements using commas
const [,, thirdColor] = colors;
console.log(thirdColor); // "blue"

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

// Swap two variables — classic one-liner 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"]
};

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

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

// Default value if property doesn't exist
const { name: n, experience = 0 } = developer;
console.log(experience); // 0 — property didn't exist

// Destructuring in function parameters
function greet({ name, city }) {
  console.log(`Hello ${name} from ${city}!`);
}
greet(developer); // Hello Waheed from Faisalabad!

6. Logical Assignment Operators — ES2021 ✨

These three operators were added in ES2021. They combine logical operators with assignment — and you will see them constantly in modern React and Node.js codebases:

JavaScript — Logical Assignment Operators

// ||= assign if value is falsy
let username = "";
username ||= "Guest";
console.log(username); // "Guest" — "" was falsy

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

// &&= assign only if value is truthy
let isAdmin = true;
isAdmin &&= false;
console.log(isAdmin); // false

// ??= assign only if null or undefined
let score = null;
score ??= 0;
console.log(score); // 0

let points = 0;
points ??= 100;
console.log(points); // 0 — 0 is not null/undefined!

// Real world — default config values
const config = { theme: null, lang: "en" };
config.theme ??= "dark";
config.lang  ??= "ur";
console.log(config); // { theme: "dark", lang: "en" }

7. Try It Yourself

Edit the code and click Run Code. Try the shop example with your own name and city!

✏️ 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); // Logical assignment let theme = null; theme ??= "dark"; console.log("Theme:", theme);

OUTPUT

// Click Run Code to see output

💡 Edit the code and click Run!

8. Practice Tasks

Task 1 — Easy: Counter Challenge

Create a counter variable starting at 0. Use += to add 10 five times. Use -= to subtract 15 twice. Log the final value. Expected answer: 20.

Task 2 — Medium: Destructure Your Profile

Create a profile object with your name, age, city, and skills array. Use destructuring to extract all values. Then log a complete sentence: "I am [name], [age] years old from [city]. I know [skill1] and [skill2]."

Task 3 — Hard: Bank Account Simulator

Simulate a bank account starting at balance = 10000. Apply: deposit Rs5000 (+=), withdraw Rs3000 (-=), 2% monthly interest (*= 1.02), 1% bank charges (*= 0.99). Log balance after every step. Finally use ??= to set balance to 0 if it is null or undefined.

Next Lesson

Day 9 — Comparison Operators

View Full Roadmap →

Enjoying this roadmap?

Follow Muhammad Waheed Asghar for daily JavaScript tips and updates!

Follow on LinkedIn Follow on Facebook