JavaScript array comparison strange behaviour

Question

I'm trying to figure out why JavaScript has this strange behaviour in comparing the same array:

var array = [0];
console.log(array == array); //true
console.log(array == !array); //true?

The first one is easily done, they are referencing the same object, but the second is a really tricky one, and I'm working on understanding the process.

Please note that I'm aware that this is abstract equality comparison and not strict equality comparison, and I know their differences (I know that using === would lead to false result, but I'm trying to figure out the behaviour with ==).

P.s.: this one was taken from wtfjs.com, and I didn't find out the explanation, so I tried to give it myself and thought it could be "useful".

Answer 1

The first equality is simple, it's a comparison between the same object (same reference), so it returns true.

The second one is a bit tricky, so I'll try to explain better below.

TL;DR

For those who are a bit lazy, here is a simple explanation without quoting the spec every step:

[0] == ![0] => we evaluate ![0] first, which yields false(because [0] is a truthy value).

[0] == false => [0] is evaluated to [0].toString() which is "0".

"0" == false => "0" is converted to the number 0; the same is for false, so we obtain:

0 == 0 which is finally true.

Complete explanation

As for the first equality, for the sake of completeness, I quote here the interested part of the spec.

1.f Return true if x and y refer to the same object. Otherwise, return false.

So this returns true, as expected. Now the tricky part:

First of all, we have to evaluate the UnaryExpression on the right:

1. Let expr be the result of evaluating UnaryExpression.
2. Let oldValue be ToBoolean (GetValue(expr) ).
3. If oldValue is true, return false.
4. Return true.

But ToBoolean uses this algorithm, and GetValue should return either an Object or a non-empty String, so the result of the evaluation is true. Returning to our UnaryExpression, we have !true, so the result of the final evaluation is false.

So we're back at our original comparison, now we are comparing an Object against a Boolean.

7.If Type(y) is Boolean, return the result of the comparison x == ToNumber(y).

ToNumber(false) is 0, so now we are comparing Object and Number.

Back to the specs:

9.If Type(x) is Object and Type(y) is either String or Number, return the result of the comparison ToPrimitive(x) == y.

Calling ToPrimitive on our array should return its [[DefaultValue]], which should be, according to this kangax's answer, the result of calling toString on the array itself, so we obtain "0".

So, back to our comparison, it has became an equality between a String and a Number.

5.If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.

Calling ToNumber on our string "0" yields 0, again we are finally at a simple comparison: 0 == 0.

Final spec step:

1.c.iii If x is the same Number value as y, return true.

And here the result explained.

Answer 2

The algorithm for the == operator evaluates the expressions from left to right, so given:

var array = [0];

and evaluating:

array == !array;

then first the left hand expression is evaluated and an array is returned. Then the right hand expression is evaluated: ToBoolean is applied to array and, since it's an object, it returns true and the ! operator reverses that to false.

Then the abstract equailty comparison algorithm is used. Again, the left hand side is evaluated first. Since array is an Object and not a Boolean, String or Number, step 7 is used and the right hand side is converted to a Number and the comparison becomes:

array == 0;

The algorithm is run again and gets to step 9, where array is converted to a primitive (string in this case) and the comparison becomes:

'0' == 0;

The algorithm is run again and gets to step 5 where the left hand side is converted to a Number and the comparison becomes:

0 == 0;

The algorithm is run again and this time the expressions have the same Type (Number) so step 1.iii.c is used to return true.

Please note that through all of this, the left hand side is always evaluated first, though sometimes that results in the right hand side being modified and not the left (e.g. at step 7 of the algorithm).