1. Introduction
Operators let you perform computations and comparisons on values. JavaScript groups operators into families: arithmetic (math), assignment, comparison (equality and relational), logical (boolean combination), and special operators like the ternary conditional and nullish coalescing. Knowing how each family behaves — especially around type coercion — is essential to writing predictable code.
Cricket analogy: A coach's toolkit has separate families of decisions: run-rate math (arithmetic), setting a new batting order (assignment), comparing two bowlers' economy rates (comparison), and combining conditions like rain AND low overs (logical) — misjudging how a no-ball converts to a dot causes errors.
2. Syntax
let a = 10, b = 3;
a + b; a - b; a * b; a / b; a % b; a ** b; // arithmetic
a == b; a === b; a != b; a !== b; a > b; a <= b; // comparison
a > 5 && b < 5; a > 5 || b > 5; !(a > 5); // logical
a > 18 ? "adult" : "minor"; // ternary
a ?? "default"; // nullish coalescing2.1 Arithmetic Operators
Arithmetic operators (+, -, *, /, %, **) perform numeric computations. % returns the remainder of division, and ** raises a number to a power.
Cricket analogy: Run-rate math is arithmetic: adding partnership runs, subtracting wickets-lost value, and using % to find overs remaining in the current over (47 balls % 6 = 5 balls left), while ** could model exponential pressure building over a run chase.
2.2 Comparison Operators
== and != compare values with type coercion, while === and !== compare both type and value without coercion. Relational operators (<, >, <=, >=) compare numbers or lexicographically compare strings.
Cricket analogy: Comparing "50" == 50 loosely treats a scoreboard string and a number as equal, but === would flag them as different types; comparing batting averages with > works numerically, while comparing player surnames alphabetically for a squad list is lexicographic.
2.3 Logical Operators
&&, ||, and ! combine or invert boolean expressions, but they operate on truthy/falsy values and return one of the original operands rather than always returning a strict boolean.
Cricket analogy: "captain && viceCaptain" doesn't return true/false — it returns viceCaptain itself, like naming who actually leads the coin toss when the captain is available; "!rainDelay" flips a falsy rain status into a usable truthy signal to resume play.
3. Explanation
The || operator returns its first truthy operand (or the last operand if none are truthy), which historically has been used to supply default values — but it treats any falsy value (0, '', false) as 'missing', which can be wrong. The ?? (nullish coalescing) operator, introduced in ES2020, only falls back when the left side is strictly null or undefined, making it safer for defaults involving numbers like 0.
Cricket analogy: Using "overs || 20" to default a T20 match length wrongly resets a legitimately reduced 0-over rain-abandoned match to 20, while "overs ?? 20" only falls back when overs is truly unset, correctly preserving a genuine 0.
Gotcha: operator precedence and the == vs === trap combine here too. 5 == '5' is true because == coerces types before comparing, but 5 === '5' is false. Also, with defaults, x || 'default' incorrectly falls back even when x is a legitimate 0 or empty string, whereas x ?? 'default' only falls back for null/undefined — pick the right one deliberately.
4. Example
let a = 10, b = 3;
console.log(a % b);
console.log(a ** b);
console.log(5 == '5');
console.log(5 === '5');
console.log(null == undefined);
console.log(null === undefined);
let x = 0;
console.log(x || "default");
console.log(x ?? "default");
let age = 20;
console.log(age >= 18 ? "adult" : "minor");5. Output
1
1000
true
false
true
false
default
0
adult6. Key Takeaways
- Arithmetic operators include %, the remainder operator, and **, the exponentiation operator.
- == coerces types before comparing; === requires matching types and values — prefer === in almost all cases.
- || falls back on any falsy value, while ?? only falls back on null or undefined — choose based on whether 0 or '' should count as valid.
- &&, ||, and ! work with truthy/falsy values and can return non-boolean operands, not just true/false.
- The ternary operator (condition ? a : b) is a concise one-line alternative to a simple if/else.
Practice what you learned
1. What is the result of 10 % 3 in JavaScript?
2. Which operator should be preferred to avoid unintended type coercion when comparing two values?
3. Given let x = 0, what does x ?? 'default' evaluate to, and why does it differ from x || 'default'?
4. What does 5 == '5' evaluate to?
5. What is the result of age >= 18 ? 'adult' : 'minor' when age is 20?
Was this page helpful?
You May Also Like
Type Conversion and Coercion in JavaScript
Learn the difference between explicit type conversion and implicit coercion, and the common pitfalls each creates.
if-else in JavaScript
Learn how to make decisions in JavaScript using if, else if, and else statements, and understand how truthy/falsy values control branching.
Optional Chaining and Nullish Coalescing
The ES2020 ?. and ?? operators for safely accessing nested properties and providing defaults only for null/undefined.
Variables in JavaScript (var, let, const)
Learn how var, let, and const differ in scope, hoisting, and reassignment when declaring variables in JavaScript.
Related Reading
Related Study Notes in Programming
Browse all study notesApache Spark Study Notes
Programming · 30 topics
ProgrammingApache Flink Study Notes
Programming · 30 topics
ProgrammingHadoop Study Notes
Programming · 30 topics
ProgrammingSnowflake Study Notes
Programming · 30 topics
ProgrammingApache Airflow Study Notes
Programming · 30 topics
Programmingdbt (Data Build Tool) Study Notes
Programming · 30 topics