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
Related Resources
Official Documentation
Next Steps
- Conditional Statements in JavaScript
- Type Coercion and Type Conversion
- Loops in JavaScript (for, while, for…of, for…in)
Comments