A no-fluff guide to the operators you'll actually use every single day.
If variables are the boxes where you store stuff, then operators are the tools you use to do things with that stuff. Add two numbers? That's an operator. Check if a user is logged in? Operator. Decide whether to show a discount banner? Yep — operators again.
When I started my JavaScript journey in the ChaiCode Web Dev Cohort 2026, operators felt like the easiest part. "It's just math, right?" Well, mostly — until I ran into == vs === and spent an embarrassing amount of time debugging a condition that looked correct but wasn't.
This article will save you from that pain. Let's break down every operator category you need to know as a beginner, with clear examples you can try right in your console.
What Are Operators?
An operator is a special symbol (or keyword) that tells JavaScript to perform a specific action on one or more values. Those values are called operands.
let result = 10 + 5;
// ↑ ↑
// operand operand
// ↑
// operator
That's it. The + is the operator, 10 and 5 are the operands, and 15 is the result. You already know how this works from school math — JavaScript just formalizes it.
Operators fall into different categories based on what they do. Let's walk through the ones you'll use every day.
1. Arithmetic Operators — Doing the Math
These are the most intuitive operators. If you survived 5th-grade math, you already know most of them.
| Operator | Name | Example | Result |
|---|---|---|---|
+ |
Addition | 10 + 3 |
13 |
- |
Subtraction | 10 - 3 |
7 |
* |
Multiplication | 10 * 3 |
30 |
/ |
Division | 10 / 3 |
3.333 |
% |
Modulus (Remainder) | 10 % 3 |
1 |
Let's See Them in Action
let a = 20;
let b = 7;
console.log(a + b); // 27 — Addition
console.log(a - b); // 13 — Subtraction
console.log(a * b); // 140 — Multiplication
console.log(a / b); // 2.857142... — Division
console.log(a % b); // 6 — Remainder after dividing 20 by 7
The Modulus Operator (%) — The Underrated One
A lot of beginners skip right past %, but it's genuinely useful. It gives you the remainder of a division. Where would you use it?
- Checking if a number is even or odd:
let num = 15;
if (num % 2 === 0) {
console.log("Even");
} else {
console.log("Odd"); // ← This runs
}
- Cycling through values (like rotating through an array of colors or images).
Don't underestimate the modulus. It shows up more often than you'd think.
Quick Note: + With Strings
The + operator does double duty in JavaScript. With numbers, it adds. With strings, it concatenates (joins them together):
let firstName = "Pratham";
let lastName = "Bhardwaj";
console.log(firstName + " " + lastName); // "Pratham Bhardwaj"
This catches beginners off guard when one value is a string and the other is a number:
console.log("5" + 3); // "53" — string concatenation, NOT addition!
console.log(5 + 3); // 8 — actual addition
Keep this in mind. It will save you from some weird bugs.
2. Comparison Operators — Asking Questions
Comparison operators let you compare two values. They always return a boolean — either true or false. You'll use these constantly in if statements and loops.
| Operator | Meaning | Example | Result |
|---|---|---|---|
== |
Equal (loose) | 5 == "5" |
true |
=== |
Equal (strict) | 5 === "5" |
false |
!= |
Not equal (loose) | 5 != "5" |
false |
!== |
Not equal (strict) | 5 !== "5" |
true |
> |
Greater than | 10 > 5 |
true |
< |
Less than | 10 < 5 |
false |
>= |
Greater than or equal | 10 >= 10 |
true |
<= |
Less than or equal | 10 <= 5 |
false |
The Big One: == vs ===
This is where most beginners get tripped up, and honestly, I was no different.
== (Loose Equality) — Compares values but converts types before comparing. JavaScript tries to be "helpful" by converting one type to match the other.
=== (Strict Equality) — Compares both the value AND the type. No conversion. No surprises.
console.log(5 == "5"); // true — JS converts "5" to 5, then compares
console.log(5 === "5"); // false — different types (number vs string), instant false
console.log(0 == false); // true — JS converts false to 0, then compares
console.log(0 === false); // false — number vs boolean, nope
console.log(null == undefined); // true — a weird special case in JS
console.log(null === undefined); // false — different types
My Advice?
Always use === and !==. Strict equality is predictable. Loose equality has a bunch of quirky conversion rules that can introduce subtle bugs into your code. Every professional codebase I've seen enforces strict equality, and most linters will flag == as a warning.
More Comparison Examples
let userAge = 22;
let minAge = 18;
console.log(userAge > minAge); // true — 22 is greater than 18
console.log(userAge < minAge); // false
console.log(userAge >= 22); // true — equal counts!
console.log(userAge <= 21); // false
3. Logical Operators — Making Decisions
Logical operators let you combine multiple conditions. They're the glue that holds your if statements together when you need to check more than one thing.
| Operator | Name | What It Does |
|---|---|---|
&& |
AND |
true only if both sides are true |
| `\ | \ | ` |
! |
NOT | Flips true to false and vice versa |
&& (AND) — "Both Must Be True"
let age = 22;
let hasID = true;
if (age >= 18 && hasID) {
console.log("Access granted ✅");
} else {
console.log("Access denied ❌");
}
// Output: "Access granted ✅"
Both conditions must be true for the whole thing to be true. If either one is false, the entire expression is false.
|| (OR) — "At Least One Must Be True"
let isWeekend = false;
let isHoliday = true;
if (isWeekend || isHoliday) {
console.log("Day off! 🎉");
} else {
console.log("Back to work 💻");
}
// Output: "Day off! 🎉"
Only one condition needs to be true. The expression is only false when both sides are false.
! (NOT) — "Flip It"
let isLoggedIn = false;
if (!isLoggedIn) {
console.log("Please log in first");
}
// Output: "Please log in first"
The ! just inverts the value. !true becomes false, and !false becomes true. You'll use this a lot to check "if something is NOT the case."
Truth Table for Logical Operators
This is worth bookmarking. When in doubt, refer back to this:
| 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 |
Read this table row by row. It'll make logical operators click in your head faster than any explanation.
4. Assignment Operators — Storing and Updating Values
You've already used the most basic assignment operator — the = sign. But JavaScript has shorthand versions that make updating variables cleaner.
| Operator | Example | Equivalent To | What It Does |
|---|---|---|---|
= |
x = 10 |
— | Assigns a value |
+= |
x += 5 |
x = x + 5 |
Adds and reassigns |
-= |
x -= 3 |
x = x - 3 |
Subtracts and reassigns |
*= |
x *= 2 |
x = x * 2 |
Multiplies and reassigns |
/= |
x /= 4 |
x = x / 4 |
Divides and reassigns |
%= |
x %= 3 |
x = x % 3 |
Modulus and reassigns |
In Practice
let score = 100;
score += 20; // score is now 120
console.log(score); // 120
score -= 50; // score is now 70
console.log(score); // 70
score *= 2; // score is now 140
console.log(score); // 140
score /= 7; // score is now 20
console.log(score); // 20
score %= 3; // score is now 2 (20 divided by 3, remainder is 2)
console.log(score); // 2
These shorthand operators are everywhere in real code. Updating counters, accumulating totals, adjusting scores — you'll reach for += and -= constantly.
Operator Categories — A Bird's Eye View
Here's a quick reference table of everything we covered:
| Category | Operators | Purpose |
|---|---|---|
| Arithmetic |
+, -, *, /, %
|
Math operations |
| Comparison |
==, ===, !=, !==, >, <, >=, <=
|
Comparing values |
| Logical |
&&, `\ |
\ |
| Assignment | {% raw %}=, +=, -=, *=, /=, %=
|
Storing and updating values |
Let's Practice: Hands-On Assignment
Theory is great, but you won't actually learn this until you type it yourself. Here's a quick exercise — open your browser console (F12 → Console tab) or your VS Code terminal and try this:
Part 1: Arithmetic Operations
let x = 15;
let y = 4;
console.log("Addition:", x + y); // 19
console.log("Subtraction:", x - y); // 11
console.log("Multiplication:", x * y); // 60
console.log("Division:", x / y); // 3.75
console.log("Remainder:", x % y); // 3
Part 2: Comparison — == vs ===
let num = 10;
let str = "10";
console.log("Loose equality:", num == str); // true (type conversion happens)
console.log("Strict equality:", num === str); // false (different types)
console.log("Loose inequality:", num != str); // false
console.log("Strict inequality:", num !== str); // true
Part 3: Logical Operators in a Condition
let temperature = 32;
let isSunny = true;
if (temperature > 30 && isSunny) {
console.log("It's a hot sunny day! ☀️ Stay hydrated.");
}
if (temperature > 40 || isSunny) {
console.log("You might want sunscreen! 🧴");
}
let isRaining = false;
if (!isRaining) {
console.log("No umbrella needed today! 🌤️");
}
What to Observe
- Arithmetic operators work exactly like you'd expect from math class.
-
==can surprise you by converting types silently.===is honest and strict. - Logical operators let you build complex conditions from simple true/false checks.
Key Takeaways
- Operators are symbols that perform actions on values — math, comparison, logic, and assignment.
-
Arithmetic operators (
+,-,*,/,%) handle math. Watch out for+with strings — it concatenates instead of adding. -
Always use
===over==. Strict equality prevents type coercion bugs that are genuinely hard to debug. -
Logical operators (
&&,||,!) are essential for combining conditions. Memorize the truth table. -
Assignment shorthands (
+=,-=, etc.) save you from repetitive code and are used everywhere in real projects.
Wrapping Up
Operators are one of those things that seem basic until you realize they're literally in every line of JavaScript you'll ever write. Whether you're building a calculator, validating a form, checking user permissions, or just incrementing a counter — operators are doing the heavy lifting behind the scenes.
I'm learning all of this as part of the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and honestly, writing these concepts down as articles has been one of the best ways to make them stick. If you're a fellow beginner, I hope this helped you the way I wish someone had helped me.
Feel free to connect with me on LinkedIn or check out PrathamDEV.in for more of my work. I'll keep writing as I keep learning.
Happy coding! 🚀
Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode
Top comments (0)