Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In const total = price * quantity + shipping;, JavaScript multiplies price by quantity before adding shipping. Operators are the symbols and keywords that perform actions on values and combine them into expressions. Understanding which operation happens first, how comparisons work, and when an operand is skipped makes code easier to read and write.
What are JavaScript operators?
An operator acts on one or more values, called operands, to produce a result or perform an assignment. In price * quantity, the multiplication operator * acts on two operands. In !isReady, the unary operator ! acts on one.
Operators appear in expressions, which are pieces of code that evaluate to a value. For example, price * quantity + shipping is an expression whose result can be assigned to a variable.
Free tools Windows power users keep installed
One-click scans. No signup required.
Common operator families
| Family | Examples | Typical use |
|---|---|---|
| Arithmetic | + - * / % ** |
Calculations, remainder, and exponentiation |
| Assignment | = += |
Assigning a value or updating a variable |
| Comparison | === !== < >= |
Comparing values |
| Logical | && || ! |
Combining or negating conditions |
| Nullish | ?? |
Providing a fallback for null or undefined |
| Conditional | ? : |
Selecting one of two values based on a condition |
| Optional chaining | ?. |
Accessing a property or calling a method when a base may be nullish |
JavaScript also has bitwise operators, which work with numeric values at the level of their binary representation. They are useful in some specialized tasks, but many everyday application examples do not require them. MDN’s expressions and operators guide describes these families and their use.
#1 Best Overall
How does operator precedence work?
Precedence determines which operator binds more tightly when an expression contains different operators. Multiplication has higher precedence than addition, so JavaScript evaluates 3 + 10 * 2 as 3 + 20, producing 23. Parentheses can change the grouping: (3 + 10) * 2 evaluates to 26.
The same rule explains the opening example: price * quantity + shipping calculates the product first, then adds shipping. If the intended calculation differs, use parentheses to show it clearly—for example, price * (quantity + shipping).
Precedence is useful when reading code, but it is not a reason to omit parentheses that make intent easier to recognize. MDN maintains the detailed JavaScript operator precedence reference.
Rank #2
What is associativity?
When operators have the same precedence, associativity determines how JavaScript groups them. Assignment is right-associative, so a = b = 5 groups as a = (b = 5). JavaScript assigns 5 to b, then assigns the resulting value to a.
Precedence answers which of two different levels goes first; associativity answers how operators at the same level group. Parentheses make either grouping explicit when the default is not immediately clear.
What is the difference between == and ===?
=== compares both value and type without the operand type coercion associated with loose equality. Thus 5 === "5" is false: one operand is a number and the other is a string. By contrast, 5 == "5" is true because loose equality coerces the operands for comparison.
For ordinary application code, use === and !== by default. They make type differences visible instead of relying on coercion rules. Use == or != deliberately when coercion is intended and the behavior is understood.
Recommended Free Tools
Do && and || return true or false?
Not necessarily. Logical AND (&&) and OR (||) can return one of their operand values. They also short-circuit: JavaScript may skip evaluating the right operand once the left operand determines the result.
"ready" && 7evaluates to7, because the truthy left operand means JavaScript evaluates and returns the right operand."" || "Guest"evaluates to"Guest", because the empty string is falsy, so JavaScript evaluates and returns the right operand.
This behavior can be useful for concise expressions, but remember that the result may be a value such as a string or number, not a Boolean. The precedence reference also explains short-circuit evaluation.
Rank #4
Guarding a property access
In older code, user && user.name uses short-circuiting to avoid reading name when user is falsy. When the intended behavior is to return undefined if the base is nullish, optional chaining expresses that directly: user?.name.
Optional chaining stops the property-access chain when its base is null or undefined, returning undefined. It also supports optional method calls, as in user.getName?.(). It cannot be used as an assignment target, so an expression such as user?.name = "Ava" is invalid. See MDN’s optional chaining reference.
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 problemsWhen should you use ?? instead of ||?
Use nullish coalescing (??) when a fallback should apply only if the value on the left is null or undefined:
const label = suppliedLabel ?? "Untitled";
If suppliedLabel is an empty string, 0, or false, this expression keeps that value. The logical OR version, suppliedLabel || "Untitled", uses the fallback for any falsy left operand, including those values.
Choose based on what counts as “missing” in the specific situation: nullish values only, or all falsy values. Do not mix ?? directly with && or ||; JavaScript disallows that syntax unless you use parentheses to make the grouping explicit, such as (a ?? b) || c. MDN explains the operator in its nullish coalescing reference.
How can you read an unfamiliar expression?
- Identify the operands and the operators acting on them.
- Use precedence to determine which operations bind first; check associativity when operators share a precedence level.
- Look at comparison operators:
===and!==avoid loose-equality coercion. - Check whether logical operators short-circuit or whether
??or?.handles a nullish value. - Add parentheses when they make the intended grouping easier to see.
For the language’s normative rules, Ecma International publishes the ECMAScript specification; MDN provides an accessible guide to operators and a detailed precedence reference.
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.
