JavaScript Operators: Arithmetic, Logical, Comparison

Operators perform operations on values. Understanding them is essential for writing JavaScript.

Arithmetic Operators

Perform mathematical calculations:

Addition (+)

console.log(5 + 3); // 8
console.log("Hello" + " " + "World"); // "Hello World"
console.log(5 + "3"); // "53" (type coercion)

Subtraction (-)

console.log(10 - 3); // 7
console.log(5 - 10); // -5

Multiplication (*)

console.log(5 * 3); // 15
console.log(5 * -2); // -10

Division (/)

console.log(15 / 3); // 5
console.log(10 / 3); // 3.333...
console.log(10 / 0); // Infinity

Modulo (%)

Remainder after division:

console.log(10 % 3); // 1
console.log(20 % 5); // 0
console.log(-10 % 3); // -1

Exponentiation (**)

console.log(2 ** 3); // 8
console.log(5 ** 2); // 25
console.log(2 ** -1); // 0.5

Increment (++)

let x = 5;
x++; // x = 6
console.log(x); // 6

// Pre-increment
let y = 5;
console.log(++y); // 6 (increments then returns)

// Post-increment
let z = 5;
console.log(z++); // 5 (returns then increments)
console.log(z); // 6

Decrement (–)

let x = 5;
x--; // x = 4
console.log(x); // 4

// Pre-decrement
let y = 5;
console.log(--y); // 4

// Post-decrement
let z = 5;
console.log(z--); // 5
console.log(z); // 4

Comparison Operators

Compare values and return boolean:

Equality (==)

Loose equality (type coercion):

console.log(5 == 5); // true
console.log(5 == "5"); // true (type coercion)
console.log(0 == false); // true
console.log(null == undefined); // true

Strict Equality (===)

No type coercion (recommended):

console.log(5 === 5); // true
console.log(5 === "5"); // false
console.log(0 === false); // false
console.log(null === undefined); // false

Inequality (!=)

Loose inequality:

console.log(5 != 3); // true
console.log(5 != "5"); // false (type coercion)

Strict Inequality (!==)

No type coercion:

console.log(5 !== 3); // true
console.log(5 !== "5"); // true

Greater Than (>)

console.log(10 > 5); // true
console.log(5 > 10); // false
console.log(5 > 5); // false

Greater Than or Equal (>=)

console.log(10 >= 5); // true
console.log(5 >= 5); // true
console.log(5 >= 10); // false

Less Than (<)

console.log(5 < 10); // true
console.log(10 < 5); // false
console.log(5 < 5); // false

Less Than or Equal (<=)

console.log(5 <= 10); // true
console.log(5 <= 5); // true
console.log(10 <= 5); // false

Logical Operators

Combine boolean values:

AND (&&)

Both conditions must be true:

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

// With values
console.log(5 > 3 && 10 > 5); // true
console.log(5 > 3 && 10 < 5); // false

OR (||)

At least one condition must be true:

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

// With values
console.log(5 > 10 || 10 > 5); // true
console.log(5 > 10 || 10 < 5); // false

NOT (!)

Reverses boolean:

console.log(!true); // false
console.log(!false); // true
console.log(!(5 > 3)); // false

Assignment Operators

Assign values to variables:

Basic Assignment (=)

let x = 5;

Addition Assignment (+=)

let x = 5;
x += 3; // x = x + 3
console.log(x); // 8

Subtraction Assignment (-=)

let x = 10;
x -= 3; // x = x - 3
console.log(x); // 7

Multiplication Assignment (*=)

let x = 5;
x *= 2; // x = x * 2
console.log(x); // 10

Division Assignment (/=)

let x = 10;
x /= 2; // x = x / 2
console.log(x); // 5

Modulo Assignment (%=)

let x = 10;
x %= 3; // x = x % 3
console.log(x); // 1

Ternary Operator

Shorthand for if…else:

const age = 20;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // "adult"

Nullish Coalescing (??)

Use right value if left is null or undefined:

const x = null;
console.log(x ?? "default"); // "default"

const y = 0;
console.log(y ?? "default"); // 0 (0 is not nullish)

const z = undefined;
console.log(z ?? "default"); // "default"

Optional Chaining (?.)

Safely access nested properties:

const user = {
    name: "Alice",
    address: {
        city: "New York"
    }
};

console.log(user.address?.city); // "New York"
console.log(user.phone?.number); // undefined (no error)

// With arrays
const arr = [1, 2, 3];
console.log(arr?.[0]); // 1
console.log(arr?.[10]); // undefined

Operator Precedence

Operations are evaluated in order:

console.log(2 + 3 * 4); // 14 (multiplication first)
console.log((2 + 3) * 4); // 20 (parentheses first)

console.log(true || false && false); // true (AND before OR)
console.log((true || false) && false); // false

Practical Examples

Validation

function isValidUser(user) {
    return user && user.name && user.email && user.age >= 18;
}

console.log(isValidUser({ name: "Alice", email: "[email protected]", age: 25 })); // true
console.log(isValidUser({ name: "Bob", age: 15 })); // false

Discount Calculation

function calculatePrice(price, isStudent, isMember) {
    let discount = 0;
    
    if (isStudent) discount += 0.10;
    if (isMember) discount += 0.05;
    
    return price * (1 - discount);
}

console.log(calculatePrice(100, true, true)); // 85
console.log(calculatePrice(100, true, false)); // 90

Safe Property Access

const config = {
    database: {
        host: "localhost",
        port: 5432
    }
};

const port = config?.database?.port ?? 3306;
console.log(port); // 5432

const timeout = config?.timeout ?? 5000;
console.log(timeout); // 5000

Summary

Arithmetic: +, -, *, /, %, **
Comparison: ==, ===, !=, !==, >, >=, <, <=
Logical: &&, ||, !
Assignment: =, +=, -=, *=, /=, %=
Ternary: condition ? true : false
Nullish coalescing: ??
Optional chaining: ?.
Use === instead of == to avoid type coercion issues