# JavaScript Operators: The Basics You Need to Know

* * *

If you've just started learning JavaScript, you've already used operators — maybe without realising it. Every time you write `2 + 2` or check `if (x === 5)`, you're using operators.

In this article, we'll break down the four most important categories of JavaScript operators with real console examples, clear tables, and a hands-on assignment at the end. No fluff, no jargon overload — just the stuff you'll use every single day.

* * *

## Table of Contents

1.  [What Are Operators?](#what-are-operators)
    
2.  [Arithmetic Operators](#arithmetic-operators)
    
3.  [Comparison Operators](#comparison-operators)
    
4.  [Logical Operators](#logical-operators)
    
5.  [Assignment Operators](#assignment-operators)
    
6.  [Practice Assignment](#practice-assignment)
    

* * *

## What Are Operators?

An **operator** is a special symbol (or keyword) that operates on one or more values, called **operands**.

Think of operators as the *verbs* of JavaScript — they tell the language *what to do* with your data.

```js
// Here, + is the operator. 10 and 5 are the operands.
console.log(10 + 5); // 15
```

JavaScript operators fall into four everyday categories:

| Category | Purpose | Examples |
| --- | --- | --- |
| Arithmetic | Perform math | `+`, `-`, `*`, `/`, `%` |
| Comparison | Compare values | `==`, `===`, `!=`, `>`, `<` |
| Logical | Combine conditions | `&&`, `||`, `!` |
| Assignment | Store values | `=`, `+=`, `-=` |

Let's go through each one.

* * *

## Arithmetic Operators

Arithmetic operators work exactly like the math you learned in school. They take two numbers and return a result.

| Operator | Name | Example | Result |
| --- | --- | --- | --- |
| `+` | Addition | `10 + 3` | `13` |
| `-` | Subtraction | `10 - 3` | `7` |
| `*` | Multiplication | `10 * 3` | `30` |
| `/` | Division | `10 / 3` | `3.33...` |
| `%` | Modulus (remainder) | `10 % 3` | `1` |

### Code Example

```javascript
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.3333... ← division
console.log(a % b); // 1   ← remainder after 10 ÷ 3
```

### The Modulus Operator `%` — What Is It?

The `%` operator is the one beginners most often get confused by. It returns the **remainder** after division, not the result.

So `10 % 3` is `1` because 10 divided by 3 is *3 remainder 1*.

One of the most common uses? **Checking if a number is even or odd:**

```javascript
console.log(8 % 2 === 0); // true  → 8 is even
console.log(7 % 2 === 0); // false → 7 is odd
```

> 💡 **Quick tip:** The `+` operator also works for **string concatenation**. `"Hello" + " World"` gives `"Hello World"`. Be careful when mixing strings and numbers — JavaScript's type coercion can surprise you.

* * *

## Comparison Operators

Comparison operators **compare two values** and always return a boolean — either `true` or `false`. They are the backbone of every `if` statement you'll ever write.

| Operator | Name | Example | Result |
| --- | --- | --- | --- |
| `==` | Loose equality | `"5" == 5` | `true` |
| `===` | Strict equality | `"5" === 5` | `false` |
| `!=` | Loose inequality | `"5" != 5` | `false` |
| `>` | Greater than | `10 > 3` | `true` |
| `<` | Less than | `10 < 3` | `false` |

### `==` vs `===` — The Most Important Distinction in JavaScript

This is where many beginners get tripped up. Let's make it crystal clear.

`==` **(loose equality)** converts types before comparing — this is called *type coercion*.

`===` **(strict equality)** checks both the **value** AND the **type** — no conversion, no surprises.

```js
// == (loose) — converts types first, then compares
console.log("5" ==  5);    // true  ← string "5" is coerced to number 5
console.log(0   ==  false); // true  ← 0 and false are loosely equal
console.log(""  ==  false); // true  ← empty string is falsy

// === (strict) — checks value AND type
console.log("5" === 5);    // false ← string !== number
console.log(5   === 5);    // true  ← same value, same type
console.log(0   === false); // false ← number !== boolean
```

### Why does this matter in real projects?

User input from a form always comes back as a **string**. If you use `==`, you might silently get bugs:

```js
let userInput = "42"; // comes from a text input field

console.log(userInput ==  42); // true  — might hide a type mismatch bug
console.log(userInput === 42); // false — correctly catches the mismatch
```

> ⚠️ **Rule of thumb:** Always use `===` by default. Only use `==` when you have a very specific reason to need type coercion — which is rare.

* * *

## Logical Operators

Logical operators let you **combine or invert boolean conditions**. They're what make complex `if` statements possible.

| Operator | Name | Returns `true` when… | Example |
| --- | --- | --- | --- |
| `&&` | AND | Both sides are `true` | `age > 18 && hasID` |
| `||` | OR | At least one side is `true` | `isAdmin || isOwner` |
| `!` | NOT | The operand is `false` | `!isLoggedIn` |

### Truth Table for Logical Operators

A truth table maps every possible combination of inputs to its output. Memorise this — it's fundamental to all programming logic.

| 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` |

### Code Example

```js
let age      = 22;
let hasID    = true;
let isBanned = false;

// && (AND) — both must be true
console.log(age >= 18 && hasID);    // true  ← both conditions pass
console.log(age >= 18 && isBanned); // false ← second condition fails

// || (OR) — at least one must be true
console.log(age < 18 || hasID);     // true  ← hasID saves it
console.log(age < 18 || isBanned);  // false ← both conditions fail

// ! (NOT) — flips the boolean
console.log(!isBanned); // true  ← not banned = allowed in
console.log(!hasID);    // false ← negating true gives false

// Real-world: combining all three for an entry check
if (age >= 18 && hasID && !isBanned) {
  console.log("Welcome in! 🎉");
} else {
  console.log("Entry denied.");
}
// Output: "Welcome in! 🎉"
```

> 💡 **Short-circuit evaluation:** JavaScript is smart — with `&&`, if the first condition is `false`, it doesn't bother checking the rest. With `||`, if the first is `true`, it stops there. This is called *short-circuiting* and is very useful for performance and defensive coding.

* * *

## Assignment Operators

Assignment operators **store values into variables**. The simple `=` sets a value, but the compound forms are handy shortcuts that combine an operation with assignment in one step.

| Operator | Name | Equivalent to | Example | Result |
| --- | --- | --- | --- | --- |
| `=` | Assignment | — | `x = 10` | `x` is `10` |
| `+=` | Add & assign | `x = x + 5` | `x += 5` | `x` is `15` |
| `-=` | Subtract & assign | `x = x - 3` | `x -= 3` | `x` is `12` |

### Code Example

```js
let score = 0;       // simple assignment
console.log(score);  // 0

score += 10;         // same as: score = score + 10
console.log(score);  // 10

score += 5;          // player picks up a bonus
console.log(score);  // 15

score -= 3;          // player takes a hit
console.log(score);  // 12

// += also works with strings
let message = "Hello";
message += ", World!";
console.log(message); // "Hello, World!"
```

> 💡 There are also `*=` and `/=` operators that work the same way. Once you understand `+=` and `-=`, those come naturally.

* * *

## Putting It All Together

Here's a quick real-world snippet that uses all four operator types together:

```js
let price    = 100;
let discount = 20;
let taxRate  = 0.1;
let isPremiumUser = true;
let hasCoupon     = false;

// Arithmetic — calculate final price
price -= discount;         // Assignment + Arithmetic: price = 80
let tax = price * taxRate; // Arithmetic: tax = 8
let total = price + tax;   // Arithmetic: total = 88

// Comparison + Logical — apply free shipping
if (total > 50 && (isPremiumUser || hasCoupon)) {
  console.log("✅ Free shipping applied!");
}

// Output
console.log("Total: $" + total); // "Total: $88"
// Output: "✅ Free shipping applied!"
```

* * *

## Practice Assignment

Time to practice! Try completing these three tasks on your own before looking anything up.

### Task 1 — Arithmetic operations

```js
let num1 = 20;
let num2 = 6;

// Perform and log: addition, subtraction, multiplication, division, modulus
// Your code here...
```

### Task 2 — `==` vs `===`

```js
let strNum = "20";
let realNum = 20;

// Compare strNum with realNum using both == and ===
// Log the results and observe the difference
// Your code here...
```

### Task 3 — Logical operators

```js
let isLoggedIn = true;
let isBanned   = false;
let hasVerifiedEmail = true;

// Write a condition: user can post if they are logged in,
// not banned, AND have a verified email
// Your code here...
```

<details> <summary>👀 Click to see the solutions</summary>

```js
// Task 1
let num1 = 20;
let num2 = 6;
console.log(num1 + num2);  // 26
console.log(num1 - num2);  // 14
console.log(num1 * num2);  // 120
console.log(num1 / num2);  // 3.333...
console.log(num1 % num2);  // 2

// Task 2
let strNum = "20";
let realNum = 20;
console.log(strNum ==  realNum); // true  ← type coercion
console.log(strNum === realNum); // false ← strict, different types

// Task 3
let isLoggedIn = true;
let isBanned   = false;
let hasVerifiedEmail = true;

if (isLoggedIn && !isBanned && hasVerifiedEmail) {
  console.log("You can post! ✅");
} else {
  console.log("Access restricted.");
}
// Output: "You can post! ✅"
```

</details>

* * *

## Summary

Here's a quick recap of everything we covered:

| Category | Operators | Key takeaway |
| --- | --- | --- |
| **Arithmetic** | `+` `-` `*` `/` `%` | `%` returns the remainder, not the quotient |
| **Comparison** | `==` `===` `!=` `>` `<` | Always prefer `===` over `==` |
| **Logical** | `&&` `||` `!` | Combine and invert boolean conditions |
| **Assignment** | `=` `+=` `-=` | Shortcuts that update and reassign in one step |

Operators are the foundation of every JavaScript program. Once these feel second-nature, you're ready to tackle functions, loops, arrays, and everything beyond.

* * *

## What's Next?

Now that you've got operators down, here's a natural progression:

*   **Conditional statements** (`if`, `else`, `switch`) — using comparison and logical operators to control program flow
    
*   **Loops** (`for`, `while`) — where `+=` and `<` become your best friends
    
*   **Functions** — wrapping your operator logic into reusable blocks