Fundamentalsbeginner
Operator Precedence and Short-Circuit Evaluation
How JavaScript decides the order to evaluate operators, and how && / || can skip evaluating part of an expression entirely.
Operator precedence determines which parts of a compound expression get evaluated first, and short-circuit evaluation describes how logical operators can stop evaluating as soon as the result is already determined. Both come up constantly in real code — and in interviews, usually disguised as a 'what does this print' question.
Short-circuiting is like a bouncer who checks your ID at the door: if you fail the first check, they don't bother inspecting anything else about you — the rest of the evaluation just doesn't happen.
Key Concepts
1
JavaScript operators have a strict precedence table: multiplication and division bind tighter than addition and subtraction, comparison operators bind tighter than logical &&, which itself binds tighter than logical ||. When precedence is ambiguous or the code is dense, parentheses should be used to make the intended order explicit rather than relying on memorized precedence rules, since misjudging precedence is a common source of subtle bugs.
&&||
2
Short-circuiting is a related but distinct behavior specific to &&, ||, and ??. For &&, if the left operand is falsy, the expression immediately evaluates to that falsy value without ever evaluating the right operand. For ||, if the left operand is truthy, evaluation stops there and the right side is never touched. This isn't just an optimization detail — it's routinely used to guard against errors, such as user && user.name avoiding a crash when user is null, or isReady && doSomething() only calling doSomething when isReady is truthy.
&&||??user && user.nameuser
3
The practical risk is that because the right-hand side may never execute, any side effects placed there (function calls, assignments) are conditional, which can be a deliberate pattern or an accidental bug depending on whether the developer intended it. Optional chaining (?.) and nullish coalescing (??) were later additions that formalize some of these guard patterns more safely and explicitly.
?.??