We Keep Coding

What is happening in this loose equality comparison of 2 empty arrays

I am struggling with understanding how this snippet works on a basic level
if([] == ![]){
console.log("this evaluates to true");
}
Please help me understand where I got it wrong. My thinking:
First there is operator precedence so ! evaluates before ==.
Next ToPrimitive is called and [] converts to empty string.
! operator notices that it needs to convert "" into boolean so it takes that value and makes it into false then negates into true.
== prefers to compare numbers so in my thinking true makes 1 and [] is converted into "" and then 0
Why does it work then? Where did I get it wrong?

Why does it work then?
TLDR:
[] == ![]
//toBoolean [1]
[] == !true
[] == false
//loose equality round one [2]
//toPrimitive([]); toNumber(false) [3]
"" == 0
//loose equality round two
//toNumber("") [4]
0 === 0
true
Some explanations:
1)
First there is operator precedence so ! evaluates before ==
Negating something calls the internal toBoolean method onto that "something" first. In this case this is an Object (as Arrays are Objects) and for that it always returns true which is then negated.
2)
Now it's up to loose equalities special behaviour ( see Taurus answer for more info) :
If A is an Object ( Arrays are Objects ) and B is a Boolean it will do:
ToPrimitive(A) == ToNumber(B)
3)
toPrimitive([])
ToPrimitive(A) attempts to convert its Object argument to a primitive value, by attempting to invoke varying sequences of A.toString and A.valueOf methods on A.
Converting an Array to its primitive is done by calling toString ( as they don't have a valueOf method) which is basically join(",").
toNumber(false)
The result is 1 if the argument is true. The result is +0 if the argument is false. Reference
So false is converted to +0
4)
toNumber("")
A StringNumericLiteral that is empty or contains only white space is converted to +0.
So finally "" is converted to +0
Where did I get it wrong?
At step 1. Negating something does not call toPrimitive but toBoolean ...

The accepted answer is not correct (it is now, though), see this example:
if([5] == true) {
console.log("hello");
}
If everything is indeed processed as the accepted answer states, then [5] == true should have evaluated to true as the array [5] will be converted to its string counterpart ("5"), and the string "5" is truthy (Boolean("5") === true is true), so true == true must be true.
But this is clearly not the case because the conditional does not evaluate to true.
So, what's actually happening is:
1. ![] will convert its operand to a boolean and then flip that boolean value, every object is truthy, so ![] is going to evaluate to false.
At this point, the comparison becomes [] == false
2. What gets into play then is these 2 rules, clearly stated in #6 in the specs for the Abstract Equality Comparison algorithm:
If Type(x) is boolean, return the result of the comparison ToNumber(x) == y.
If Type(y) is boolean, return the result of the comparison x == ToNumber(y)
At this point, the comparison becomes [] == 0.
3. Then, it is this rule:
If Type(x) is Object and Type(y) is either String or Number,
return the result of the comparison ToPrimitive(x) == y.
As #Jonas_W stated, an array's ToPrimitive will call its toString, which will return a comma-separated list of its contents (I am oversimplifying).
At this point, the comparison becomes "" == 0.
4. And finally (well, almost), this rule:
If Type(x) is String and Type(y) is Number,
return the result of the comparison ToNumber(x) == y.
An empty string converted to a number is 0 (Number("") == 0 is true).
At this point, the comparison becomes 0 == 0.
5. At last, this rule will apply:
If Type(x) is the same as Type(y), then
.........
If Type(x) is Number, then
.........
If x is the same Number value as y, return true.
And, this is why the comparison evaluates to true. You can also apply these rules to my first example to see why it doesn't evaluate to true.
All the rules I quoted above are clearly stated here in the specs.

