80

¿Cómo funciona este código? Quisiera una explicación detallada si es posible y saber dónde hay documentación al respecto.

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

4
  • Aunque ya tienes varias y excelentes respuestas olvidaron mencionar que deberías evitar el uso de document.write() en producción.
    – Gerardo
    Commented el 7 may. 2017 a las 3:05
  • Porque debo evitar su uso?
    – ESCM
    Commented el 8 may. 2017 a las 12:29
  • 3
    Why is document.write considered a “bad practice”?
    – Gerardo
    Commented el 8 may. 2017 a las 13:13
  • Si document.write es mala práctica, entonces !+[]+!+[] == 2 ya ni te digo.
    – ordago
    Commented el 22 jun. a las 19:39

6 respuestas 6

60

JSFuck es un estilo de programación esotérico y educativo basado en las partes atómicas de JavaScript.

Algunas reglas para recordar:

  • Precediendo con ! convertimos a valor Booleano

    console.log(![])   // return false
    
  • Precediendo con + convertimos a número

    console.log(+[])  // return 0
    
  • Adición [] convertimos a Cadena

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

Por qué muestra el Mensaje son Iguales?

  • !+[] al anteponer el signo más se convierte en número , +[] = 0 la negación (!) de 0 es 1.

Luego al realizar la suma !+[] + !+[] es decir 1+1 = 2

Referencias

8
  • Esta interesante tu respuesta :), por cierto no has leido sobre que la suma + se aplkca de defecha a izquierda jejeje no se donde lo lei, por eso pense que era algo asi []+ o da igual.?
    – Dev 200
    Commented el 29 abr. 2017 a las 1:48
  • Está especificado en mi respuesta de la adición a la izquierda y derecha. a la derecha espera de otro valor para efectuar la suma por lo tanto []+ dará un error de sintaxis , y a la izquierda se convierte a número.
    – Dev. Joel
    Commented el 29 abr. 2017 a las 2:02
  • 3
    ¿Pero por qué [] vale true? Si creo una variable a = 0 y luego hago if (!a) console.log('Hola') se imprime Hola, porque 0 es false... pero +[] devuelve 0 y es true ¿al mismo tiempo? Con razón se llama JSFuck 0_o...
    – toledano
    Commented el 3 may. 2017 a las 17:36
  • ¿No va un poco en contra de todo lo que defiende el código limpio (clean code)?. Se puede entender ese código pero siempre pienso que un código que no se lee fácil de un vistazo rápido no es buena idea :S.
    – mrroot5
    Commented el 4 may. 2017 a las 14:12
  • 2
    @Dev.Joel, si si, entendí su postura. Simplemente era un comentario general. A veces lo que uno piensa no es siempre lo mejor y quería saber la opinión de otros :-).
    – mrroot5
    Commented el 4 may. 2017 a las 17:39
58

Un Array vacio es igual a false

[] == false

el contrario de false es true

!false == true

true es igual a 1, false es igual a 0

true == 1
false == 0

entonces

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>

14
  • 2
    Muchísimas gracias , me podrias decir donde aprender javascript practicamente y de buena forma? porfavor
    – ESCM
    Commented el 28 abr. 2017 a las 23:20
  • 4
    Herramientas para desarrolladores -> Console y trastea con todos los sitios... Commented el 28 abr. 2017 a las 23:25
  • 2
    Leyendo, todo valor en javascript es true, menos null, undefined, number zero y boolean false, que dan false
    – Dev 200
    Commented el 29 abr. 2017 a las 0:38
  • 3
    Con la explicación actual entonces ![]+![] también debería evaluar a 2 pero evalúa a 0, se ha obviado por completo el hecho de que se está usando el operador suma (unary plus) para convertir los arrays vacíos en números (ceros) dando lugar al resultado esperado 2
    – Leon Plata
    Commented el 19 jun. 2017 a las 21:20
  • 2
    Recién acabo de leer la respuesta de @Dev.Joel y de Rubén :P, es la respuesta correcta
    – Leon Plata
    Commented el 19 jun. 2017 a las 21:27
31
+250

Los enlaces incluídos a continuación indicados con 1 corresponden a secciones de ECMAScript® 2016 Language Specification. La intención en primera instancia es proporcionar las referencias específicas al estándar referido, utilizando un enfoque de "jalar" (pull) más que el tradicional de "empujar" (push)

A continuación se listan las referencias correspondientes a cada una de las partes principales de

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

Las cuales son

  • [] expresión para inicializar un objeto literal de tipo matriz, equivalente a new Array().
  • +[] matriz con operador unitario +.
  • !+[] matriz con operador unitario + y operador unitario no lógico.
  • !+[] + !+[] adición de dos !+[] .
  • !+[] + !+[] == 2 comparación abstracta de la adición de dos !+[].

Empecemos

Entonces

  • +[] es una operación unitaria que devuelve cero (0)

  • !0 es una operación unitaria que devuelve verdadero (true)

  • true + true es una operación que, primero convierte cada operando a 1 y luego devuelve su adición la cual es 2

  • 2 == 2 es una comparación de igualdad abstracta que devuelve verdadero (true)

