JavaScript Operators: The Basics You Need to Know

Every JavaScript program — no matter how simple or complex — runs on operators. That + sign when you add two numbers? An operator. The === inside your if statement? Also an operator. The && that checks two conditions at once? Yep, operator.

They're everywhere, and once you truly understand them, reading and writing JavaScript becomes dramatically easier.

In this article, we'll cover the four essential operator categories that show up in everyday JavaScript code — with tables, console examples, and a practice assignment at the end.

Let's get into it. 🚀

---

📋 What We'll Cover

• What are operators?
• Arithmetic operators
• Comparison operators
• Logical operators
• Assignment operators
• Hands-on practice assignment
• Quick-reference summary

---

What Are Operators?

An operator is a symbol (or keyword) that performs an operation on one or more values. The values it operates on are called operands.

console.log(10 + 5); // 15
//           ↑   ↑
//      operand  operand
//             ↑
//          operator

Simple enough. Now let's look at the four categories you'll use constantly.

---

Arithmetic Operators — Doing the Math

Arithmetic operators perform mathematical calculations. If you've done any basic math, these will feel instantly familiar.

Operator	Name	Example	Output
+	Addition	10 + 3	13
-	Subtraction	10 - 3	7
*	Multiplication	10 * 3	30
/	Division	10 / 3	3.333...
%	Modulus	10 % 3	1

Let's see them in action

let a = 10;
let b = 3;

console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.3333333333333335
console.log(a % b); // 1

The Modulus Operator % — Don't Skip This One

The % operator trips up almost every beginner. It does not divide — it returns the remainder after division.

10 % 3 = 1 because 10 ÷ 3 = 3 remainder 1.

Its most practical use? Checking if a number is even or odd:

// Even numbers have no remainder when divided by 2
console.log(8 % 2 === 0); // true  → even
console.log(7 % 2 === 0); // false → odd
console.log(0 % 2 === 0); // true  → even

You'll see this pattern constantly in real JavaScript code.

💡 Bonus: The + operator doubles as string concatenation. "Hello" + " World" produces "Hello World". Be mindful when mixing strings and numbers — JavaScript's automatic type conversion can produce unexpected results.

---

Comparison Operators — Asking True or False

Comparison operators compare two values and always return a boolean: either true or false. They're the foundation of every conditional statement you'll ever write.

Operator	Name	Example	Output
==	Loose equality	"5" == 5	true
===	Strict equality	"5" === 5	false
!=	Loose inequality	"5" != 5	false
>	Greater than	10 > 3	true
<	Less than	10 < 3	false

Basic comparisons

let x = 10;
let y = 20;

console.log(x > y);  // false → 10 is not greater than 20
console.log(x < y);  // true  → 10 is less than 20
console.log(x != y); // true  → 10 is not equal to 20

== vs === — The Difference Every JavaScript Developer Must Know

This is the most important distinction for any JavaScript beginner. Let's break it down clearly.

== (double equals) — Loose Equality
Converts types before comparing. JavaScript tries to make the two sides "match" before checking if they're equal. This is called type coercion.

=== (triple equals) — Strict Equality
Checks both the value and the type. No conversion happens. What you see is what gets compared.

// == performs type coercion (converts before comparing)
console.log("5" ==  5);          // true  ← "5" is converted to number 5
console.log(0   ==  false);      // true  ← 0 is treated as falsy
console.log(""  ==  false);      // true  ← empty string is falsy
console.log(null == undefined);  // true  ← special case

// === checks value AND type — no surprises
console.log("5" === 5);          // false ← string is not a number
console.log(5   === 5);          // true  ← same value, same type ✅
console.log(0   === false);      // false ← number is not a boolean
console.log(null === undefined); // false ← different types

Why does this matter in real projects?

HTML form inputs always return strings — even if the user types a number. Watch what happens:

// Simulating a value coming from a form input
let userAge = "18"; // this is a STRING, not a number

// == misleadingly says "yes, they match"
if (userAge == 18) {
  console.log("Access granted (==)"); // This runs — potentially a bug!
}

// === correctly catches the type mismatch
if (userAge === 18) {
  console.log("Access granted (===)"); // This does NOT run
} else {
  console.log("Type mismatch! Convert the input first."); // This runs ✅
}

⚠️ Golden rule: Always use === in your code. It prevents an entire class of subtle bugs caused by unexpected type coercion. Only reach for == if you have a very deliberate, specific reason — which is rare.

---

Logical Operators — Combining Conditions

Logical operators let you combine multiple conditions or invert a condition. They work with boolean values and are essential for writing meaningful if statements.

Operator	Name	Meaning	Example
&&	AND	Both sides must be true	age >= 18 && hasID
`\	\	`	OR
!	NOT	Inverts the boolean	!isBanned

Truth Table — Every Possible Combination

Memorise this table. It defines how logical operators behave for every possible input:

| A | B | A && B | A \|\| B | !A |
|:---:|:---:|:---:|:---:|:---:|
| true | true | ✅ true | ✅ true | ❌ false |
| true | false | ❌ false | ✅ true | ❌ false |
| false | true | ❌ false | ✅ true | ✅ true |
| false | false | ❌ false | ❌ false | ✅ true |

The patterns to remember:

• && → only true when both are true. One false kills it.
• || → only false when both are false. One true saves it.
• ! → simply flips whatever you give it.

Code Examples

let age      = 22;
let hasID    = true;
let isBanned = false;
let isAdmin  = false;

