JavaScript Operators: The Basics You Need to Know

You already know operators — you just haven't called them that.

When you write 5 + 3 in a calculator, the + is an operator. It takes two numbers and does something with them — in this case, adds them together. The numbers on either side (5 and 3) are called operands.

In JavaScript, operators work the same way. They are special symbols that perform operations on values. You use them to do math, compare things, make decisions, and update variables.

Every single JavaScript program — no matter how complex — uses operators constantly. Learning them is not optional. They are the vocabulary of logic.

There are four categories we will cover today:

1. Arithmetic operators — for math

2. Comparison operators — for checking relationships between values

3. Logical operators — for combining conditions

4. Assignment operators — for storing and updating values

1. Arithmetic Operators — JavaScript as a Calculator

These are exactly what they look like. They do math.

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   → remainder (modulo)

The first four are straightforward. The one that confuses beginners is % — the modulo operator.

Understanding % (Modulo) — The Remainder Guy

Modulo gives you the remainder after dividing two numbers. That's it.

Real-life analogy: You have 10 chocolates and 3 friends. You give 3 to each friend. After handing out 9 (3 rounds × 3 friends), you have 1 chocolate left over. That leftover is the modulo.

console.log(10 % 3); // 1  → 10 divided by 3 is 3 remainder 1
console.log(12 % 4); // 0  → 12 divided by 4 is 3 remainder 0
console.log(7 % 2);  // 1  → 7 divided by 2 is 3 remainder 1

A very common use of %: checking if a number is even or odd.

let number = 8;

console.log(number % 2); // 0 → even (no remainder)

number = 7;
console.log(number % 2); // 1 → odd (has a remainder)

If the remainder after dividing by 2 is 0, the number is even. If it is 1, the number is odd. Simple and practical.

2. Comparison Operators — Asking Yes/No Questions

Comparison operators compare two values and always return either true or false. Think of them as asking a question and getting a yes or no answer.

let age = 20;

console.log(age > 18);  // true  → is 20 greater than 18?
console.log(age < 18);  // false → is 20 less than 18?
console.log(age >= 20); // true  → is 20 greater than or equal to 20?
console.log(age <= 15); // false → is 20 less than or equal to 15?
console.log(age == 20); // true  → is 20 equal to 20?
console.log(age != 18); // true  → is 20 NOT equal to 18?

These comparisons form the backbone of every if statement you will ever write. Before your code can make a decision, it has to ask a yes/no question — and comparison operators are how you ask it.

The Most Important Thing: == vs ===

This is where many beginners get burned. JavaScript has two equality operators and they behave very differently.

== (Loose Equality) — compares values, but converts types first if they do not match. This is called type coercion.

=== (Strict Equality) — compares both the value AND the type. No conversion. No surprises.

console.log(5 == "5");  // true  ← ⚠️ compared 5 (number) to "5" (string)
                        //          JavaScript silently converted "5" to 5

console.log(5 === "5"); // false ← ✅ different types (number vs string), so false

console.log(0 == false);  // true  ← ⚠️ false converts to 0
console.log(0 === false); // false ← ✅ different types (number vs boolean)

console.log(null == undefined);  // true  ← ⚠️ JS treats these as loosely equal
console.log(null === undefined); // false ← ✅ different types

Real-life analogy: Imagine two people — one named "5" (a text label) and one who is actually 5 years old (a number). == says they are the same because the characters match. === says they are different because one is a name and the other is an age.

The Simple Rule

Always use === in your code. It does exactly what you expect without any hidden conversions. Only use == if you have a very specific reason to allow type coercion — which, as a beginner, you almost never will.

3. Logical Operators — Combining Conditions

Logical operators let you combine multiple conditions into one. Instead of asking one yes/no question, you can ask two at once.

There are three: && (AND), || (OR), and ! (NOT).

&& — AND (Both must be true)

Real-life analogy: To get into a rated-18 movie, you must be 18+ AND have a ticket. Both conditions must be true. If either one fails, you don't get in.

let age = 20;
let hasTicket = true;

