JavaScript Operators: The Basics You Need to Know
Operators are the building blocks that let you perform calculations, compare values, and control the flow of your code. This guide covers the operators you'll use most often—with simple examples and clear explanations.
What Are Operators?
Operators are symbols that tell JavaScript to do something with one or more values (called operands). For example, in 3 + 5, the + is the operator and 3 and 5 are the operands. The result is 8.
Think of them as small actions: add, subtract, compare, assign, and so on. They’re used in variables, conditions, and expressions everywhere in your code.
Operator Categories at a Glance
| Category | Purpose | Examples |
|----------------|-----------------------------|-----------------------------|
| **Arithmetic** | Do math with numbers | `+`, `-`, `*`, `/`, `%` |
| **Comparison** | Compare two values | `==`, `===`, `!=`, `>`, `<` |
| **Logical** | Combine or negate conditions| `&&`, `\|\|`, `!` |
| **Assignment** | Assign or update variables | `=`, `+=`, `-=`, etc. |
Arithmetic Operators (+, -, *, /, %)
Use these for basic math.
| Operator | Name | Example | Result |
|----------|----------------|-----------|--------|
| `+` | Addition | `10 + 3` | `13` |
| `-` | Subtraction | `10 - 3` | `7` |
| `*` | Multiplication | `10 * 3` | `30` |
| `/` | Division | `10 / 3` | `3.333...` |
| `%` | Remainder | `10 % 3` | `1` |
Simple math in the console:
const a = 15;
const b = 4;
console.log(a + b); // 19
console.log(a - b); // 11
console.log(a * b); // 60
console.log(a / b); // 3.75
console.log(a % b); // 3 (remainder when 15 is divided by 4)
The remainder operator % is handy for “every Nth” logic (e.g. even/odd: number % 2 === 0).
Comparison Operators (==, ===, !=, >, <)
These compare two values and return a boolean: true or false.
The important difference:
- == (loose equality)
Converts types if needed, then compares.
5 == "5" → true (string "5" is converted to number 5).
- === (strict equality)
Compares value and type. No conversion.
5 === "5" → false (number vs string).
Rule of thumb: Prefer === (and !==) so you avoid surprises from type coercion.
Console examples:
// Loose equality (==) – types can differ
console.log(5 == "5"); // true (string "5" becomes number 5)
console.log(0 == false); // true (false is treated as 0)
console.log("" == false); // true (empty string and false both “falsy”)
// Strict equality (===) – type must match
console.log(5 === "5"); // false (number vs string)
console.log(5 === 5); // true
console.log(0 === false); // false (number vs boolean)
Other comparison operators:
| Operator | Meaning | Example |
|----------|-------------------|--------------|
| `===` | Strict equal | `5 === 5` → true |
| `!==` | Strict not equal | `5 !== "5"` → true |
| `==` | Loose equal | `5 == "5"` → true |
| `!=` | Loose not equal | `5 != "5"` → false |
| `>` | Greater than | `10 > 3` → true |
| `<` | Less than | `10 < 3` → false |
| `>=` | Greater or equal | `5 >= 5` → true |
| `<=` | Less or equal | `3 <= 5` → true |
Logical Operators (&&, ||, !)
Use these to combine or invert conditions.
| Operator | Meaning | Example |
|----------|-------------------|--------------|
| `===` | Strict equal | `5 === 5` → true |
| `!==` | Strict not equal | `5 !== "5"` → true |
| `==` | Loose equal | `5 == "5"` → true |
| `!=` | Loose not equal | `5 != "5"` → false |
| `>` | Greater than | `10 > 3` → true |
| `<` | Less than | `10 < 3` → false |
| `>=` | Greater or equal | `5 >= 5` → true |
| `<=` | Less or equal | `3 <= 5` → true |
Logical Operators (&&, ||, !)
Use these to combine or invert conditions.
| Operator | Name | Meaning |
|----------|--------|--------|
| `&&` | AND | Both sides must be truthy |
| `\|\|` | OR | At least one side must be truthy |
| `!` | NOT | Flips true ↔ false |
Truth table for logical operators
| 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 |
Console examples:
const age = 20;
const hasTicket = true;
// AND: both must be true
console.log(age >= 18 && hasTicket); // true
// OR: at least one true
console.log(age < 18 || hasTicket); // true (hasTicket is true)
// NOT: flip the value
console.log(!hasTicket); // false
console.log(!false); // true
A small real-world condition:
const isLoggedIn = true;
const isAdmin = false;
if (isLoggedIn && isAdmin) {
console.log("Show admin panel");
} else if (isLoggedIn || isAdmin) {
console.log("Show dashboard");
}
// ! for “if not”
if (!isLoggedIn) {
console.log("Please log in");
}
Assignment Operators (=, +=, -=)
These assign or update the value stored in a variable.
| Operator | Example | Same as | Result (if x was 10) |
|----------|-----------|---------------|------------------------|
| `=` | `x = 5` | — | `x` is now `5` |
| `+=` | `x += 3` | `x = x + 3` | `x` is now `13` |
| `-=` | `x -= 2` | `x = x - 2` | `x` is now `8` |
| `*=` | `x *= 2` | `x = x * 2` | `x` is now `20` |
| `/=` | `x /= 5` | `x = x / 5` | `x` is now `2` |
Console examples:
let score = 10;
score += 5; // score is now 15
score -= 3; // score is now 12
console.log(score); // 12
Practice Assignment
Try this in your browser console or a small script:
1. Arithmetic: Store two numbers in variables and log their sum, difference, product, quotient, and remainder.
2. Comparison: Compare the same two values using both == and === (e.g. one number and one string) and see how the results differ.
3. Logical: Write a condition using && or || (e.g. “can vote” if age ≥ 18 and has ID) and log the result.
Example starter:
const num1 = 12;
const num2 = 5;
// 1. Arithmetic
console.log(num1 + num2, num1 - num2, num1 * num2, num1 / num2, num1 % num2);
// 2. == vs ===
console.log(num1 == "12", num1 === "12");
// 3. Logical
const canVote = num1 >= 18 && true;
console.log(canVote);
Summary
- Operators act on values to compute results, compare them, or assign them.
- Arithmetic: +, -, *, /, % for math.
- Comparison: Prefer === and !==; use == only when you intentionally want type coercion.
- Logical: &&, ||, ! to combine and invert conditions.
- Assignment: =, +=, -= (and *=, /=) to set or update variables.
Stick to these basics and everyday usage; you can dig into operator precedence and edge cases later when you need them.
Happy coding!