A continuación un pequeño experimento para que el lector compruebe si stack-snippet y su navegador operan conforme a la especificación referida.

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

9
  • 5
    FYI, [] es un array vacio. Nada que ver con el tipo string. Creo que podrias explicar la precedencia de operadores como para cerrar bien la respuesta. Commented el 3 may. 2017 a las 18:17
  • @EmanuelVe en ciertos casos los objetos se convierten a valores primitivos ¿sabes cuál es el valor primitivo de un []?
    – Rubén
    Commented el 3 may. 2017 a las 18:18
  • 2
    es un object. ecma-international.org/ecma-262/7.0/index.html#sec-object-type Commented el 3 may. 2017 a las 18:23
  • 2
    @Victor-Random: He agregado la referencia sobre [].
    – Rubén
    Commented el 22 jun. 2017 a las 15:20
  • 2
    @Rubén lo revisare.... :) ya entiendo que entonces el array no entraria en esa validacion del toprimitive, sino usando el join
    – Dev 200
    Commented el 22 jun. 2017 a las 17:54
18

Para complementar a las respuestas, consideremos la siguiente serie de elementos adicionales documentados en:

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 datos primitivos y complejos:

JavaScript basa sus tipos de datos de ECMAScript, divididos en primitivos y complejos o referenciados:

Datos primitivos:

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

  • String: unicode, ascii y caracteres alfanuméricos.

  • Number: integer, float.

  • Boolean: true y false.

  • Null: null.

  • Undefined: undefined.

Datos complejos:

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

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

2) Valores Booleanos de los datos:

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

Datos primitivos:

var string="Hola soy una string"; devolverá true.

var integer=123; devolverá true.

var trueVariable = true; devolverá true.

var float = 4.98; devolverá true.

Datos complejos:

var arraySinElementos = []; devolverá true.

var arrayConElementos = [0,1,2]; devolverá true.

Excepciones:

Basándonos en la tabla anteriormente citada podremos encontrar los valores Booleanos de los siguientes tipos de datos, al aplicar ToBoolean():

  • Boolean false: devolverá false.

  • Number zero: devolverá false.

  • Undefined: devolverá false.

  • Null: devolverá false.


2) Valor de los operadores lógicos:

Definimos los principales valores lógicos:

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

true == 1;

false == 0;

Operador lógico not (!): aplica la inversa del valor recibido.

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

Su funcionamiento seria el siguiente :

resultado = !expresion;

!expresion == !(ToBoolean(expresion))

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

La expresión sera evaluada con un ToBoolean(), que seguirá la siguiente tabla:

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

Aplicando la inversa tendremos que:

  • En el caso de ser la expresión true este devolverá false.

  • En el caso de ser false devolverá true.

  • Si es distinto de cero (!==0), el resultado es cero.

  • Si es 0 el resultado sera 1.

  • Las cadenas se convierten en números, si es posible.

  • Las cadenas vacías se convierten en true.

  • El valor lógico nulo o not realiza por determinado la acción de false, ya que no se sabe si la condición es verdadera.


3) Operador más unario (+expresion) y operador más de adición (expresión + expresión):

El operador más (+) lo podemos encontrar como operador unario y de adición:

  • Si se considera como adición:

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

  • Si lo consideramos unario tendría la siguiente propiedad y funcionamiento:

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)

Esta función aplicara ToNumber() a la expresión:

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

Si se usa sobre un valor no numérico este aplicara la funcion ToNumber(), en nuestra caso tenemos un array[] que entraria en los datos referenciados o Object.

Es decir que ToNumber() sera aplicada a un object, por lo tanto se establece el uso de ToPrimitive().

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

4) Función ToPrimitive():

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

Esta función se encuentra en el apartado de conversión de tipos:

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

Y se usara con el fin de convertir el objeto Object a un valor primitivo para que pueda ser luego evaluado con:

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

Respectivamente.

En este caso al ser un Objeto Object: se aplica:

Type(input)

Siguiendo el siguiente orden de evaluación:

Tabla resumida:

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

Se procede a la conversión:

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

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

En este caso es un string vacio.

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

Cumpliéndose:

Si hint = string.

Aplicar "toString()" y luego "valueOf()"

  • ToString():

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

ToPrimitive(argument, hint String). // Establecido anteriormente

  • valueOf():

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

Aplicando tenemos que:

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

( "" ).valueOf() == ( "" )
  • Por lo tanto:

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

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

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

Ahora usemos nuestro operador logico not (!) para obtener:

( "" ) == false.

5) Seguido tocaria sustituir:

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

Resolviendo:

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

Finalizando:

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

