# JavaScript Operators: The Basics You Need to Know

If variables are the *nouns* of JavaScript, operators are the *verbs*. They're the symbols that actually **do things** — add numbers, compare values, make decisions. You literally cannot write a single useful line of JavaScript without them.

In this article, we'll cover the four operator families you'll use every single day: **arithmetic**, **comparison**, **logical**, and **assignment** operators. No theory-heavy stuff, no operator precedence rabbit holes — just practical usage with console examples you can try right now.

Let's go. 🚀

* * *

## What Are Operators?

An **operator** is a symbol that performs an operation on one or more values (called *operands*).

```js
let result = 5 + 3;
//           ↑ ↑ ↑
//     operand │ operand
//          operator
```

Here, `+` is the operator, and `5` and `3` are the operands. The operator takes the two values and produces a new one: `8`.

That's it. That's the whole concept. Everything else is just learning which symbol does what.

Here's a quick map of the categories we'll cover:

| Category | Operators | What they do |
| --- | --- | --- |
| Arithmetic | `+` `-` `*` `/` `%` | Math on numbers |
| Comparison | `==` `===` `!=` `>` `<` | Compare two values → `true`/`false` |
| Logical | `&&` \` |  |
| Assignment | `=` `+=` `-=` | Store or update values in variables |

* * *

## 1\. Arithmetic Operators

These are the ones you already know from school math. Open your browser console (`F12` → Console tab) and try these:

```js
console.log(10 + 5);  // 15  → Addition
console.log(10 - 5);  // 5   → Subtraction
console.log(10 * 5);  // 50  → Multiplication
console.log(10 / 5);  // 2   → Division
console.log(10 % 3);  // 1   → Remainder (Modulus)
```

The first four are self-explanatory. The interesting one is `%` — the **modulus** operator.

### The `%` (Modulus) Operator

`%` gives you the **remainder** after division. `10 % 3` is `1` because 3 goes into 10 three times (making 9), leaving `1` behind.

Its most famous everyday use? Checking if a number is even or odd:

```js
console.log(8 % 2);   // 0 → even (divides cleanly)
console.log(7 % 2);   // 1 → odd (leaves a remainder)
```

If `number % 2 === 0`, the number is even. You'll use this trick constantly.

### ⚠️ One thing to watch: `+` with strings

The `+` operator has a second job — joining strings (concatenation). This causes one of the most common beginner surprises:

```js
console.log(5 + 5);      // 10       → number + number = math
console.log("5" + 5);    // "55"     → string + number = concatenation!
console.log("Hello" + " " + "World"); // "Hello World"
```

If either side of `+` is a string, JavaScript joins instead of adding. Keep this in mind whenever you're working with user input (which always arrives as a string).

* * *

## 2\. Comparison Operators

Comparison operators compare two values and always return a **boolean**: `true` or `false`.

```js
console.log(10 > 5);    // true   → greater than
console.log(10 < 5);    // false  → less than
console.log(10 == 10);  // true   → equal (loose)
console.log(10 != 5);   // true   → not equal
```

These become the backbone of every `if` statement you'll ever write.

### `==` vs `===` — The Difference That Actually Matters

This is the single most important thing in this article, so let's slow down.

*   `==` (**loose equality**) — compares values *after converting* them to the same type
    
*   `===` (**strict equality**) — compares values **and** types, with **no conversion**
    

Watch what happens:

```js
console.log(5 == "5");    // true  😬 (string "5" gets converted to number 5)
console.log(5 === "5");   // false ✅ (number vs string → different types)

console.log(0 == false);  // true  😬 (false converts to 0)
console.log(0 === false); // false ✅ (number vs boolean)

console.log("" == false); // true  😬
console.log("" === false);// false ✅
```

With `==`, JavaScript tries to be "helpful" by converting types behind your back — and that helpfulness causes bugs that are genuinely hard to track down.

**The rule to remember:** ✅ **Always use** `===` **(and** `!==`**). Forget** `==` **exists.**

```js
let userInput = "18";  // input from a form is always a string

