Javascript OR (||) variable assignment explanation
In JavaScript, the OR (||
) operator provides a crisp way to assign default values. It eyes the first truthy value and assigns it to your variable. If a
isn't undefined
, null
, 0
, false
, NaN
, or ""
(all falsy), a || b
hands a
to your variable. If a
doesn't show up for the party, b
steps in.
Example:
Here, userName
is set to 'John' because 'John' is as truthy as a polygraph test. If the first value was as falsy as a politician's promise, like ''
, userName
would be 'Default Name'.
Expanding on OR assignment
The mighty OR operator does more than making two boolean values duke it out; it's also a valuable flow control sherpa leading your code to the most optimal paths. When JavaScript sees a || b
, it reads it as: "If a
is truthy, go with a
and forget b
. b
, you're our fallback."
Swinging beyond JavaScript borders
Not just another fun JavaScript quirk, this approach is an emblem of dynamic type systems. If we send a || b
to a static language country, they'd reject our visa application on mismatching types. But our dynamic dialects, like JavaScript, welcome us with open arms and let us bypass annoying type checks.
The fine print on readability
This approach is as compact as a tiny house, but if it's overstuffed, it becomes a messy maze for others. Especially when nested, or hanging out with other ternary operators or logical pals, it can go from being a minivan to a clown car real fast.
Digging deeper into the OR goldmine
Knowing which expressions ||
evaluates and the order they gate-crash the party is as crucial as knowing your dance steps. Included among the party-goers could be function calls, object properties, or even complex expressions vying for attention.
Real-world OR implementations
Logical OR is just the thing for defining default parameters, loading environment variables with plan-Bs, and choosing how a UI component struts its stuff — all without writing a saga of conditional statements.
Comparing ||
across languages
A comparison of how the OR operator works in different programming languages is a good look into the wildly exciting world of short-circuit evaluation in various syntax and semantic landscapes.
Pro tips and trips
- Always rely on constants or immutable variables as the fallback to prevent unwanted surprises.
- Try to keep
||
away from control flow operations. Easy reading leads to easy debugging. - Go the declarative route when you can with ES6 defaults for more predictability.
Common hurdles
- Misunderstanding which values are truthy and falsy can spin your logic around. For instance, empty arrays and objects (
[]
and{}
) are so truthy, they'd never lie to you. - Writing lengthy logical chains can clutter your code faster than stacking dirty dishes in a clean kitchen.
- If you're from a strictly typed language country, remember, the returned value in JavaScript needn't always be a boolean. It's a wild world out here!
Advanced moves with short-circuiting
Short-circuiting can perform destructuring assignments and skirt around object properties conditionally. In ES2020, you can team it up with the nullish coalescing operator (??
) for default assignments that only ignore null
and undefined
, and not all falsy values.
Was this article helpful?