JavaScript operators act on values to form expressions. In const total = price * quantity + shipping;, multiplication happens before addition, so the expression means (price * quantity) + shipping. Parentheses can change that grouping—and make your intent easier to see.
What are JavaScript operators?
Operators are symbols or keywords that perform an operation on one or more values. The values they act on are operands, and the resulting combination is an expression. For example, in price * quantity, * is the operator and price and quantity are its operands.
As an Amazon Associate I earn from qualifying purchases.
Operators appear in several families. This overview covers common examples rather than every operator in the language.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →| Family | Examples | Typical purpose |
|---|---|---|
| Arithmetic | + - * / % ** |
Calculate sums, differences, products, quotients, remainders, or powers. |
| Assignment | = += and logical assignment operators |
Assign a value to a variable, sometimes combining assignment with another operation. |
| Comparison | === !== < >= |
Compare values and produce a Boolean result. |
| Logical | && || ! |
Combine conditions, select an operand based on truthiness, or negate a value. |
| Nullish coalescing | ?? |
Use a fallback only when the left operand is null or undefined. |
| Conditional | ? : |
Select one of two expressions based on a condition. |
| Optional chaining | ?. |
Access a property or call a method only when the base value is not nullish. |
| Bitwise | & | ^ and related operators |
Operate on numbers as binary representations; useful in specialized tasks, but not needed in every application. |
How do precedence and parentheses affect an expression?
Precedence determines which operator binds more tightly when different operators appear together. In 3 + 10 * 2, multiplication has higher precedence than addition, so the result is 23. Written as (3 + 10) * 2, the parentheses make addition happen first and the result is 26.
#1 Best Overall
In the total example, price * quantity + shipping multiplies the price and quantity before adding shipping. Writing (price * quantity) + shipping makes the grouping explicit, even though the parentheses do not change the result.
Associativity determines how operators of the same precedence group when there are no parentheses. Assignment is right-associative: a = b = 5 groups as a = (b = 5). First b receives 5; that assignment expression evaluates to 5, which is then assigned to a.
Rank #2
For exact precedence across JavaScript operators, consult MDN’s operator precedence reference. In everyday code, prefer parentheses when they make the intended grouping clearer than relying on a reader to recall the full precedence table.
What is the difference between === and ==?
=== compares without the type coercion associated with loose equality. For example, 5 === "5" is false because one operand is a number and the other is a string. By contrast, 5 == "5" is true: loose equality converts values in this comparison before checking them.
Use === and !== as the usual choices in beginner examples and ordinary application code; they make the type distinction visible. == and != are available, but use them deliberately when their coercion behavior is intended and understood.
Do && and || return true or false?
Not necessarily. Logical AND and OR short-circuit: they can skip evaluating the right operand, and their result can be one of the operands rather than a Boolean.
Rank #4
Logical AND
&& evaluates left to right. If its left operand is falsy, it returns that operand without evaluating the right side. Otherwise, it evaluates and returns the right operand. For example, "ready" && 7 evaluates to 7, while 0 && expensiveCheck() evaluates to 0 without calling expensiveCheck().
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsLogical OR
|| also evaluates left to right. If its left operand is truthy, it returns that operand without evaluating the right side; otherwise it evaluates and returns the right operand. Thus "saved" || "new" evaluates to "saved", while "" || "new" evaluates to "new".
Guarding property access
A legacy-style guard such as user && user.name avoids reading name if user is falsy. When the intended nullish case should yield undefined, optional chaining is a clearer modern form: user?.name. If user is null or undefined, that access returns undefined and the chain short-circuits. Optional chaining can also guard method calls, as in user?.getName(). It is not valid as an assignment target, so user?.name = "Ari" is not allowed.
When should you use ?? instead of ||?
Use ?? when a fallback should apply only if the left value is null or undefined. For instance, const label = suppliedLabel ?? "Untitled"; preserves an empty string, 0, or false.
Use || when any falsy value should trigger the fallback. With const label = suppliedLabel || "Untitled";, an empty string, 0, or false selects "Untitled", as do null and undefined.
Free tools Windows power users keep installed
One-click scans. No signup required.
JavaScript does not allow unparenthesized mixing of ?? with && or ||. For example, a ?? b || c is a syntax error. Add parentheses to state the intended grouping, such as (a ?? b) || c or a ?? (b || c); these expressions can behave differently, so choose the one that matches the logic you want.
For details on nullish coalescing and optional chaining, see MDN’s nullish coalescing reference and optional chaining reference. MDN also provides an overview of JavaScript expressions and operators.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
