All topics
9 / 100
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.

Precedence decides what binds to what when an expression has no parentheses.

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
    2 + 3 * 4        // 14 -- * before +
    a || b && c      // a || (b && c) -- && before ||
    !a === b         // (!a) === b
2
The full table is long and not worth memorising. What is worth knowing is the handful that cause real bugs, and that parentheses cost nothing.
3
Short-circuiting means the right side may never run.
    a && b     // if a is falsy, b is never evaluated; returns a
    a || b     // if a is truthy, b is never evaluated; returns a
    a ?? b     // if a is null/undefined, returns b; otherwise a
4
They return a value, not a boolean. That is what makes them useful:
5
    const name = input || 'Anonymous';
    const port = config.port ?? 3000;
    user && user.profile && user.profile.name;
6
Which is also how guarded calls work.
    isLoggedIn && trackEvent();    // only called when logged in
    options.onDone?.();            // only called when it exists
7
?. is optional chaining — it stops at undefined rather than throwing on a missing property:
?.undefined
8
    user?.profile?.name     // undefined if user or profile is missing
    user.profile.name       // TypeError if profile is missing
9
The precedence trap with ??. Mixing it with && or || without parentheses is a syntax error, deliberately:
??&&||
10
    a || b ?? c      // SyntaxError
    (a || b) ?? c    // fine
11
The language refuses to guess, because the two readings differ and neither is obviously right.
12
The assignment forms.
    a ||= b     // assign if a is falsy
    a &&= b     // assign if a is truthy
    a ??= b     // assign if a is null or undefined
13
    config.retries ??= 3;     // set a default without overwriting 0
14
The practical rule. Rely on precedence for arithmetic, where everyone shares the same intuition. Use parentheses anywhere else — the reader should not have to consult a table to know what the code does.
15
What the interviewer is probing.1. "How does && short-circuit and where is it useful?" Probing: evaluation order. Stalls: "It checks both sides." Moves up: the right side is not evaluated if the left is falsy, which guards expensive calls and property access.
16
2. "What does a && b() return when a is falsy?" Probing: the returned value. Stalls: "false." Moves up: the value of a, not a boolean — these operators return operands, which is what makes them useful for defaults.
17
3. "Why mix ?? with || carefully?" Probing: the syntax rule. Stalls: "They combine fine." Moves up: mixing them without parentheses is a syntax error, deliberately, because the precedence would be ambiguous.
18
4. "What is a common precedence mistake?" Probing: real bugs. Stalls: "None." Moves up: assuming && and || are equal — && binds tighter, so a || b && c is a || (b && c).
Use cases:operatorssyntaxfundamentals