Operators in JavaScript

⭐ Operators in JavaScript — The Most Complete, Easy & Practical Guide

If variables are containers… then operators are the tools we use to work with those containers. We use operators every single day in JavaScript — knowingly or unknowingly. They help us:

• calculate
• compare
• assign
• check conditions
• combine values
• manipulate logic
• perform complex expressions

This post gives you a complete revision of all operators, with super-clear examples, covering every possible scenario.

Let’s begin. 👇

---

🔶 1. What Are Operators?

Operators are symbols that tell JavaScript to perform an action.

Example:

let x = 10 + 20;

Here:

• = → assignment operator
• + → arithmetic operator

Simple, right? Now let’s explore all categories one by one.

---

🔥 2. Arithmetic Operators

Used for math calculations.

Operator	Meaning
+	Addition
-	Subtraction
*	Multiplication
/	Division
%	Modulus (remainder)
**	Exponentiation
++	Increment
--	Decrement

Examples:

console.log(10 + 5); // 15
console.log(10 - 5); // 5
console.log(10 * 5); // 50
console.log(10 / 5); // 2
console.log(10 % 3); // 1 (remainder)
console.log(2 ** 3); // 8 (2 to the power 3)

Increment/Decrement

let x = 1;

console.log(x++); // 1 (post-increment, return old, then increase)
console.log(x); // 2

let y = 1;
console.log(++y); // 2 (pre-increment, increase first)

---

🔥 3. Assignment Operators

Used to assign values to variables.

Operator	Meaning
=	Assign
+=	Add & assign
-=	Subtract & assign
*=	Multiply & assign
/=	Divide & assign
%=	Modulus & assign
**=	Exponent & assign

Examples:

let a = 10;
a += 5; // a = a + 5 → 15
a -= 2; // 13
a *= 2; // 26
a /= 2; // 13
a %= 5; // 3
a **= 2; // 9

---

🔥 4. Comparison Operators

Used to compare two values.

Operator	Meaning
==	Equal (loose)
===	Strict equal (value + type)
!=	Not equal (loose)
!==	Strict not equal
>	Greater
<	Less
>=	Greater or equal
<=	Less or equal

Examples:

console.log(5 == "5"); // true (value same)
console.log(5 === "5"); // false (type different)
console.log(5 != 6); // true
console.log(5 !== "5"); // true
console.log(4 > 2); // true
console.log(4 <= 4); // true

⚠️ Important: Always prefer === instead of == in real projects to avoid weird behavior.

---

🔥 5. Logical Operators

Operator	Meaning
&&	AND
||	OR
!	NOT

Examples:

console.log(true && false); // false
console.log(true || false); // true
console.log(!true); // false

⚡ Real-life use in conditions:

let age = 20;
let hasID = true;

if (age >= 18 && hasID) {
  console.log("Allowed");
}

---

🔥 6. String Operators

JavaScript uses + to concatenate strings.

Example:

let name = "Dev" + " Shah";
console.log(name); // Dev Shah

💡 Numbers convert to strings when using +:

console.log("Age: " + 20); // Age: 20

---

🔥 7. Conditional (Ternary) Operator

Shorter alternative to if…else.

condition ? valueIfTrue : valueIfFalse;

Examples:

let age = 16;
let msg = age >= 18 ? "Adult" : "Minor";
console.log(msg); // Minor

⚡ Nested ternary:

let marks = 85;

let grade = marks > 90 ? "A+" : marks > 75 ? "A" : "B";

console.log(grade); // A

---

🔥 8. Type Operators

typeof

Returns data type.

console.log(typeof 10); // "number"
console.log(typeof "hello"); // "string"
console.log(typeof null); // "object" (known JS bug)
console.log(typeof []); // "object"
console.log(typeof undefined); // "undefined"

instanceof

Checks if an object belongs to a class.

class Animal {}
let dog = new Animal();

console.log(dog instanceof Animal); // true

---

🔥 9. Bitwise Operators (Useful in low-level tasks)

Operator	Meaning
&	AND
|	OR
~	NOT
^	XOR
<<	Left shift
>>	Right shift
>>>	Zero-fill right shift

Example:

console.log(5 & 1); // 1
console.log(5 | 1); // 5
console.log(5 ^ 1); // 4

---

🔥 10. Nullish Coalescing Operator (??)

Returns the right value only if left value is null or undefined.

let name = null;
let user = name ?? "Guest";

console.log(user); // Guest

Compare with OR (||)

console.log(0 || "fallback"); // fallback
console.log(0 ?? "fallback"); // 0 (NOT null/undefined)

---

🔥 11. Optional Chaining Operator (?.)

Avoids “Cannot read property of undefined” errors.

Example:

let user = {};
console.log(user.profile?.email); // undefined (safe)

---

🔥 12. Spread Operator (...)

Used to expand arrays/objects.

Examples:

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
console.log(newArr);

For objects:

let obj1 = { a: 1 };
let obj2 = { ...obj1, b: 2 };

---

🔥 13. Rest Operator (...)

Collects multiple values into a single variable.

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b);
}

console.log(sum(1, 2, 3, 4)); // 10

---

🔥 14. The Comma Operator

Executes multiple expressions but returns the last one.

let x = (1, 2, 3);
console.log(x); // 3

---

✨ Summary Table: All Operators

Category	Operators
Arithmetic	+, -, *, /, %, **, ++, --
Assignment	=, +=, -=, *=, /=, %=, **=
Comparison	==, ===, !=, !==, >, <, >=, <=
Logical	&&, ||, !
String	+
Conditional	?:
Type	typeof, instanceof
Bitwise	&, |, ~, ^, <<, >>, >>>
Advanced	??, ?. (optional chaining), ...spread, ...rest
Misc	, (comma operator)

---

🎉 Final Thoughts

JavaScript operators are the building blocks of every expression and every decision your code makes.

Once you master operators:

• your logic becomes clearer
• conditions become smarter
• calculations become safer
• your code becomes cleaner
• debugging becomes much easier

Now you officially understand every operator used in JS, from simple addition to complex nullish coalescing!

---

If you want, comment for next topic…

👉 “Expressions vs Statements in JS”
👉 “Operator Precedence (Which runs first?)”
👉 “All about the Spread & Rest Operator (with advanced patterns)”
👉 “Common mistakes developers make with operators”
etc...

Just tell me the next topic!