HTML: Somos iguales
4
  • Que bien , me podrías pasar documentación acerca de los elementos considerados true y todo ese ámbito? porfavor.
    – ESCM
    Commented el 29 abr. 2017 a las 1:00
  • @EduardoSebastian aqui developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures
    – Dev 200
    Commented el 29 abr. 2017 a las 1:41
  • @EduardoSebastian Deberías de poner esta como la respuesta correcta, ya que considero que es mucho mejor respuesta que la mía. Commented el 29 abr. 2017 a las 17:24
  • 1
    Victor: el operador == en ciertos casos realiza conversión de los operandos. Para efectos de "comprobación" como las que mencionas en tu respuesta considero que se debería usar === o en su defecto mencionar cómo se debería considerar la conversión realizada por ==.
    – Rubén
    Commented el 10 may. 2017 a las 9:10
5

Veo que esta pregunta ha generado un grupo de respuestas muy valiosas y es este tipo de preguntas y respuestas las que más nutren a nuestra comunidad. Intentaré aportar mi granito de arena a este maravilloso hilo.

Voy a aclarar ciertos aspectos que no están aclarados. Quien lea las respuestas notará que hay algunas que se contradicen. He visto un comentario de @toledano en la respuesta de @Dev.Joel y otra de @Dev.Joel en la respuesta de @JorgeArturoJuarez básicamente preguntándose por qué [] == false es true y por otro lado ![] es false y me parece que es debido a varias de las respuestas que son algo ambiguas, como la respuesta marcada como correcta que mostraba que [] era igual a false.

Lo primero que hay que saber es que toda instancia de un objeto está definida de por sí y por lo tanto es verdadera:

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);
  
}

No se deben confundir las instancias de un objeto con los valores primitivos:

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)
1

no soy experto en javascript pero he hecho algunos analisis de datos en donde he implementado coercion y operadores unarios veamos que es esto:

Que es Coerción:

La coerción es la conversión automática o implicita de valores de un tipo de dato a otro (Ejemplo: de cadena de texto a número). La conversión es similar a la coerción porque ambas convierten valores de un tipo de dato a otro pero con una diferencia clave - la coerción es implícita mientras que la conversión puede ser implícita o explícita.

Que son operadores unarios:

El operador unario más (+) precede a su operando y evalúa a su operando intentando convertirlo en un número, si aún no lo es.

El condicional if (!+[]+!+[] == 2) en JavaScript es un ejemplo de una técnica ingeniosa y confusa para manipular valores usando operadores unarios y coerción de tipos (no lo recomiendo por que es dificil de mantener y darle seguimiento, escalabilidad).

+[]:

  • [] es un array vacío.
  • Usar el operador unario + en un array vacío convierte el array a un número. En este caso, +[] se convierte en 0.

!+[]:

  • +[] es 0.
  • Usar el operador ! en 0 convierte 0 en un valor booleano. !0 es true porque 0 es un valor falsy en JavaScript.

!+[]+!+[]:

  • Ya sabemos que !+[] es true.
  • Otra vez, !+[] es true.
  • Así que, true + true se convierte en 1 + 1 debido a la coerción de tipo (el operador + convierte true a 1).

Comparación con 2:

Entonces, !+[]+!+[] se convierte en 1 + 1, que es 2. Finalmente, 2 == 2 es true.

Ahora veamos unos ejemplos practicos de todo lo anterior:

console.log(+[]);        // 0
console.log(!+[]);       // true
console.log(+[]+!+[]);   // 0 + true
console.log(0 + true);   // 0 + 1
console.log(0 + 1);      // 1

console.log(!+[] + !+[]);  // true + true
console.log(1 + 1);        // 2

if (!+[] + !+[] == 2) {
    console.log("Se cumple la condición");
} else {
    console.log("No se cumple la condición");
}

posible Ambiguedad/Confución:

En este ejemplo podras ver que entra a la dos condicionales:

let a = []; 
console.log(a);

if(a){
  console.log( "true" );
}

if(a == false){
  console.log( "false" );
}

En javascript las evaluaciones de condiciones y comparaciones de igualdad pueden ser un poco confusas debido a la coerción de tipos.

Vemos algunos puntos claves y detalles a tomar en cuenta:

if(a)

  • En JavaScript, un array (aunque esté vacío) es un objeto, y los objetos son considerados truthy. Esto significa que cualquier objeto, incluyendo arrays vacíos, se evaluará como true en un contexto booleano.

if(a == false)
Aquí es donde entra la coerción de tipos:

  • Cuando comparas un objeto (a es un array, que es un tipo de objeto) con un valor primitivo (false), JavaScript intenta convertir el objeto a un valor primitivo antes de hacer la comparación.

  • El array vacío [] se convierte a una string vacío "" cuando se compara con un valor primitivo.

  • Luego, la string vacío "" se convierte a false en la comparación con false.

Así que la comparación a == false se convierte en "" == false, lo cual es true porque:

"" (string vacío) es un valor falsy. false es también un valor falsy.

Comparando dos valores falsy con == resulta en true.

Comparadores de igualdad e identidad

Eviten usar Estas PRACTICAS ... de Programación ...

1
  • Excelente explicación, y estoy de acuerdo con todos, esta característica es nefasta, y debe ser evitada a toda costa. Commented el 23 jun. a las 12:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.