console.log(age >= 18 && hasTicket); // true  → both true
console.log(age >= 18 && !hasTicket); // false → one is false

&& returns true only when every condition on both sides is true. Even one false makes the whole thing false.

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

Real-life analogy: A coffee shop gives a discount if you are a student OR a senior citizen. You only need to qualify for one of them, not both.

let isStudent = false;
let isSenior = true;

console.log(isStudent || isSenior); // true  → at least one is true
console.log(false || false);        // false → neither is true

|| returns true if at least one condition is true. It only returns false when both sides are false.

! — NOT (Flip the result)

! reverses a boolean. true becomes false, and false becomes true.

Real-life analogy: "Is the door NOT locked?" If the door is locked (true), then !locked is false — meaning no, it is not unlocked.

let isLoggedIn = false;

console.log(!isLoggedIn);  // true  → flipped from false
console.log(!true);        // false → flipped from true

A practical use: checking if something is absent.

let userName = "";

if (!userName) {
    console.log("Please enter your name."); // runs because empty string is falsy
}

Truth Table — All Combinations at a Glance

| 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 it row by row. Each row is a scenario. The columns show what each operator returns for that scenario.

4. Assignment Operators — Storing and Updating Values

You already know the basic assignment operator: =. It stores a value into a variable.

let score = 0;

But JavaScript has shorthand assignment operators that let you update a variable's value without rewriting it completely.

let score = 10;

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

console.log(score); // 2

Real-life analogy: score += 5 is like saying "add 5 to whatever score I already have" — instead of "look up my score, add 5, then write the result back." It is a shortcut that saves typing and is easier to read.

The most common ones you will actually use day-to-day are += and -=. You will see them everywhere — in counters, in loops, in score tracking, in cart totals.

All Operators at a Glance

Category	Operators	What They Do
Arithmetic	+ - * / %	Perform math operations
Comparison	== === != > < >= <=	Compare values, return true/false
Logical	&& `
Assignment	= += -= *= /=	Store or update variable values

---

Assignment: Practice Time

Part 1 — Arithmetic on Two Numbers

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

// Bonus: is x even or odd?
console.log("Is x even?", x % 2 === 0); // false → x is odd

Part 2 — == vs === in Action

let num = 42;
let str = "42";

console.log(num == str);  // true  → loose equality, type ignored
console.log(num === str); // false → strict equality, types differ

console.log(0 == false);  // true  → another loose conversion surprise
console.log(0 === false); // false → strict, different types

// Which one should you use?
// Always ===. It is predictable. == can surprise you.

Part 3 — A Condition Using Logical Operators

let userAge = 17;
let hasParentPermission = true;

// Can this user join the platform?
// Rule: must be 18+ OR have parent permission
let canJoin = userAge >= 18 || hasParentPermission;
console.log("Can join:", canJoin); // true

// Can this user access adult content?
// Rule: must be 18+ AND must be verified
let isVerified = false;
let canAccessAdultContent = userAge >= 18 && isVerified;
console.log("Can access adult content:", canAccessAdultContent); // false

// Is the user a minor?
let isMinor = !(userAge >= 18);
console.log("Is minor:", isMinor); // true

Part 4 — Update a Score Using Assignment Operators

let playerScore = 0;

playerScore += 10; // found a coin
playerScore += 25; // defeated an enemy
playerScore -= 5;  // got hit
playerScore *= 2;  // bonus multiplier

console.log("Final Score:", playerScore); // 60

Try changing the starting values and predicting the output before you run it. That mental calculation is exactly how your brain starts to think in code.

---

Summary

• Operators are symbols that perform actions on values.

• Arithmetic operators do math: +, -, *, /, and % for the remainder.

• Comparison operators ask yes/no questions and return true or false.

• Always use === instead of == — strict equality avoids type coercion surprises.

• Logical operators combine conditions: && needs both true, || needs one true, ! flips the result.

• Assignment operators like += and -= are shortcuts for updating a variable's value.

---

Open your browser console right now and type 10 % 3. Then type "5" === 5. Then type true && false. Three expressions, thirty seconds, and you will understand this article better than if you read it five more times