// && (AND) — every condition must pass
console.log(age >= 18 && hasID);    // true  ← both are true
console.log(age >= 18 && isBanned); // false ← isBanned is false

// || (OR) — only one needs to pass
console.log(isAdmin || hasID);      // true  ← hasID is true
console.log(isAdmin || isBanned);   // false ← both are false

// ! (NOT) — flips the boolean
console.log(!isBanned); // true  ← not banned
console.log(!hasID);    // false ← has no ID
console.log(!isAdmin);  // true  ← not an admin

Real-World Example — Access Control

let isLoggedIn       = true;
let isBanned         = false;
let hasVerifiedEmail = true;

// Can the user post a comment?
if (isLoggedIn && !isBanned && hasVerifiedEmail) {
  console.log("✅ You can post a comment!");
} else {
  console.log("❌ Access restricted.");
}
// Output: "✅ You can post a comment!"

// Can the user see the admin panel?
let isAdmin     = false;
let isModerator = true;

if (isAdmin || isModerator) {
  console.log("🔑 Welcome to the dashboard.");
}
// Output: "🔑 Welcome to the dashboard."

💡 Short-circuit evaluation: With &&, if the first condition is false, JavaScript skips evaluating the rest — it already knows the result is false. With ||, if the first condition is true, it stops immediately. This is called short-circuiting and is a common pattern in professional JavaScript.

---

Assignment Operators — Storing Values

Assignment operators store a value into a variable. The basic = sets a value, while compound operators combine a math operation and assignment into a single, shorter expression.

Operator	Name	Long form	Short form	Result
=	Assign	x = 10	—	x is 10
+=	Add & assign	x = x + 5	x += 5	x is 15
-=	Subtract & assign	x = x - 3	x -= 3	x is 12

Code Examples

let score = 0;
console.log(score); // 0

// += adds to the current value and saves it back
score += 10;
console.log(score); // 10

score += 5; // player earns a bonus
console.log(score); // 15

score -= 3; // player takes damage
console.log(score); // 12

Works with strings too

let greeting = "Hello";
greeting += ", ";
greeting += "World!";
console.log(greeting); // "Hello, World!"

All four operator types working together

let itemPrice    = 200;
let discountRate = 20;
let taxPercent   = 10;
let isPremium    = true;
let hasCoupon    = false;

// Arithmetic + Assignment
itemPrice -= discountRate;                    // 180 after discount
let tax   = itemPrice * (taxPercent / 100);   // 18
let total = itemPrice + tax;                  // 198

// Comparison + Logical
if (total > 100 && (isPremium || hasCoupon)) {
  console.log("🚚 Free shipping applied!");
}

console.log("Order total: $" + total);
// Output: "🚚 Free shipping applied!"
// Output: "Order total: $198"

---

🎯 Hands-On Practice Assignment

The best way to learn operators is to write them yourself. Try each task below before peeking at the solutions.

---

Task 1 — Arithmetic on two numbers

// Declare two variables
let num1 = 25;
let num2 = 7;

// Your job: perform and log all 5 arithmetic operations
// Expected outputs: 32, 18, 175, 3.571..., 4

---

Task 2 — Compare values with == and ===

let valueA = "25"; // string
let valueB = 25;   // number

// Your job: compare valueA and valueB using both == and ===
// Log both results and observe the difference

---

Task 3 — Write a condition using logical operators

let isLoggedIn       = true;
let isBanned         = false;
let hasVerifiedEmail = true;

// Your job: write an if/else that logs:
// "You can post!" if the user is logged in, not banned, and email-verified
// "Access denied." otherwise

---

Click to reveal solutions

Solution — Task 1

let num1 = 25;
let num2 = 7;

console.log(num1 + num2); // 32
console.log(num1 - num2); // 18
console.log(num1 * num2); // 175
console.log(num1 / num2); // 3.5714285714285716
console.log(num1 % num2); // 4  ← 25 ÷ 7 = 3 remainder 4

Solution — Task 2

let valueA = "25";
let valueB = 25;

console.log(valueA ==  valueB); // true  ← type coercion kicks in
console.log(valueA === valueB); // false ← string !== number

// Takeaway: === is safer. It tells you the types don't match.

Solution — Task 3

let isLoggedIn       = true;
let isBanned         = false;
let hasVerifiedEmail = true;

if (isLoggedIn && !isBanned && hasVerifiedEmail) {
  console.log("You can post! ✅");
} else {
  console.log("Access denied. ❌");
}
// Output: "You can post! ✅"

---

📌 Quick-Reference Summary

Category	Operators	Key Takeaway
Arithmetic	+ - * / %	% returns the remainder, not the quotient
Comparison	== === != > <	Always prefer === — it checks type too
Logical	&& `\	\
Assignment	{% raw %}= += -=	Shortcuts that update and reassign in one step

---

What to Learn Next

Now that operators feel solid, here's a natural path forward:

1. Conditional statements (if, else if, switch) — using comparison and logical operators to control flow
2. Loops (for, while) — where <, ++, and += become your best friends
3. Functions — wrapping your operator logic into reusable, named blocks
4. Arrays and objects — where you'll apply everything you've learned here at scale

---

Final Thoughts

Operators might seem like a tiny topic, but they're the core of how JavaScript thinks. Every condition you check, every value you update, every calculation you run — it all comes back to operators.

Take the time to really absorb == vs ===. Spend 10 minutes playing with the modulus %. Write out that truth table from memory. These small investments pay off every single day as a developer.

Drop your Task 3 solution in the comments — I'd love to see how you approached it! 👇