First, realize that you are comparing two different types of values.
When you use ![] it results in false. You have code (at core it results in this):
if([] == false)
Now the second part: since both values are of different type and you are using "==", javascript converts both value type into string (to make sure that they have same type). It starts from left.
On the left we have []. So javascript applies the toString function on [], which results in false. Try console.log([].toString())
You should get false on the left as string value. On the right we have boolean value false, and javascript does the same thing with it.
It use the toString function on false as well, which results in string value false.
Try console.log(false.toString())
This involves two core concepts: how "==" works and associativity of "==" operator - whether it starts from left or right.
Associativity refers to what operator function gets called in: left-to-right or right-to-left.
Operators like == or ! or + are functions that use prefix notation!
The above if statement will result in false if you use "===".
I hope that helps.

Javascript: "truthy" values for non-empty strings

It's said that non-empty string in Javascript is considered "truthy". It explains why the code:
if ("0") {
console.log("OK")
}
prints "OK".
However, why does the code:
true == "0"
returns false?

Equal (==)
If the two operands are not of the same type, JavaScript converts the
operands then applies strict comparison. If either operand is a number
or a boolean, the operands are converted to numbers if possible; else
if either operand is a string, the other operand is converted to a
string if possible. If both operands are objects, then JavaScript
compares internal references which are equal when operands refer to
the same object in memory.
(From Comparison Operators in Mozilla Developer Network)
So, while comparing true == '0', it first converts both into numbers.
Number(true) == Number('0') which evaluates to 1 == 0.
Hence the answer is false.

As others pointed out, I believe if ("0") will check if the value is null/empty/undefined, similarly as to if I were to write if("some text"), which would also return true. Here 0 is not used as true or false, but rather as a string.
On the other hand, if(true == "0") will return false, as the values do not match up.
Here is a snippet showing an if statement returning true on a variable that's not undefined.
var someVar = "0";
if("") {
console.log("this doesn't execute");
}
if(someVar) {
console.log("this returns true");
}

Why if([]) is validated while [] == false in javascript?

if([] == false) alert('empty array is false');
alert(+[]) // alert 0
if([]) alert('empty array is true');
They both will run the alert
Demo

Both current answers here are correct, but I'd like to add a more detalied explanation based on the language specification. The reason for the apparently contradictory outcomes is that if statements and equality comparisons are evaluated differently.
In the case of an if(expression) statement, the expression is evaluated and then converted to the boolean type (§ 12.5). Arrays are Objects, and when an Object is converted to Boolean, the result is always true (§ 9.2).
Equality comparisons with == follow a different set of rules, detailed on § 11.9.3. The comparison may require multiple type conversions, until both operands are the same type. The order of the operands is also important. According to that algorithm, we can see that the comparison [] == false is actually a four-step operation:
There is a Boolean involved, so it's converted to a Number first (step 7 of the algorithm). So it becomes:
[] == 0
Then the array is converted to its primitive value (see § 9.1 and § 8.12.8), and becomes an empty string (step 9). So:
"" == 0
When comparing a String to a Number, the String is converted to Number first (step 5, following the rules described on § 9.3.1):
0 == 0
Now that we have two Numbers, the comparison evaluates to true according to step 1.c.iii.

It's because of type coercion of the == (equality) operator.
An empty array is considered truthy (just like an empty object), thus the second alert is called.
However, if you use ([] == false), your array is coerced to its string representation* which is "" which then is considered as a falsy value, which makes the condition true thus triggering the first alert too.
If you want to avoid type coercion, you have to use the === (identity) operator which is the preferred and by the famous Douglas Crockford promoted way to compare in javascript.
You can read more on that matter in this exhaustive answer.
*(Object.prototype.toString is called on it)
EDIT:
fun with JS-comparison:
NaN == false // false
NaN == true // also false
NaN == NaN // false
if(NaN) // false
if(!NaN) // true
0 == '0' // true
'' == 0 // true
'' == '0' // false !
This shows you the real "power" of Comparison with == due to the strange rules mentioned in bfavarettos answer.

There is a difference between evaluating a value as a boolean, and comparing it to true or false.
Whe using the == operator, the values are converted so that the types correspond. The [] value converted to the empty string "", and converting that in turn to a boolean gives false, so [] == false becomes true.
Evaluating [] as a boolean value will return true, because it is not a 'falsy' value, i.e. 0, false, null, "", NaN or undefined.

