(! [] + []) [+ []] ... Explique por que isso funciona

alert((![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]);

A saída desse código é: fail. Por quê?

A propósito (![]+[])[+!+[]] == 'false'[1], certo? Mas por quê ![]+[] == "false"e por quê +!+[] == 1?

Como @Mauricio comentou (![]+[])[+[]]é "f" (o primeiro caractere de "false"), (![]+[])[+!+[]])é "a", etc ...

Como funciona?

Vamos examinar o primeiro caractere, 'f':

(![]+[])[+[]]; // 'f'

A primeira parte da expressão - entre parênteses - é composta por ![]+[], o primeiro operando do operador Addition é ![]e produzirá false, porque um objeto de matriz - como qualquer outra instância de Object - é verdadeiro e aplicando o lógico (!) NÃO unário operador, ele produz o valor false, por exemplo.

![]; // false, it was truthy
!{}; // false, it was truthy
!0;  // true, it was falsey
!NaN;  // true, it was falsey

Depois disso, temos o segundo operando da adição, um Array vazio,, []isso é feito apenas para converter o falsevalor para String, pois a representação em string de um array vazio é apenas uma string vazia, equivale a:

false+[]; // "false"
false+''; // "false"

A última parte, o par de colchetes após os parênteses, eles são os acessadores da propriedade e recebem uma expressão, que é formada pelo Operador Unário Plus aplicado novamente a um array vazio.

O que o Operador Unário Plus faz é a conversão de tipo Number, por exemplo:

typeof +"20"; // "number"

Mais uma vez, isso é aplicado a um Array vazio e, como eu disse antes, a representação em String de um Array é uma string vazia e, quando você converte uma string vazia em Número, ela é convertida em zero:

+[]; // 0, because
+[].toString(); // 0, because
+""; // 0

Portanto, podemos "decodificar" a expressão em algumas etapas:

(![]+[])[+[]];
(false+[])[+[]];
(false+'')[+[]];
(false+'')[0];
('false')[0];  // "f"

Observe que o acesso a caracteres usando a notação de colchetes em valores de String não fazia parte do ECMAScript 3rd. Especificação da edição, (é por isso que o charAtmétodo existia).

Porém este tipo de "propriedades de índice" que representam os caracteres de uma string foram padronizados no ECMAScript 5, e mesmo antes da padronização o recurso estava disponível em um bom número de navegadores (até mesmo no IE8 (modo padrão)).