JavaScript Operators: Working with Values

Every useful program does something with data — adds numbers, compares values, checks conditions. Operators are the symbols that make all of that happen. You have already used them without thinking much about it: = to assign a value, + to add numbers, ! to flip a boolean.

This article walks through the four categories of operators you will use constantly, with clear examples for each.

---

What is an Operator?

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

let result = 10 + 5;
//           ─┬─ ─ ─┬─
//            │     │
//         operand  operand
//              ─┬─
//            operator

JavaScript groups operators by what they do. There are four categories covered in this article:

┌──────────────────────────────────────────────────────────┐
│                  Operator Categories                     │
├──────────────────┬───────────────────────────────────────┤
│  Arithmetic      │  +   -   *   /   %                    │
│  Comparison      │  ==  ===  !=  !==  >  <  >=  <=       │
│  Logical         │  &&  ||   !                           │
│  Assignment      │  =   +=  -=  *=  /=                   │
└──────────────────┴───────────────────────────────────────┘

---

Arithmetic Operators

Arithmetic operators perform math on numbers. They work exactly as you would expect from school.

let a = 20;
let b = 6;

console.log(a + b);  // 26  — addition
console.log(a - b);  // 14  — subtraction
console.log(a * b);  // 120 — multiplication
console.log(a / b);  // 3.3333... — division
console.log(a % b);  // 2   — remainder (modulus)

The modulus operator % is the one most beginners find unfamiliar. It gives you the remainder after dividing two numbers — not the result of the division itself.

console.log(10 % 3); // 1  — because 10 = 3×3 + 1
console.log(15 % 5); // 0  — because 15 = 5×3 + 0 (divides evenly)
console.log(7 % 2);  // 1  — because 7 = 2×3 + 1

A practical use for % is checking whether a number is even or odd:

let num = 14;

if (num % 2 === 0) {
  console.log(num + " is even");
} else {
  console.log(num + " is odd");
}
// 14 is even

Arithmetic with strings

The + operator has a special behavior when used with strings — it concatenates them instead of adding:

console.log("Hello" + " " + "World"); // "Hello World"
console.log("Score: " + 100);         // "Score: 100"

If one side is a string and the other is a number, JavaScript converts the number to a string and joins them. This can cause surprises:

console.log("5" + 3);  // "53" — not 8! String concatenation wins
console.log("5" - 3);  // 2   — minus has no string behavior, so JS converts "5" to a number

The + operator is the only arithmetic operator with this string behavior. All others (-, *, /, %) will try to convert strings to numbers first.

Increment and decrement

Two shorthand operators for adding or subtracting 1:

let count = 0;

count++; // same as count = count + 1
console.log(count); // 1

count++:
console.log(count); // 2

count--; // same as count = count - 1
console.log(count); // 1

---

Comparison Operators

Comparison operators compare two values and always return a boolean — either true or false.

let x = 10;
let y = 20;

console.log(x > y);  // false — is 10 greater than 20?
console.log(x < y);  // true  — is 10 less than 20?
console.log(x >= 10); // true — is 10 greater than or equal to 10?
console.log(x <= 9);  // false — is 10 less than or equal to 9?

== vs === — The most important distinction

This is the comparison operators pair that trips up nearly every beginner, and it is worth understanding clearly.

== (loose equality) — compares values after converting both sides to the same type. It is lenient.

=== (strict equality) — compares both value AND type. No conversion happens.

console.log(5 == "5");   // true  — "5" is converted to 5, then compared
console.log(5 === "5");  // false — number vs string, types differ

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

console.log(null == undefined);  // true  — special case in JS
console.log(null === undefined); // false — different types

console.log(1 == true);   // true  — true converts to 1
console.log(1 === true);  // false — number vs boolean

The type conversion == performs can produce results that seem wrong. In almost every situation you should use ===. It says exactly what you mean: "are these two values the same value of the same type?"

// A common bug caused by ==
let userInput = "42"; // came from a text field — it's a string
let expectedValue = 42; // a number

if (userInput == expectedValue) {
  console.log("Match!"); // prints Match! — might not be what you wanted
}

if (userInput === expectedValue) {
  console.log("Exact match!"); // does NOT print — types differ
}

!= and !==

The inequality counterparts follow the same rule:

