Why does [] == ![] return true in JavaScript?
![] is false because an array is truthy. Then [] == false converts both sides to numbers: [] becomes "" then 0, and false becomes 0, so 0 == 0 is true.
Explain it simply
This looks impossible: how can something equal its own opposite? Take it in two steps.
Step 1. ![] is evaluated first. Every object is truthy, including an empty array, so ![] is false. The line is now [] == false.
Step 2. Loose equality (==) between an object and a boolean follows a fixed path: the boolean becomes a number (false is 0), the object becomes a primitive ([] becomes ""), and the string "" becomes the number 0. Now it is 0 == 0, which is true.
The array was never compared to its own opposite. It was compared to false, and that comparison happens to land on zero both times.
Example
console.log([] == ![]); // Output: true
console.log([] == false); // Output: true
console.log(Boolean([])); // Output: true
console.log([] === ![]); // Output: false
console.log([] == []); // Output: falseThe last line is false because two different array objects are two different references. === also avoids all the coercion above.
What to say in the interview
"![] is false since arrays are truthy. Then [] == false: the boolean converts to 0, the array converts to the empty string and then to 0, so it is 0 == 0. This is why I use === and treat == between different types as a bug waiting to happen."
Common mistakes
- Thinking [] is falsy. It is truthy, which is why if ([]) runs.
- Believing the array was compared to its negation. Only the already-negated false is compared.