JavaScript: JavaScript Operators

Last updated: 2026-10-13

Operators are symbols that tell JavaScript what operation to perform. You use + for addition every day, but JS operators go far beyond arithmetic — assignment, comparison, and logical evaluation all rely on them. This lesson covers the most commonly used operators in one go.

Related Math Methods：Math.pow() if...else

1. Arithmetic Operators

The remainder operator % is especially useful — checking odd/even, wrapping around in loops, and more. ** is the exponentiation operator added in ES2016, equivalent to Math.pow() but more concise.

The difference between prefix and postfix ++ / --: prefix changes first then returns, postfix returns first then changes. Don't chain multiple ++ on the same line — the code becomes an unreadable riddle.

▶ Example: Arithmetic Operators Basics

2. Assignment Operators

= is assignment, not "equals" in the mathematical sense. This is one of the most common pitfalls for beginners — if (x = 5) won't throw an error; it assigns 5 to x and returns 5 (truthy), so the condition is always true.

Compound assignment is shorthand:

▶ Example: Assignment Operators

3. Comparison Operators

⚠️ The == vs === trap: This is the most classic JavaScript pitfall, bar none. == silently performs type coercion — "5" == 5 is true! Meanwhile === requires both type and value to match — "5" === 5 is false. Always use === unless you specifically need type coercion. Likewise, use !== instead of !=.

▶ Example: The == vs === Trap

See that? 0 == false and "" == false are both true — completely counterintuitive. It's like comparing apples and oranges: == says "both are fruit, close enough"; === says "they're not the same, period." Stick with === and you'll avoid half your bugs.

4. Logical Operators

&& and || have a useful feature called short-circuit evaluation: && stops at the first falsy value, || stops at the first truthy value — the rest is never evaluated. This is commonly used for concise conditional assignments:

<script>
var name = userInput || 'Anonymous';
</script>

▶ Example: Logical Operators and Short-Circuit Evaluation

5. The + Operator with Strings

When + encounters a string, it becomes a concatenation operator: as long as one side is a string, the other side is converted to a string and they're joined together.

<script>
"Hello" + " " + "World"   // "Hello World"
"Number: " + 42            // "Number: 42"
3 + 4 + "px"              // "7px" (3+4=7 first, then concatenated)
"px" + 3 + 4              // "px34" (left to right: "px"+3="px3", then +4)
</script>

That "px" + 3 + 4 giving "px34" instead of "px7" is a classic interview trap — + evaluates left to right, and once the left side is a string, everything after it becomes concatenation.

6. Ternary Operator Overview

The ternary operator is shorthand for if...else, with the syntax: condition ? value1 : value2.

<script>
var status = age >= 18 ? 'Adult' : 'Minor';
</script>

If the condition is truthy, it returns value1; otherwise value2. Simple conditions work elegantly with the ternary operator, but don't nest them — a ? b ? c : d : e is a recipe for confusion. Detailed usage is covered in Lesson 10.

7. Operator Precedence

JavaScript determines evaluation order based on precedence, following the same rules you learned in math class: multiplication and division before addition and subtraction, parentheses first.

<script>
2 + 3 * 4     // 14, not 20
(2 + 3) * 4   // 20
</script>

Common precedence from highest to lowest: () → ! → ** → * / % → + - → > < >= <= → == === != !== → && → || → ?: → =.

When in doubt, add parentheses. Parentheses are free, but bugs are expensive.

Related Math Methods：Math.pow() if...else

❓ FAQ

📖 Summary

• Arithmetic operators handle numeric calculations; % (remainder) and ** (exponentiation) are commonly used in practice
• Compound assignment operators (+=, -=, etc.) make code more concise
• Always prefer === and !== for comparisons to avoid bugs from =='s implicit type coercion
• Logical operators && and || support short-circuit evaluation, useful for default value assignment
• + becomes a concatenation operator when it encounters a string — watch out for the left-to-right evaluation order
• When in doubt about precedence, add parentheses — readability matters far more than saving a few characters

📝 Exercises

1. Write a program that takes a three-digit number (e.g., 371) and extracts its hundreds, tens, and ones digits using % and /, then prints them.
2. Without using if...else, write a single line using the ternary operator to determine whether a year variable year is a leap year, and assign the result to isLeap (hint: divisible by 4 and not by 100, or divisible by 400).
3. Predict the results of the following expressions, then verify in the browser console: [] == false, [] == ![], null == 0. Explain why — if you can't, it means you need to review the implicit coercion rules of ==, and then firmly embrace ===.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us