How does the conditional if (!+[]+!+[] == 2) work in JavaScript?

An Arrayempty is equal tofalse

[] == false

the opposite of falseistrue

!false == true

trueis equal to 1, falseis equal to 0

true == 1
false == 0

then

true + true == 2

function probar(){
    console.log([] == false);
    console.log(!false == true);
    console.log(true == 1)
    console.log(false == 0)
    console.log(true + true == 2)
}

<button onClick="probar()">probar</button>

JSFuckis an esoteric and educational programming style based on the atomic parts of JavaScript .

Some rules to remember:

• Preceding with !convert to valueBooleano

  console.log(![])   // return false
  

• Preceding with we + convert to number

  console.log(+[])  // return 0
  

• Addition []convert to String

  console.log([]+[])  // return  ""
  

Why shows the Message are the same?

• !+[]by putting the plus sign before it becomes a number , +[] = 0the negation (!)of 0 is 1.

Then when performing the sum !+[] + !+[]that is1+1 = 2

References

• http://www.jsfuck.com/
• http://patriciopalladino.com/blog/2012/08/09/non-alphanumeric-javascript.html
• http://www.jazcash.com/a-javascript-journey-with-only-six-characters/

The links below indicated with ¹ correspond to sections of the ECMAScript® 2016 Language Specification . The intent in the first instance is to provide the specific references to the referenced standard, using a "pull" approach rather than the traditional "push" approach.

Listed below are the references corresponding to each of the main parts of

!+[]+!+[] == 2

Which are

• []expression to initialize an object literal of type array, equivalent to new Array().
• +[]matrix with unary operator +.
• !+[]matrix with unary operator + and non-logical unary operator.
• !+[] + !+[]addition of two !+[].
• !+[] + !+[] == 2abstract comparison of the addition of two !+[].

Let us begin

• The Array Initializer indicates that it []initializes an array literal with no elements. The length property ( length) of the array is zero. and the primitive value is an empty string. For more details see the answer to What is the primitive value of [] based on ECMAScript 2016 (version 7)? .

• In Unary + operator ¹ it is indicated that it +converts its operand to type number. In the case of + [], the operand is an empty string (testing [].join() === ''in the Chrome console returns true) and converting this to a number converts to 0.

  • See answer What is the primitive value of [] based on ECMAScript 2016 (version 7)?

• In logical operator not ¹ it is indicated that it !converts its operand to boolean type, and that if the boolean value of the operand is false, it returns true and if the boolean value of the operand is true, it returns false.

• In ToBoolean ¹ it is indicated that when the value is zero ( -0or +0), false ( false) is returned.

• In The Addition Operator ( + ) ¹ it is indicated that when the operands are of a type other than a text string, they are converted to a number.

• ToNumber ¹ indicates that when the value is true, one ( ) is returned, and when the value is false, zero ( ) is returned.10

• In Applying the Additive Operators to Numbers ¹ it is indicated that when +it is applied to two numeric operands, it performs the addition of these.

• In Abstract equality comparison ¹ it is indicated that when the two elements on the left and right are equal, it returns true ( true) and otherwise it returns false ( false).

Then

• +[]is a unitary operation that returns zero ( 0)

• !0is a unitary operation that returns true ( true)

• true + trueis an operation that first converts each operand to 1and then returns its addition which is2

• 2 == 2is an abstract equality comparison that returns true ( true)

Here is a little experiment for the reader to check if stack-snippet and their browser operate according to the referenced specification.

document.write(+[]);
document.write('<br/>'); //Separador
document.write(!+[]);
document.write('<br/>'); //Separador
document.write(!+[]+!+[]);

To complement the answers, let us consider the following series of additional elements documented in:

ECMA-262 7ᵗʰ Edition / June 2016 ECMAScript® 2016 Language Specification: https://www.ecma-international.org/ecma-262/7.0/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures .

JavaScript in Plain Language - Tony de Araujo: https://www.amazon.com/dp/B00NQERIEI/ref=rdr_kindle_ext_tmb

JavaScript Objects Functions and Arrays Explained - Tony de Araujo: https://www.amazon.com/JavaScript-Objects-Functions-Arrays-Explained-ebook/dp/B00GDEPBZQ

Nicholas C. Zakas Professional JavaScript for Web Developers. https://www.amazon.es/Professional-JavaScript-Developers-Wrox-Guides/dp/1118026691

1) JavaScript primitive and complex data:

JavaScript bases its data types on ECMAScript, divided into primitive and complex or referenced:

Primitive data:

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-primitive-value

• String : unicode, ascii and alphanumeric characters.

• Number : integer, float.

• Boolean : true and false.

• Null : null.

• Undefined : undefined.

Complex data:

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-terms-and-definitions-object

• Object : Array, Unordered list (Key-value, Map), functions, object.

2) Boolean values ​​of the data:

https://www.ecma-international.org/ecma-262/7.0/index.html#table-10

Primitive data:

var string="Hola soy una string";will return true.

var integer=123;will return true.

var trueVariable = true;will return true.

var float = 4.98;will return true.

Complex data:

var arraySinElementos = [];will return true.

var arrayConElementos = [0,1,2];will return true.

Exceptions :

Based on the aforementioned table we can find the Boolean values ​​of the following data types, by applying ToBoolean():

• Boolean false : will return false.

• Number zero : will return false.

• Undefined : will return false.

• Null : will return false.

2) Value of the logical operators:

We define the main logical values:

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-terms-and-definitions-boolean-value

true == 1;

false == 0;

Logical operator not (!): applies the inverse of the received value.

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-logical-not-operator

Its operation would be as follows:

resultado = !expresion;

