JavaScript Operators: The Building Blocks of Logic

If you've ever written 2 + 2 or asked "is this equal to that?" in your code, you've already used operators. They're everywhere in JavaScript — and once you truly understand them, writing conditions and calculations becomes second nature.

In this article, we'll walk through the most important JavaScript operators with real examples you can try right now in your browser console.

What Are Operators?

Operators are special symbols (or keywords) that tell JavaScript to perform a specific action on one or more values. Those values are called operands.

10 + 5  // `+` is the operator, 10 and 5 are the operands

JavaScript groups operators by what they do. Here's a quick overview before we dive in:

1. Arithmetic Operators

These work just like math class — almost.

let a = 10;
let b = 3;

console.log(a + b);  // 13  → Addition
console.log(a - b);  // 7   → Subtraction
console.log(a * b);  // 30  → Multiplication
console.log(a / b);  // 3.333... → Division
console.log(a % b);  // 1   → Modulus (remainder)

What's the % (Modulus) Operator?

It gives you the remainder after division. It's surprisingly useful!

console.log(10 % 3);  // 1  (10 ÷ 3 = 3 remainder 1)
console.log(8 % 2);   // 0  (8 ÷ 2 = 4 remainder 0)

A common trick: if number % 2 === 0, the number is even. If not, it's odd.

console.log(7 % 2);  // 1 → odd
console.log(4 % 2);  // 0 → even

2. Comparison Operators

Comparison operators compare two values and always return true or false.

console.log(5 > 3);   // true
console.log(5 < 3);   // false
console.log(5 != 3);  // true  (5 is NOT equal to 3)

== vs === — Know the Difference

This is one of the most important distinctions in JavaScript.

• == checks if values are equal (but it converts types if needed)

• === checks if values are equal AND the same type (strict)

console.log(5 == "5");   // true  → JS converts "5" to a number
console.log(5 === "5");  // false → number ≠ string

console.log(0 == false);   // true  → both are "falsy"
console.log(0 === false);  // false → number ≠ boolean

Rule of thumb: Always use === unless you have a specific reason not to. It prevents sneaky bugs.

3. Logical Operators

Logical operators let you combine or reverse conditions. They're the backbone of any if statement.

&& — AND (both must be true)

let age = 20;
let hasID = true;

console.log(age >= 18 && hasID);  // true → both conditions are met
console.log(age >= 18 && !hasID); // false → second condition fails

|| — OR (at least one must be true)

let isWeekend = false;
let isHoliday = true;

console.log(isWeekend || isHoliday);  // true → one is enough
console.log(isWeekend || false);       // false → neither is true

! — NOT (flips true/false)

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

let isLoggedIn = false;
console.log(!isLoggedIn);  // true → "not logged in" is true

Logical Operators 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 |

4. Assignment Operators

You already know = — it assigns a value to a variable. The others are just shortcuts.

let score = 10;

score += 5;   // same as: score = score + 5  → 15
score -= 3;   // same as: score = score - 3  → 12
score *= 2;   // same as: score = score * 2  → 24
score /= 4;   // same as: score = score / 4  → 6

console.log(score);  // 6

These are called compound assignment operators and they make your code shorter and cleaner.

Putting It All Together

Here's a small real-world snippet using all four operator types:

let price = 100;
let discount = 20;

price -= discount;             // Assignment: price is now 80
let isCheap = price < 50;      // Comparison: false
let isAffordable = price < 150 && price > 0;  // Logical: true

console.log("Final price:", price);          // 80
console.log("Is it cheap?", isCheap);        // false
console.log("Is it affordable?", isAffordable); // true

Practice Assignment

Try this on your own to solidify what you've learned:

1. Arithmetic — work with two numbers:

let x = 15;
let y = 4;
// Log the result of +, -, *, /, and % on x and y

2. Comparison — spot the difference:

let num = 7;
let str = "7";
// Compare using == and === and log both results
// What do you expect? What do you get?

3. Logical — write a condition:

let temperature = 28;
let isSunny = true;
// Log true if it's sunny AND warmer than 25 degrees
// Log true if it's either sunny OR warmer than 30 degrees

Quick Recap

• Arithmetic operators do math: +, -, *, /, %

• Comparison operators return true/false: ==, ===, !=, >, <

• === is safer than == — always prefer it

• Logical operators combine conditions: &&, ||, !

• Assignment shortcuts keep code clean: +=, -=

Operators are the foundation of logic in JavaScript. Once these feel natural, you'll find writing conditions and calculations becomes completely intuitive.

Happy coding! 🚀

If you enjoyed this article, check out my other blogs on this profile.

🔗 Connect with me:
LinkedIn | GitHub | X (Twitter)