conditional operator in JavaScript when true/false can't be evaluated

In the below code :
console.log( (false || "test") ? "first" : "second") );
The o/p of first part is test ( false || "test") , so how is my final o/p first ? What happens in general when the conditional operator can't evaluate an expression as True or False ?

|| is OR. So when a boolean is needed, (false || "test") is equivalent to "test". And "test" is coerced as true when a boolean is needed (0 wouldn't, "" wouldn't, but "0" would be seen as true).
As seen in the ECMAScript specification, an if converts the condition to a boolean using toBoolean :

Every value in javascript, regardless of its type, can be coerced to a boolean value.
Values that coerce to false are called "falsey", and values that coerce to true are called "truthy".
Here's a fiddle demonstrating this coercion.
In this case:
(false || "test") ? "first" : "second")
(false || "test") is logically equivalent to ("test") since false || X is equivalent to X (this is called a disjunctive syllogism, if you're interested in logics).
Any non-empty string in javascript (including the string 'false', have fun with that bug) coerces to true, so the tertiary condition evaluates to true and logs 'first'.

"What happens in general when the conditional operator can't evaluate an expression as True or False ?"
Every expression in JavaScript can be evaluated as true or false because every type is coercible to a boolean.
In your code, the "test" operand will be evaluated effectively as Boolean("test"), which is true.
The values that coerce to false, are:
false (obviously)
NaN
"" (an empty string)
0
null
undefined
Everything else is considered true.

The || operator returns the left hand side if the left hand side is true, otherwise it returns the right hand side.
Thus (false || "test") is "test".
"test" is a true value, so you get:
"test" ? "first" : "second"
The ternary operator returns the value before the : if the value before the ? is a true value (which is is).
What happens in general when the conditional operator can't evaluate an expression as True or False ?
The result of any expression can be evaluated as being a true or false value, so that will never happen.

Because Javascript implicitly casts test to true. While converting strings to boolean, Javascript converts non-empty strings to true, and empty strings to false.
So, since the first operand of the || operator is false, false || "test" expression will return the second argument, which by then will be converted to true. So you will get first as your output.

Conflicting boolean values of an empty JavaScript array

Can anyone explain why the following two statements both evaluate as true?
[] == false
and
!![]
This question is purely out of curiosity of why this happens and not about how to best test if an array is empty.

The first one:
[] == false
The == operator does type conversion to its operands, in this case the both sides are converted to Number, the steps taken on the Abstract Equality Comparison Algorithm would be:
object == boolean
object == number
string == number
number == number
In code:
[] == false; // convert false to Number
[] == 0; // convert [] to Primitive (toString/valueOf)
"" == 0; // convert "" to Number
0 == 0; // end
The second comparison, [] is converted to primitive, their valueOf and toString methods are executed, but since valueOf on Array objects, returns the object itself (is inherited from Object.prototype), then the toString method is used.
At the end as you see, both operands are converted to Number, and both yield zero, for example:
Number([]) == 0;
Number(false) == 0;
And empty array produces zero when converted to Number because its string representation is an empty string:
[].toString(); // ""
And an empty string converted to Number, yields zero:
+""; // 0
Now, the double negation (!![]) produces true because all object instances are truthy:
![]; // false, [] is truthy
!![]; // true, negation
The only values that are falsey are:
null
undefined
0
NaN
"" (an empty string)
false
Anything else will produce true when converted to Boolean.
See also:
JavaScript Coercion Tool

[] == false
In this case, the type of the left-hand side is object, the type of the right-hand side is boolean. When object is compared to (== The Abstract Equality Comparison) boolean, Javascript first converts the boolean to a number, yielding 0. Then it converts the object to a "primitive", yielding the empty string "". Next it compares the empty string to 0. The empty string is converted to a number, yielding 0, which is numerically equal to the 0 on the right-hand side, so the result of the entire expression is true.
Ref:
http://es5.github.com/#x11.9.3
11.9.3 The Abstract Equality Comparison Algorithm
!![]
In this case Javascript converts the object to the boolean true, then inverts it, resulting in false.