Historical Context & Motivation
Every programming language needs a way to do math and compare values. Long before JavaScript existed, mathematicians and early computer scientists developed the operator concept — a symbol that tells the computer to perform a specific action on one or more values. When Brendan Eich created JavaScript in 1995, he borrowed operator syntax from the C programming language, which itself drew from mathematical notation developed over centuries.
Understanding this history helps explain why JavaScript uses symbols like === instead of a simple equals sign, and why % means "remainder" rather than "percent." These design choices trace back through decades of programming language evolution.
+ and - and comparison operators like .EQ. and .GT. in compiled programs.== for equality and % for the modulus (remainder) operation.=== (strict equality) to handle JavaScript's unique type coercion behavior.** as a shorthand for raising a number to a power, replacing the need to call Math.pow().Today, arithmetic and comparison operators are the fundamental building blocks of every JavaScript program. Whether you're calculating a score in a game, validating a user's age, or sorting a list of items, you'll rely on these operators constantly. The question this lesson addresses is straightforward: how do you use operators to perform calculations and make comparisons in JavaScript?
Core Principles & Definitions
Before diving into each operator, you need to understand a few foundational ideas. An operator is a special symbol that performs an operation on values (called operands). In the expression 5 + 3, the + is the operator and 5 and 3 are the operands. The entire thing is called an expression, and it evaluates (resolves) to a single value — in this case, 8.
Arithmetic Operators
+ (add), - (subtract), * (multiply), / (divide), % (remainder), ** (exponent). These always return a number.Comparison Operators
true or false. Includes >, <, >=, <=, ==, ===, !=, and !==.Operator Precedence
Type Coercion
"5" - 2 gives 3 (string becomes number), but "5" + 2 gives "52" (concatenation). This is a common gotcha!Strict vs. Loose Equality
=== (strict) to compare both value and type. Use == (loose) to compare values after type coercion. Best practice is to always use === to avoid unexpected behavior.true or false. Together, they give your programs the ability to compute and decide.Visual Explanation — The Operator Family Tree
The diagram below maps out every arithmetic and comparison operator you'll use in JavaScript. The left branch shows arithmetic operators that produce numeric results, while the right branch shows comparison operators that always return a Boolean (true or false) value.
===) appears above loose equality (==) — that's because strict equality is the recommended default.As you can see in the diagram, the critical distinction is what each family of operators returns. Arithmetic operators produce a numeric result, while comparison operators produce a Boolean result. This matters because you'll use arithmetic operators to calculate values (like a total price) and comparison operators to make decisions (like checking if a user is old enough to register).
How Operators Work Under the Hood
Arithmetic Operators in Detail
JavaScript's arithmetic operators follow the same order of operations you learned in math class. The acronym PEMDAS (Parentheses, Exponents, Multiplication/Division, Addition/Subtraction) applies directly. The modulus operator (%) shares the same precedence level as multiplication and division.
% operator returns the remainder after dividing a by b. For example, 17 % 5 = 17 − 5 × 3 = 17 − 15 = 2.Comparison Operators in Detail
Comparison operators evaluate an expression and always return true or false. The most important distinction is between strict equality (===) and loose equality (==). Strict equality checks both the value and the data type, while loose equality converts types before comparing.
=== operator asks: "Are these the same value AND the same type?" Since 5 is a number and "5" is a string, the answer is false.== operator first converts "5" to the number 5, then compares. Since both are now 5, the result is true. This hidden conversion is called type coercion and is a common source of bugs.=== and !== unless you have a specific reason to use loose equality. This single habit will prevent a huge number of bugs in your code. Professional JavaScript style guides (like Airbnb's) enforce this rule.Operator Reference Table & Type Coercion Flow
| Operator | Name | Example | Result |
|---|---|---|---|
+ | Addition | 10 + 3 | 13 |
- | Subtraction | 10 - 3 | 7 |
* | Multiplication | 10 * 3 | 30 |
/ | Division | 10 / 3 | 3.333... |
% | Remainder (modulus) | 10 % 3 | 1 |
** | Exponentiation | 2 ** 4 | 16 |
=== | Strict equal | 5 === 5 | true |
!== | Strict not equal | 5 !== "5" | true |
> | Greater than | 10 > 3 | true |
<= | Less than or equal | 5 <= 5 | true |
One of the trickiest aspects of JavaScript operators is how the + operator behaves differently depending on the types of its operands. When both operands are numbers, + performs addition. But when one operand is a string, JavaScript converts the other operand to a string and performs concatenation (joining) instead. The diagram below illustrates this decision process.
+ operator. If either operand is a string, the result is string concatenation. Otherwise, JavaScript performs numeric addition. Note the amber warning at the bottom: all other arithmetic operators always convert to numbers.prompt('Enter a number:') + 5 when the user types 10 gives "105" (string concatenation), not 15. Use Number() or parseInt() to convert first.Worked Example — Building a Grade Calculator
Let's walk through a realistic example that uses both arithmetic and comparison operators. Imagine you're writing a program that calculates a student's final grade percentage and determines their letter grade.
let test1 = 85;
let test2 = 92;
let test3 = 78;let average = (test1 + test2 + test3) / 3;
Without parentheses, test1 + test2 + test3 / 3 would divide only test3 by 3 first (operator precedence), giving the wrong answer.average = (85 + 92 + 78) / 3 = 255 / 3 = 85let allAbove75 = (test1 > 75) && (test2 > 75) && (test3 > 75);
Each comparison (test1 > 75) returns true or false. All three are true here, so allAbove75 is true.allAbove75 = true → Student earns +2 bonus → average = 85 + 2 = 87let grade;
if (average >= 90) { grade = "A"; }
else if (average >= 80) { grade = "B"; }
else if (average >= 70) { grade = "C"; }
else { grade = "F"; }
Since 87 >= 90 is false, JavaScript moves to the next check: 87 >= 80 is true.console.log(grade === "B"); // true
console.log(average === 87); // true
console.log(typeof average === "number"); // true
Using === confirms both the value and the type match exactly."B" and the average is a number with value 87.Strengths, Limitations & Common Pitfalls
JavaScript's operators are powerful but come with some quirks that can catch you off guard. The table below compares key strengths and limitations you should be aware of as you write code.
| Feature | Strength | Limitation / Pitfall |
|---|---|---|
| Arithmetic operators | Familiar math symbols make code readable. The ** operator is cleaner than Math.pow(). | Floating-point precision issues: 0.1 + 0.2 gives 0.30000000000000004, not 0.3. |
| The + operator | Works for both addition and string joining, which is convenient for building messages. | Dual behavior (add vs. concatenate) is the #1 source of JavaScript bugs for beginners. |
| Strict equality (===) | No hidden type conversion — what you see is what you get. Predictable and safe. | Cannot compare object contents. [1] === [1] is false because they're different objects in memory. |
| Loose equality (==) | Occasionally useful for checking null == undefined (both return true). | Unpredictable coercion rules: "" == 0 is true, and "0" == false is also true. |
| Modulus operator (%) | Perfect for checking even/odd numbers, cycling through arrays, and clock arithmetic. | Behaves unexpectedly with negative numbers: -7 % 3 gives -1, not 2. |
"5" + 3, JavaScript "helps" by treating everything as a string. Using strict equality (===) is like telling JavaScript: "Don't translate — compare exactly what I gave you." This is almost always what you want.Connection to Advanced Concepts
The arithmetic and comparison operators you've learned here are stepping stones to more advanced JavaScript concepts. As you grow as a developer, you'll encounter operators and patterns that build directly on this foundation.
| What You Know Now | What Comes Next | How They Connect |
|---|---|---|
+, -, *, / | Assignment operators: +=, -=, *=, /= | Shorthand for x = x + 5 → x += 5. Combines arithmetic with variable assignment. |
Comparison operators (>, <, ===) | Logical operators: &&, ||, ! | Combine multiple comparisons: age >= 13 && age <= 19 checks if someone is a teenager. |
| Expressions returning values | Ternary operator: condition ? a : b | A compact way to choose between two values based on a comparison, like a mini if-else. |
| Type coercion awareness | TypeScript and type checking | TypeScript adds static types to JavaScript, catching coercion bugs before your code even runs. |
% (modulus) | Bitwise operators: &, |, ^, ~, <<, >> | Operate on the binary (bit-level) representation of numbers. Used in graphics, cryptography, and performance optimization. |
As you continue learning JavaScript, you'll find that operators combine like building blocks. A conditional statement like if (score >= 60 && attempts < 3) mixes comparison operators with logical operators, which in turn rely on your understanding of what >= and < return. Every advanced pattern traces back to the fundamentals covered in this lesson.
Practice Problems
Test your understanding with these five problems. They escalate in difficulty from simple recall to critical thinking about operator behavior.
== and === in JavaScript? Why do most style guides recommend ===?15 % 4
(b) 2 ** 5
(c) 10 + 3 * 2
(d) (10 + 3) * 2"10" + 5
(b) "10" - 5
(c) true + 1
(d) null == undefinedprice = 49.99 and discount = 0.15. What does each expression evaluate to?let isLeap = (year % 4 == 0);
Hint: A year is a leap year if it is divisible by 4, EXCEPT century years (divisible by 100) must also be divisible by 400.Lesson Summary
JavaScript provides two families of operators that form the backbone of every program. Arithmetic operators (+, -, *, /, %, **) perform calculations and always return a number. Comparison operators (===, !==, >, <, >=, <=) evaluate relationships between values and always return a Boolean (true or false). JavaScript follows standard operator precedence (PEMDAS), and parentheses can override the default order.
The most important best practice is to always use strict equality (===) instead of loose equality (==) to avoid unexpected type coercion. Watch out for the + operator's dual behavior — it adds numbers but concatenates strings. The modulus operator (%) is especially useful for checking even/odd numbers and cyclic patterns. Master these operators, and you'll have the foundation for every conditional statement, loop, and function you'll ever write in JavaScript.