JavaScript's type coercion rules are basically a minefield for anyone who hasn't memorized the ECMAScript spec. If you're prepping for a React or Node.js interview, you'll likely hit these "predict the output" questions because they separate people who just "use" JS from those who actually understand the engine.
4. The
If you're building a complex AI workflow or writing custom LLM agent logic in JS, these coercion rules can cause silent bugs in your data parsing. Always use
The core mental model for the +
operator is simple: it tries to convert both sides to primitives. If either side ends up as a string, it defaults to string concatenation. If not, it attempts numeric addition.
Here is a practical tutorial on the most common traps.
The Coercion Cheat Sheet #
Before diving into the snippets, keep these conversions in mind:
Stringifies to[]
(empty array):""
, converts to number0
.Stringifies to{}
(empty object):"[object Object]"
, converts to numberNaN
.Stringifies tonull
:"null"
, converts to number0
.Stringifies toundefined
:"undefined"
, converts to numberNaN
.
Common Interview Snippets #
1. Array Concatenation
console.log([] + []);
Output:""
(empty string)Why: Both arrays are converted to primitives via.toString()
. Since String([])
is ""
, you get "" + ""
, which is an empty string.### 2. Array vs Object
console.log([] + {});
Output:"[object Object]"
Why:String([])
is ""
and String({})
is "[object Object]"
. Because one operand is a string, JS performs concatenation: "" + "[object Object]"
.### 3. The Parentheses Trap
console.log({} + []);
console.log(({} + []));
Output:"[object Object]"
for both.Why: Insideconsole.log
or parentheses, {}
is explicitly treated as an object literal. Both sides stringify and concatenate.### 4. The eval
/ Bare Block Trap
eval('{} + []');
eval('({} + [])');
Output:0
then "[object Object]"
Why: In the first case, the engine sees{}
as an empty code block, not an object. It ignores the block and evaluates + []
. The unary +
operator converts []
to a number, which is 0
.## Equality Gotchas
One of the most frequent "gotchas" is how JS handles NaN
and null
.
This isNaN === NaN
:false
.NaN
is the only value in JS not equal to itself. To check for it, useNumber.isNaN()
orObject.is()
.Returnstypeof null
:"object"
. This is a legacy bug from the first version of JS that was never fixed to avoid breaking the web.Even though they are "empty," both are truthy.[]
and{}
Truthiness:
If you're building a complex AI workflow or writing custom LLM agent logic in JS, these coercion rules can cause silent bugs in your data parsing. Always use
===
to avoid implicit coercion and Object.is()
when you need to detect NaN
.Next Union-Find: A Deep Dive into Disjoint Set Union →
All Replies （3） #
D
I always use strict equality (===) now to avoid those weird truthy/falsy bugs.
0
M
spent way too many hours debugging
[] == ![]
back in the day. absolute nightmare. 0
Z
Does this still hold up with the newer nullish coalescing operator or is that different?
0