DEV Community

Cover image for JavaScript Operators: The Basics You Need to Know
Pratham
Pratham

Posted on

JavaScript Operators: The Basics You Need to Know

A no-fluff guide to the operators you'll actually use every single day.


If variables are the boxes where you store stuff, then operators are the tools you use to do things with that stuff. Add two numbers? That's an operator. Check if a user is logged in? Operator. Decide whether to show a discount banner? Yep — operators again.

When I started my JavaScript journey in the ChaiCode Web Dev Cohort 2026, operators felt like the easiest part. "It's just math, right?" Well, mostly — until I ran into == vs === and spent an embarrassing amount of time debugging a condition that looked correct but wasn't.

This article will save you from that pain. Let's break down every operator category you need to know as a beginner, with clear examples you can try right in your console.


What Are Operators?

An operator is a special symbol (or keyword) that tells JavaScript to perform a specific action on one or more values. Those values are called operands.

let result = 10 + 5;
//           ↑    ↑
//     operand  operand
//           ↑
//        operator
Enter fullscreen mode Exit fullscreen mode

That's it. The + is the operator, 10 and 5 are the operands, and 15 is the result. You already know how this works from school math — JavaScript just formalizes it.

Operators fall into different categories based on what they do. Let's walk through the ones you'll use every day.


1. Arithmetic Operators — Doing the Math

These are the most intuitive operators. If you survived 5th-grade math, you already know most of them.

Operator Name Example Result
+ Addition 10 + 3 13
- Subtraction 10 - 3 7
* Multiplication 10 * 3 30
/ Division 10 / 3 3.333
% Modulus (Remainder) 10 % 3 1

Let's See Them in Action

let a = 20;
let b = 7;

console.log(a + b);  // 27 — Addition
console.log(a - b);  // 13 — Subtraction
console.log(a * b);  // 140 — Multiplication
console.log(a / b);  // 2.857142... — Division
console.log(a % b);  // 6 — Remainder after dividing 20 by 7
Enter fullscreen mode Exit fullscreen mode

The Modulus Operator (%) — The Underrated One

A lot of beginners skip right past %, but it's genuinely useful. It gives you the remainder of a division. Where would you use it?

  • Checking if a number is even or odd:
let num = 15;

if (num % 2 === 0) {
  console.log("Even");
} else {
  console.log("Odd"); // ← This runs
}
Enter fullscreen mode Exit fullscreen mode
  • Cycling through values (like rotating through an array of colors or images).

Don't underestimate the modulus. It shows up more often than you'd think.

Quick Note: + With Strings

The + operator does double duty in JavaScript. With numbers, it adds. With strings, it concatenates (joins them together):

let firstName = "Pratham";
let lastName = "Bhardwaj";

console.log(firstName + " " + lastName); // "Pratham Bhardwaj"
Enter fullscreen mode Exit fullscreen mode

This catches beginners off guard when one value is a string and the other is a number:

console.log("5" + 3);  // "53" — string concatenation, NOT addition!
console.log(5 + 3);    // 8   — actual addition
Enter fullscreen mode Exit fullscreen mode

Keep this in mind. It will save you from some weird bugs.


2. Comparison Operators — Asking Questions

Comparison operators let you compare two values. They always return a boolean — either true or false. You'll use these constantly in if statements and loops.

Operator Meaning Example Result
== Equal (loose) 5 == "5" true
=== Equal (strict) 5 === "5" false
!= Not equal (loose) 5 != "5" false
!== Not equal (strict) 5 !== "5" true
> Greater than 10 > 5 true
< Less than 10 < 5 false
>= Greater than or equal 10 >= 10 true
<= Less than or equal 10 <= 5 false

The Big One: == vs ===

This is where most beginners get tripped up, and honestly, I was no different.

== (Loose Equality) — Compares values but converts types before comparing. JavaScript tries to be "helpful" by converting one type to match the other.

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

console.log(5 == "5");   // true  — JS converts "5" to 5, then compares
console.log(5 === "5");  // false — different types (number vs string), instant false

console.log(0 == false);  // true  — JS converts false to 0, then compares
console.log(0 === false); // false — number vs boolean, nope

console.log(null == undefined);  // true  — a weird special case in JS
console.log(null === undefined); // false — different types
Enter fullscreen mode Exit fullscreen mode

My Advice?

Always use === and !==. Strict equality is predictable. Loose equality has a bunch of quirky conversion rules that can introduce subtle bugs into your code. Every professional codebase I've seen enforces strict equality, and most linters will flag == as a warning.

More Comparison Examples

let userAge = 22;
let minAge = 18;

console.log(userAge > minAge);   // true — 22 is greater than 18
console.log(userAge < minAge);   // false
console.log(userAge >= 22);      // true — equal counts!
console.log(userAge <= 21);      // false
Enter fullscreen mode Exit fullscreen mode

3. Logical Operators — Making Decisions

Logical operators let you combine multiple conditions. They're the glue that holds your if statements together when you need to check more than one thing.

Operator Name What It Does
&& AND true only if both sides are true
`\ \ `
! NOT Flips true to false and vice versa

&& (AND) — "Both Must Be True"

let age = 22;
let hasID = true;