!expresion == !(ToBoolean(expresion))

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-logical-not-operator-runtime-semantics-evaluation

The expression will be evaluated with a ToBoolean(), which will follow the following table:

https://www.ecma-international.org/ecma-262/7.0/index.html#table-10

Applying the inverse we will have:

• In the case of being the expression, trueit will return false.

• In the case of being, it will be falsereturned true.

• If it is nonzero ( !==0), the result is zero.

• If it is 0 the result will be 1.

• Strings are converted to numbers, if possible.

• Empty strings are converted to true.

• The logical value null or not performs the action of determined false, since it is not known if the condition is true.

3) Unary plus operator (+ expression) and addition plus operator (expression + expression):

The plus (+) operator can be found as a unary and addition operator :

• If considered as addition:

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-addition-operator-plus

• If we consider it unary it would have the following property and operation:

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-unary-plus-operator-runtime-semantics-evaluation

expresión unaria: +expresión unaria
expresión unaria: ToNumber(expresión unaria)

This function will apply ToNumber()to the expression:

https://www.ecma-international.org/ecma-262/7.0/index.html#table-11

If it is used on a non-numeric value it will apply the function ToNumber(), in our case we have a array[]that would enter the referenced data or Object.

In other words, it ToNumber()will be applied to a object, therefore the use of ToPrimitive().

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-tonumber

4) FunctionToPrimitive() :

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-toprimitive

This function is found in the type conversion section:

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-type-conversion

And it will be used in order to convert the object Objectto a primitive value so that it can be later evaluated with:

`ToString()` y `valueOf()`.
`valueOf()` y `ToString()`.

Respectively.

In this case, being an Object Object: applies:

Type(input)

Following the following order of evaluation:

Summary table:

Si PreferredType | no fue pasado | hint = "default".
Si PreferredType | fue pasado    | hint = "string".
Si PreferredType | fue pasado    | hint = "number".
Luego retornar   | OrdinaryToPrimitive(input, hint).

The conversion proceeds:

Afirmacion: Type(O) es Object. // Se cumple pues es array[] es un Object.

Afirmacion: Type(hint) es String y su valor es "string" ó "number".

In this case it is a string vacio.

https://www.ecma-international.org/ecma-262/7.0/index.html#table-12

Fulfilling:

Si hint = string.

Apply " toString()" and then " valueOf()"

• ToString():

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-tostring

ToPrimitive(argument, hint String). // Previously set

• valueOf():

https://www.ecma-international.org/ecma-262/7.0/index.html#sec-object.prototype.valueof

Applying we have:

ToString( array[] ) == ( "" ) // Paréntesis para mejor entendimiento

( "" ).valueOf() == ( "" )

• Therefore:

  +[] == ToNumber(array[]).

  ToNumber(array[]) == ( "" ).valueOf().

  ( "" ).valueOf == ( "" ).

Now let's use our logical operator not (!) to get:

( "" ) == false.

5) Next it would be time to replace :

if (!+[]+!+[]==2) {
document.write('Somos iguales');
}
else {
document.write('Somos distintos');
}

Solving:

if (!("")+!("")==2) {
document.write('Somos iguales');
}
else {
document.write('Somos distintos');
}

Ending:

if (true+true==2) {
document.write('Somos iguales');
}
else {
document.write('Somos distintos');
}

HTML: Somos iguales

I see that this question has generated a very valuable group of answers and it is these types of questions and answers that feed our community the most. I will try to contribute my grain of sand to this wonderful thread.

I am going to clarify certain aspects that are not clarified. Whoever reads the answers will notice that there are some that contradict each other. I have seen a comment from @toledano in @Dev.Joel's answer and another from @Dev.Joel in @JorgeArturoJuarez's answer basically wondering why [] == falseit is trueand on the other hand it ![]is falseand it seems to me that it is due to several of the answers that are somewhat ambiguous, such as the answer marked as correct showing that it []was equal to false.

The first thing to know is that every instance of an object is self-defined and therefore true:

var a = [];
var b = new String("");
var c = new Boolean(false);

if (a && b && c) {

  console.log("todos son verdaderos");
  console.log(!a, !b, !c);
  
}

Instances of an object should not be confused with primitive values:

var a = "";
var b = false;
var c;

if (a || b || c) {

  console.log("¿hay alguna verdadera?");
  
} else {

  console.log("ninguna es verdaera");
  console.log(!a, !b, !c);
  
}

Sin embargo al usar los operadores de comparación (exceptuando === y !==) y los operandos tener un tipado diferente, JavaScript intenta convertir ambos operandos a un tipo apropiado para realizar la comparación, y generalmente esta conversión es numérica. Es por eso que ocurre lo siguiente sin importar que sean instancias de objetos y sean verdaderas:

var a = [];
var b = new String("");
var c = new Boolean(false);

//---Estas comparaciones son verdaderas
console.log(a == false);
console.log(b == false);
console.log(c == false);

//---Esto se debe a que
console.log(+a, +b, +c, +false);

Teniendo esto en cuenta se podrá entender por qué [] == false da true y ![] da false.

En cuanto a la pregunta principal, ya todo está más que explicado en las anteriores respuestas, aquí lo resumo:

1. Al aplicar el operador unario + a una instancia de Array vacía el resultado es 0 (ya que internamente le aplica la operación abstracta ToNumber).
2. Al aplicar el operador lógico ! a 0 el resultado es true (ya que este operador devuelve false si la expresión puede ser evaluada a true y en caso contrario devuelve true)
3. Al sumar dos valores booleanos con valor true el resultado será 2 (ya que al no tratarse de cadenas de caracteres, en vez de concatenar, el operador intentará convertir los operandos a número antes de sumarlos)