DEV Community

sanjeev singh
sanjeev singh

Posted on

JavaScript Operators: The Basics You Need to Know

Every time you add two numbers, compare two values, or check two conditions at once — you're using an operator. Operators are the action symbols of JavaScript. They tell the language what to do with your data.

This guide covers the four operator types you'll use every single day.

What Are Operators?

An operator is a symbol that performs an action on one or more values. The values it works with are called operands.

10 + 5
//  ↑ operator
// 10 and 5 are operands
// result: 15
Enter fullscreen mode Exit fullscreen mode

JavaScript operators fall into four main categories — arithmetic, comparison, logical, and assignment.


1. Arithmetic Operators

These work just like math class. Give them numbers, get a number back.

Operator Name Example Result
+ Addition 8 + 3 11
- Subtraction 8 - 3 5
* Multiplication 8 * 3 24
/ Division 8 / 2 4
% Modulus (remainder) 8 % 3 2
console.log(10 + 5);  // 15
console.log(10 - 5);  // 5
console.log(10 * 5);  // 50
console.log(10 / 5);  // 2
console.log(10 % 3);  // 1
Enter fullscreen mode Exit fullscreen mode

The % Modulus Operator

Modulus gives you the remainder after division — not the result. It's one of the most useful operators in everyday coding:

console.log(10 % 3);  // 1  → 10 ÷ 3 = 3 remainder 1
console.log(15 % 5);  // 0  → 15 ÷ 5 = 3 remainder 0
console.log(7  % 2);  // 1  → 7  ÷ 2 = 3 remainder 1
Enter fullscreen mode Exit fullscreen mode

Most common use: check if a number is even or odd

const number = 14;

if (number % 2 === 0) {
  console.log("Even"); // Even
} else {
  console.log("Odd");
}
Enter fullscreen mode Exit fullscreen mode

+ with Strings

The + operator also joins strings together — called concatenation:

const first = "Hello";
const second = "World";

console.log(first + ", " + second + "!"); // "Hello, World!"
Enter fullscreen mode Exit fullscreen mode

Watch out when mixing types with +:

console.log("5" + 3);  // "53"  ← both treated as strings!
console.log("5" - 3);  // 2     ← subtraction converts to numbers

2. Comparison Operators

Comparison operators compare two values and always return 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 5 != 3 true
!== Strictly not equal 5 !== "5" true
> Greater than 8 > 5 true
< Less than 3 < 10 true
>= Greater than or equal 5 >= 5 true
<= Less than or equal 4 <= 3 false

== vs === — The Most Important Distinction

This is one of the most common sources of bugs for beginners, so pay close attention.

== (loose equality) converts types before comparing:

console.log(5 == "5");    // true  ← number 5 and string "5" are treated as equal
console.log(0 == false);  // true  ← 0 and false are treated as equal
console.log(1 == true);   // true  ← 1 and true are treated as equal
console.log("" == false); // true  ← empty string and false are treated as equal
Enter fullscreen mode Exit fullscreen mode

=== (strict equality) checks both the value AND the type — no conversions:

console.log(5 === "5");    // false ← number ≠ string
console.log(0 === false);  // false ← number ≠ boolean
console.log(1 === true);   // false ← number ≠ boolean
console.log(5 === 5);      // true  ← same value, same type 
Enter fullscreen mode Exit fullscreen mode
     ==  (loose)                    ===  (strict)
  ┌──────────────────┐          ┌──────────────────────┐
  │  Converts types  │          │ No type conversion   │
  │  first, then     │          │ Value AND type must  │
  │  compares values │          │ both match exactly   │
  └──────────────────┘          └──────────────────────┘
   5 == "5"  →  true             5 === "5"  →  false
   0 == false → true             0 === false → false
Enter fullscreen mode Exit fullscreen mode

Rule: Always use === and !==. The loose operators (==, !=) can cause subtle, hard-to-find bugs.

Practical comparison examples:

const userAge = 20;

console.log(userAge > 18);   // true  — they're an adult
console.log(userAge === 21); // false — not exactly 21
console.log(userAge >= 18);  // true  — 18 or older
console.log(userAge < 13);   // false — not a child
Enter fullscreen mode Exit fullscreen mode

3. Logical Operators

Logical operators let you combine or invert boolean conditions. They're what make complex decision-making possible.

Operator Name Returns true when...
&& AND Both sides are true
`\ \ `
! NOT The value is false (inverts 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 |

&& — AND (both must be true)

const age = 20;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Welcome! You may enter."); //  both true
}

const isRaining = true;
const hasMoney = false;

if (isRaining && hasMoney) {
  console.log("Buy an umbrella");
} else {
  console.log("Stay home!"); //  hasMoney is false, so && fails
}
Enter fullscreen mode Exit fullscreen mode

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

const isWeekend = false;
const isHoliday = true;

if (isWeekend || isHoliday) {
  console.log("No work today!"); //  isHoliday is true
}

const hasEmail = "";
const hasPhone = "9876543210";

if (hasEmail || hasPhone) {
  console.log("We can contact you!"); //  hasPhone is truthy
}
Enter fullscreen mode Exit fullscreen mode

! — NOT (flips true/false)

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in."); //  !false = true
}

console.log(!true);  // false
console.log(!false); // true
console.log(!0);     // true  (0 is falsy)
console.log(!"hi");  // false ("hi" is truthy)
Enter fullscreen mode Exit fullscreen mode

Combining operators in real conditions

const username = "alice";
const password = "1234";
const isAdmin  = false;

// Check login: correct credentials AND not banned
if (username === "alice" && password === "1234" && !isAdmin) {
  console.log("Regular user logged in.");
}

// Allow access: is admin OR has a special pass
const hasSpecialPass = true;
if (isAdmin || hasSpecialPass) {
  console.log("Access granted!"); // 
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)