if (age >= 18 && hasID) {
  console.log("Access granted ✅");
} else {
  console.log("Access denied ❌");
}
// Output: "Access granted ✅"
Enter fullscreen mode Exit fullscreen mode

Both conditions must be true for the whole thing to be true. If either one is false, the entire expression is false.

|| (OR) — "At Least One Must Be True"

let isWeekend = false;
let isHoliday = true;

if (isWeekend || isHoliday) {
  console.log("Day off! 🎉");
} else {
  console.log("Back to work 💻");
}
// Output: "Day off! 🎉"
Enter fullscreen mode Exit fullscreen mode

Only one condition needs to be true. The expression is only false when both sides are false.

! (NOT) — "Flip It"

let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in first");
}
// Output: "Please log in first"
Enter fullscreen mode Exit fullscreen mode

The ! just inverts the value. !true becomes false, and !false becomes true. You'll use this a lot to check "if something is NOT the case."

Truth Table for Logical Operators

This is worth bookmarking. When in doubt, refer back to this:

| 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 this table row by row. It'll make logical operators click in your head faster than any explanation.


4. Assignment Operators — Storing and Updating Values

You've already used the most basic assignment operator — the = sign. But JavaScript has shorthand versions that make updating variables cleaner.

Operator Example Equivalent To What It Does
= x = 10 Assigns a value
+= x += 5 x = x + 5 Adds and reassigns
-= x -= 3 x = x - 3 Subtracts and reassigns
*= x *= 2 x = x * 2 Multiplies and reassigns
/= x /= 4 x = x / 4 Divides and reassigns
%= x %= 3 x = x % 3 Modulus and reassigns

In Practice

let score = 100;

score += 20;  // score is now 120
console.log(score); // 120

score -= 50;  // score is now 70
console.log(score); // 70

score *= 2;   // score is now 140
console.log(score); // 140

score /= 7;   // score is now 20
console.log(score); // 20

score %= 3;   // score is now 2 (20 divided by 3, remainder is 2)
console.log(score); // 2
Enter fullscreen mode Exit fullscreen mode

These shorthand operators are everywhere in real code. Updating counters, accumulating totals, adjusting scores — you'll reach for += and -= constantly.


Operator Categories — A Bird's Eye View

Here's a quick reference table of everything we covered:

Category Operators Purpose
Arithmetic +, -, *, /, % Math operations
Comparison ==, ===, !=, !==, >, <, >=, <= Comparing values
Logical &&, `\ \
Assignment {% raw %}=, +=, -=, *=, /=, %= Storing and updating values

Let's Practice: Hands-On Assignment

Theory is great, but you won't actually learn this until you type it yourself. Here's a quick exercise — open your browser console (F12 → Console tab) or your VS Code terminal and try this:

Part 1: Arithmetic Operations

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
Enter fullscreen mode Exit fullscreen mode

Part 2: Comparison — == vs ===

let num = 10;
let str = "10";

console.log("Loose equality:", num == str);   // true (type conversion happens)
console.log("Strict equality:", num === str); // false (different types)

console.log("Loose inequality:", num != str);   // false
console.log("Strict inequality:", num !== str); // true
Enter fullscreen mode Exit fullscreen mode

Part 3: Logical Operators in a Condition

let temperature = 32;
let isSunny = true;

if (temperature > 30 && isSunny) {
  console.log("It's a hot sunny day! ☀️ Stay hydrated.");
}

if (temperature > 40 || isSunny) {
  console.log("You might want sunscreen! 🧴");
}

let isRaining = false;
if (!isRaining) {
  console.log("No umbrella needed today! 🌤️");
}
Enter fullscreen mode Exit fullscreen mode

What to Observe

  • Arithmetic operators work exactly like you'd expect from math class.
  • == can surprise you by converting types silently. === is honest and strict.
  • Logical operators let you build complex conditions from simple true/false checks.

Key Takeaways

  1. Operators are symbols that perform actions on values — math, comparison, logic, and assignment.
  2. Arithmetic operators (+, -, *, /, %) handle math. Watch out for + with strings — it concatenates instead of adding.
  3. Always use === over ==. Strict equality prevents type coercion bugs that are genuinely hard to debug.
  4. Logical operators (&&, ||, !) are essential for combining conditions. Memorize the truth table.
  5. Assignment shorthands (+=, -=, etc.) save you from repetitive code and are used everywhere in real projects.

Wrapping Up

Operators are one of those things that seem basic until you realize they're literally in every line of JavaScript you'll ever write. Whether you're building a calculator, validating a form, checking user permissions, or just incrementing a counter — operators are doing the heavy lifting behind the scenes.

I'm learning all of this as part of the ChaiCode Web Dev Cohort 2026 under Hitesh Chaudhary and Piyush Garg, and honestly, writing these concepts down as articles has been one of the best ways to make them stick. If you're a fellow beginner, I hope this helped you the way I wish someone had helped me.

Feel free to connect with me on LinkedIn or check out PrathamDEV.in for more of my work. I'll keep writing as I keep learning.

Happy coding! 🚀


Written by Pratham Bhardwaj | Web Dev Cohort 2026, ChaiCode

Top comments (0)