Every time you add two numbers, compare two values, or check two conditions at once — you're using an operator. Operators are the action symbols of JavaScript. They tell the language what to do with your data.
This guide covers the four operator types you'll use every single day.
What Are Operators?
An operator is a symbol that performs an action on one or more values. The values it works with are called operands.
10 + 5
// ↑ operator
// 10 and 5 are operands
// result: 15
JavaScript operators fall into four main categories — arithmetic, comparison, logical, and assignment.
1. Arithmetic Operators
These work just like math class. Give them numbers, get a number back.
| Operator | Name | Example | Result |
|---|---|---|---|
+ |
Addition | 8 + 3 |
11 |
- |
Subtraction | 8 - 3 |
5 |
* |
Multiplication | 8 * 3 |
24 |
/ |
Division | 8 / 2 |
4 |
% |
Modulus (remainder) | 8 % 3 |
2 |
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
The % Modulus Operator
Modulus gives you the remainder after division — not the result. It's one of the most useful operators in everyday coding:
console.log(10 % 3); // 1 → 10 ÷ 3 = 3 remainder 1
console.log(15 % 5); // 0 → 15 ÷ 5 = 3 remainder 0
console.log(7 % 2); // 1 → 7 ÷ 2 = 3 remainder 1
Most common use: check if a number is even or odd
const number = 14;
if (number % 2 === 0) {
console.log("Even"); // Even
} else {
console.log("Odd");
}
+ with Strings
The + operator also joins strings together — called concatenation:
const first = "Hello";
const second = "World";
console.log(first + ", " + second + "!"); // "Hello, World!"
Watch out when mixing types with
+:console.log("5" + 3); // "53" ← both treated as strings! console.log("5" - 3); // 2 ← subtraction converts to numbers
2. Comparison Operators
Comparison operators compare two values and always return 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 | 5 != 3 |
true |
!== |
Strictly not equal | 5 !== "5" |
true |
> |
Greater than | 8 > 5 |
true |
< |
Less than | 3 < 10 |
true |
>= |
Greater than or equal | 5 >= 5 |
true |
<= |
Less than or equal | 4 <= 3 |
false |
== vs === — The Most Important Distinction
This is one of the most common sources of bugs for beginners, so pay close attention.
== (loose equality) converts types before comparing:
console.log(5 == "5"); // true ← number 5 and string "5" are treated as equal
console.log(0 == false); // true ← 0 and false are treated as equal
console.log(1 == true); // true ← 1 and true are treated as equal
console.log("" == false); // true ← empty string and false are treated as equal
=== (strict equality) checks both the value AND the type — no conversions:
console.log(5 === "5"); // false ← number ≠ string
console.log(0 === false); // false ← number ≠ boolean
console.log(1 === true); // false ← number ≠ boolean
console.log(5 === 5); // true ← same value, same type
== (loose) === (strict)
┌──────────────────┐ ┌──────────────────────┐
│ Converts types │ │ No type conversion │
│ first, then │ │ Value AND type must │
│ compares values │ │ both match exactly │
└──────────────────┘ └──────────────────────┘
5 == "5" → true 5 === "5" → false
0 == false → true 0 === false → false
Rule: Always use
===and!==. The loose operators (==,!=) can cause subtle, hard-to-find bugs.
Practical comparison examples:
const userAge = 20;
console.log(userAge > 18); // true — they're an adult
console.log(userAge === 21); // false — not exactly 21
console.log(userAge >= 18); // true — 18 or older
console.log(userAge < 13); // false — not a child
3. Logical Operators
Logical operators let you combine or invert boolean conditions. They're what make complex decision-making possible.
| Operator | Name | Returns true when... |
|---|---|---|
&& |
AND | Both sides are true |
| `\ | \ | ` |
! |
NOT | The value is false (inverts it) |
Truth Table
| 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 |
&& — AND (both must be true)
const age = 20;
const hasTicket = true;
if (age >= 18 && hasTicket) {
console.log("Welcome! You may enter."); // both true
}
const isRaining = true;
const hasMoney = false;
if (isRaining && hasMoney) {
console.log("Buy an umbrella");
} else {
console.log("Stay home!"); // hasMoney is false, so && fails
}
|| — OR (at least one must be true)
const isWeekend = false;
const isHoliday = true;
if (isWeekend || isHoliday) {
console.log("No work today!"); // isHoliday is true
}
const hasEmail = "";
const hasPhone = "9876543210";
if (hasEmail || hasPhone) {
console.log("We can contact you!"); // hasPhone is truthy
}
! — NOT (flips true/false)
const isLoggedIn = false;
if (!isLoggedIn) {
console.log("Please log in."); // !false = true
}
console.log(!true); // false
console.log(!false); // true
console.log(!0); // true (0 is falsy)
console.log(!"hi"); // false ("hi" is truthy)
Combining operators in real conditions
const username = "alice";
const password = "1234";
const isAdmin = false;
// Check login: correct credentials AND not banned
if (username === "alice" && password === "1234" && !isAdmin) {
console.log("Regular user logged in.");
}
// Allow access: is admin OR has a special pass
const hasSpecialPass = true;
if (isAdmin || hasSpecialPass) {
console.log("Access granted!"); //
}
Top comments (0)