console.log(5 != "5");   // false — after conversion they are equal
console.log(5 !== "5");  // true  — different types, so not strictly equal

console.log(10 != 20);   // true  — they are not equal
console.log(10 !== 20);  // true  — neither value nor type match

As with equality, prefer !== over != in your code.

---

Logical Operators

Logical operators work with boolean values and let you combine or invert conditions. They are the building blocks of decision-making in code.

&& — AND

Returns true only when both sides are true. If either side is false, the result is false.

console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

Practical use — checking multiple conditions at once:

let age = 20;
let hasID = true;

if (age >= 18 && hasID) {
  console.log("Entry allowed.");
} else {
  console.log("Entry denied.");
}
// Entry allowed.

let isLoggedIn = true;
let isAdmin = false;

if (isLoggedIn && isAdmin) {
  console.log("Welcome to the admin panel.");
} else {
  console.log("Access denied.");
}
// Access denied. — isAdmin is false, so && fails

|| — OR

Returns true when at least one side is true. Only returns false when both sides are false.

console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

Practical use — checking if at least one condition is met:

let isWeekend = false;
let isHoliday = true;

if (isWeekend || isHoliday) {
  console.log("No work today!");
} else {
  console.log("Back to work.");
}
// No work today! — isHoliday is true, so || passes

let hasCash = false;
let hasCard = false;

if (hasCash || hasCard) {
  console.log("Purchase successful.");
} else {
  console.log("No payment method available.");
}
// No payment method available. — both are false

! — NOT

Flips a boolean. true becomes false, false becomes true.

console.log(!true);  // false
console.log(!false); // true

let isLoggedIn = false;
console.log(!isLoggedIn); // true — the user is NOT logged in

// Common pattern: toggle a value
let darkMode = false;
darkMode = !darkMode;
console.log(darkMode); // true

darkMode = !darkMode;
console.log(darkMode); // false

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   │
└─────────┴─────────┴──────────┴──────────┴──────────┘

---

Assignment Operators

You already know = — it assigns a value to a variable. The other assignment operators are shorthands that combine a math operation with assignment.

let score = 100;

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

score -= 20; // same as: score = score - 20
console.log(score); // 90

score *= 2;  // same as: score = score * 2
console.log(score); // 180

score /= 3;  // same as: score = score / 3
console.log(score); // 60

score %= 7;  // same as: score = score % 7
console.log(score); // 4

These are purely shorthand — they do not do anything you could not do with score = score + 10. They just make the code shorter and easier to read, especially in loops:

let total = 0;
let prices = [120, 85, 200, 45, 310];

for (let i = 0; i < prices.length; i++) {
  total += prices[i]; // accumulate without writing total = total + prices[i] each time
}

console.log("Total:", total); // Total: 760

---

Putting It All Together

Here is a small program that uses all four categories together — arithmetic to calculate, comparison to evaluate, logical to combine conditions, and assignment to track state:

let num1 = 15;
let num2 = 4;

// Arithmetic
console.log("Sum:", num1 + num2);       // 19
console.log("Difference:", num1 - num2); // 11
console.log("Product:", num1 * num2);    // 60
console.log("Quotient:", num1 / num2);   // 3.75
console.log("Remainder:", num1 % num2);  // 3

// Comparison
console.log(num1 > num2);    // true
console.log(num1 === 15);    // true
console.log(num1 === "15");  // false — strict equality catches the type difference
console.log(num1 == "15");   // true  — loose equality converts the string

// Logical
let isPositive = num1 > 0;   // true
let isEven = num1 % 2 === 0; // false — 15 is odd

console.log("Positive AND even:", isPositive && isEven); // false
console.log("Positive OR even:", isPositive || isEven);  // true
console.log("Not positive:", !isPositive);               // false

// Assignment operators
let total = 0;
total += num1; // 15
total += num2; // 19
total *= 2;    // 38
console.log("Total after operations:", total); // 38

---

Quick Recap

• Arithmetic operators perform math: +, -, *, /, %. The % gives the remainder after division.

• Comparison operators return true or false. Always prefer === over == — it checks type as well as value.

• Logical operators combine or invert boolean values: && (both must be true), || (at least one must be true), ! (flips the value).

• Assignment operators are shorthands: +=, -=, *=, /=, %= update a variable in place.

---