if (userInput === 18) {
  console.log("You can vote!");   // ❌ never runs — string !== number
}

if (Number(userInput) === 18) {
  console.log("You can vote!");   // ✅ convert first, then compare strictly
}
```

Convert your types *explicitly* when you need to, and compare *strictly* — your future self will thank you.

* * *

## 3\. Logical Operators

Logical operators let you combine multiple conditions or flip them.

| Operator | Name | Returns `true` when... |
| --- | --- | --- |
| `&&` | AND | **both** sides are true |
| \` |  | \` |
| `!` | NOT | the value is false (it flips 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 |

The shortcut way to read it:

*   `&&` → "false wins" (one false makes the whole thing false)
    
*   `||` → "true wins" (one true makes the whole thing true)
    
*   `!` → "opposite day"
    

### Real-World Example

```js
let age = 25;
let hasLicense = true;

// AND → both conditions must pass
if (age >= 18 && hasLicense) {
  console.log("You can drive 🚗");
}

let isWeekend = true;
let isHoliday = false;

// OR → any one condition is enough
if (isWeekend || isHoliday) {
  console.log("No work today 🎉");
}

let isLoggedIn = false;

// NOT → flips the value
if (!isLoggedIn) {
  console.log("Please log in first 🔒");
}
```

You'll use these constantly for form validation, permission checks, and conditional rendering — basically every "should this happen?" decision in your code.

* * *

## 4\. Assignment Operators

The simplest of the bunch. `=` **assigns** a value to a variable:

```js
let score = 100;   // "put 100 into score"
```

⚠️ Quick warning: `=` is **assignment**, not comparison. Writing `if (x = 5)` instead of `if (x === 5)` is a classic bug — the first one *assigns* 5 to x rather than checking it!

### Shorthand Assignment: `+=` and `-=`

Very often you want to update a variable *based on its current value*:

```js
let score = 100;

score = score + 10;  // works, but verbose
score += 10;         // same thing, cleaner ✨

console.log(score);  // 120
```

`x += 5` is just shorthand for `x = x + 5`. Same for subtraction:

```js
let lives = 3;
lives -= 1;          // same as: lives = lives - 1
console.log(lives);  // 2
```

You'll see these everywhere — counters, scores, totals, loops:

```js
let cartTotal = 0;
cartTotal += 499;   // added a keyboard
cartTotal += 999;   // added a mouse
console.log(cartTotal);  // 1498
```

* * *

## Quick Recap

*   **Operators** are symbols that perform operations on values
    
*   **Arithmetic** (`+ - * / %`) does math; `%` gives the remainder (great for even/odd checks); `+` also joins strings
    
*   **Comparison** (`=== !== > <`) returns `true`/`false` — always prefer `===` **over** `==`
    
*   **Logical** (`&& || !`) combines conditions — `&&` needs *all* true, `||` needs *any* true, `!` flips
    
*   **Assignment** (`= += -=`) stores and updates values — `+=` is your shorthand friend
    

* * *

## 🧪 Practice Assignment

Time to get your hands dirty. Open your console and solve these:

### Task 1 — Arithmetic

Take two numbers and log the result of all five arithmetic operations:

```js
let a = 17;
let b = 5;

console.log(a + b);  // ?
console.log(a - b);  // ?
console.log(a * b);  // ?
console.log(a / b);  // ?
console.log(a % b);  // ?
```

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

Compare these values using both operators and *predict the output before running*:

```js
let x = 100;
let y = "100";

console.log(x == y);   // ?
console.log(x === y);  // ?
```

Write one line in a comment explaining *why* the results differ.

### Task 3 — Logical Operators

Write a small condition that checks if a user can get a student discount — they must be a student **and** either under 25 **or** have a valid ID:

```js
let isStudent = true;
let age = 26;
let hasValidID = true;

// Your condition here using && and ||
if (/* ??? */) {
  console.log("Discount applied! 🎓");
}
```

Drop your solutions in the comments — I'd love to see how you approach Task 3! 👇

* * *

*Happy coding! If this helped you, share it with someone starting their JavaScript journey.* ✨