TL;DR:
El objetivo del código es abusar (y de una forma terrible) del lenguaje para concatenar 17 veces la palabra NaN. NaN es una propiedad del objeto global en Javascript que es devuelta en operaciones o métodos en el lenguaje para indicar que el resultado no es un número (Not-a-Number), por lo que el código también convierte esta expresión a una cadena de texto. Luego concatena (nuevamente, abusando de la notación) el signo de exclamación y la palabra 'Batman!'.
Explicación exacta
A continuación intentaré explicar paso por paso cómo el código suministrado tiene como salida la cadena de texto:
NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN! BaTMaN!
No es necesario explicar que lo importante en la primera porción de código no es console.log()
sino lo que este recibe como argumento, que es el mismo que recibe el método text()
de la segunda porción de código con jQuery.
(a=[]).join(a[1]=+(a[16]='!')+"").concat((a[0]=function(p){return p + a[1][1]})(' B'),'T',a[0]('M'),(a[1][0]+a[16])) //(1)
Toda la porción del código (1) se conoce como una expresión. En Javascript una expresión produce o evalúa a un valor (el resultado de la expresión). Una expresión es una combinación de operadores que juntos contribuyen a la producción del valor que la expresión devuelve. Estos operadores tienen una precedencia -que determina cuál de todos los operadores en una expresión se ejecuta primero) y una asociatividad -que determina el orden de ejecución de los operadores que tienen el mismo nivel de precedencia. Saber lo anterior es necesario puesto que nos permite determinar qué de todo el -extenso- código de la única línea anterior se ejecuta primero.
El objetivo entonces consiste en convertir todo el código anterior en uno equivalente que permita entender qué hace. El código tiene tres partes importantes:
//(A).join(B).concat(C) //(2)
¿Cómo es posible determinar esto? Leyendo, de izquierda a derecha, las tres partes corresponden a tres operadores:
- El operador '( )' (operador de agrupamiento). Se usa para controlar la precedencia de las expresiones a evaluar. Es típico verlo en expresiones aritméticas:
(2+2)*3
para indicar que primero se evalúa el operador +
y luego el operador *
, caso contrario Javascript evalúa primero el operador *
y luego el operador +
ya que el estándar menciona que la multiplicación tiene mayor precedencia que la suma.
- El operador '.' (miembro). Se usa para acceder a una propiedad de un objeto (un valor o una función).
- Las llamadas a las funciones
join()
y concat()
.
Dado que el operador de agrupamiento ( )
es un par de paréntesis que rodea una expresión, lo que está marcado como A en el código anterior es una expresión. De la misma manera, las funciones join()
y concat()
pueden (no es obligatorio) recibir un valor. Para este ejemplo, reciben los valores que son resultado de las expresiones B y C. En resumen tenemos tres expresiones más:
// A: a=[]
// B: a[1]=+(a[16]='!')+""
// C: (a[0]=function(p){return p + a[1][1]})(' B'),'T',a[0]('M'),(a[1][0]+a[16])
La parte NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN!
No es difícil ver que la expresión más compleja es la C. Ignorando por el momento estas tres expresiones, nuestro objetivo consiste en ver cómo se ejecuta la expresión más grande (2). A partir de la tabla de precedencia y asociatividad de la documentación de Javascript, encontramos lo siguiente:
- El operador de agrupación
( )
tiene el nivel más alto de precedencia
- El operador miembro
.
tiene un nivel de precedencia más bajo que el operador de agrupación y asocia de izquierda a derecha (es decir, para una expresión como a.b.c
evalúa (a.b).c
y no a.(b.c)
- Las llamadas a la función tiene un nivel de agrupación más bajo al operador miembro y asocia de izquierda a derecha (es decir,
a.b().c()
se ejecuta como (a.b()).c()
y no como a.(b().c())
Lo anterior demuestra que nuestra expresión (2) se ejecuta toda de izquierda a derecha (porque todos tienen esa asociatividad) comenzando por el operador de agrupación ( )
por tener el mayor nivel de precedencia. Revisemos entonces la expresión A que tiene este operador:
a=[]
La expresión anterior (una expresión de asignación) crea un arreglo vacío y lo asigna a la variable llamada a
. Pueden ocurrir dos cosas:
- Si la variable
a
ya existe, le asigna el arreglo vacío creado.
- Si la variable
a
no existe, crea una variable llamada a
y le asigna el arreglo vacío creado.
En Javascript uno crea una variable normalmente con la palabra clave var
, pero esto es opcional. Habitualmente las variables tienen un alcance -los bloques en los que estas pueden ser accedidas, modificadas, etc-. Cuando se crea una variable con la palabra clave var
el alcance de esta variable se restringe al lugar donde se creo (por ejemplo, una función), sin la palabra clave var
el alcance de esta variable es el objeto global, que es muy similar a una variable global que puede ser accedida por cualquier código siguiente que se ejecute. Saber esto es importante porque las demás expresiones (B y C) del código hacen uso de este comportamiento para acceder de nuevo a la variable a
.
Ahora bien, como es una expresión, esta devuelve un valor. El estándar menciona que las expresiones de asignación retornan el valor asignado. En este caso, el valor que devuelve es precisamente, el arreglo vacío creado. esto completa la primera parte de las tres del código (1) original.
Continuando leyendo de izquierda a derecha encontramos los operadores de miembro .
y la llamada a la función join()
. Esto significa que estamos accediendo a una función llamada join()
del objeto que fue devuelto por la primera expresión. Consultando en la documentación se encuentra que el método join()
es una función que se usa para convetir los objetos de un arreglo en una cadena. Tiene sentido que esta función se llame sobre el objeto devuelto por la expresión anterior porque precisamente, devolvió un arreglo vacío. Como es un arreglo, sabemos que podemos invocar a la función join
en este objeto. El método join()
recibe como argumento otra expresión que evalúa a un separador que se puede usar para separar los objetos del arreglo que se convierte en cadena, por ejemplo:
var arr = ["Lunes", "Miércoles", "Viernes"];
console.log(arr.join(", ")); //Imprime Lunes, Miércoles, Viernes
console.log(arr.join(" - ")); //Imprime Lunes - Miércoles - Viernes
Como el objeto al que se llama esta función es un arreglo vacío, parece no tener sentido hacer esto, pero hay que ver exactamente qué recibe como argumento. Recordemos que al recibir una expresión como argumento, esta puede hacer cualquier cosa antes de evaluar a un resultado (un efecto colateral). Revisemos entonces qué expresión recibe la función join()
(la parte B)
a[1]=+(a[16]='!')+""
Esta es, nuevamente, otra expresión que se compone de varios operadores:
El operador miembro []
, (similar al operador miembro .
) que se usa para acceder a una propiedad de un objeto. En un arreglo normalmente se usa para acceder al elemento que se encuentra en la posición i, por ejemplo:
var arr = ["Perro", "Gato"];
console.log(arr[0]); //Imprime "Perro";
console.log(arr[1]); //Imprime "Gato",
Recuerda que en Javascript, los índices de los arreglos comienzan desde 0.
El primer operador +
(no confundir con el segundo +
). Es un operador unario (es decir, se aplica a un único operando). Si te das cuenta el único operando al que aplica es a la expresión envuelta en el operador de agrupación (es decir, a a[16]='!'
). De acuerdo a la documentación, este operador se encarga de intentar convertir el valor de una expresión a un número, por ejemplo:
var n = 3;
console.log(+n); //Imprime 3, ya es un número
var three = "3";
console.log(+three); //Imprime 3, la variable three almacena la cadena de caracteres "3", convertirla a 3 no es problema.
var error = "three";
console.log(+error); //Imprime NaN
Si el operador no puede convertir a número, el valor devuelto es NaN, NaN significa Not a Number (no es un número) y tiene sentido, si la representación de la variable no puede convertirse a un número, el resultado del operando es esta variable.
El operador agrupación ( )
. Ya habíamos visto qué realiza y cuál es su precedencia y asociatividad. Este operando tiene como expresión a[16]='!'
, que combina los operandos de miembro (a[16]
) y asignación (=
).
El operador +
binario. Este operador puede ser o bien el de suma habitual de aritmética o de concatenación de cadenas. Dado que es binario requiere dos operandos, uno de los cuales es el resultado de la expresión del operador de agrupación anterior y el otro es la cadena de caracteres "!". Dado que uno de los dos es una cadena, el operador que se usa es el de concatenar cadenas.
Una vez identificado los operadores procedemos a ver cuáles se ejecutan primero y en cuál orden. Revisando nuevamente la tabla de precendencia encontramos lo siguiente:
- El operador de agrupación
( )
tiene el nivel de precedencia más alto y asocia de izquierda a derecha.
- El operador unario
+
tiene un nivel de precedencia más bajo que el operador de agrupación y asocia de derecha a izquierda
- El operador binario de concatenación
+
tiene un nivel de precedencia más bajo que el operador unario y asocia de izquierda a derecha.
- El operador de asignación
=
tiene el nivel más bajo de precedencia y asocia de derecha a izquierda
Por lo tanto, el orden en el que se ejecuta la expresión completa es el siguiente:
Al tener la precedencia más alta, la expresión dentro del operador de agrupación se ejecuta primero:
a[16]='!'
¿Recuerdas que antes de ejecutarse esta expresión se había ya creado un arreglo llamado a
que era similar a una variable global? Pues aquí accedemos a ese arreglo y le asignamos en la posición 16 el carácter '!'. Aquí se debe recordar que el arreglo a
se había creado vacío, a diferencia de otros lenguajes de programación en Javascript no es necesario especificar el tamaño del arreglo para insertar elementos, por lo que la operación anterior realiza en realidad dos cosas: primero, inserta en la posición 16 del arreglo el elemento y segundo, de forma implícita le da una longitud al arreglo: al asignarle el elemento en la posición 16 le estamos indicando que el arreglo tiene 17 elementos (recuerda que comenzamos desde la posición 0).
Al terminar de ejecutarse la expresión de asignación devuelve el valor de la misma (es decir, el caracter '!'. La precedencia continúa con el operador unario +
. Este asocia de derecha a izquierda, por lo que recibe el operando (el caracter !
) y realiza su función: intentar convertirlo a un número. Pero aquí viene lo importante: no es posible convertir el caracter '!' a un número, por lo tanto, el resultado de esta operación es NaN.
La siguiente precedencia la tiene el operador binario +
de concatenación. Este operador asocia de izquierda a derecha, por lo que concatena el valor NaN con la cadena vacía "". Este procedimiento tiene como resultado obtener la cadena de texto "NaN" (la variable NaN es distinta a la cadena de texto "NaN".
La precedencia más baja ocurre al asignar la expresión anterior a la posición 1 del arreglo a
. Recuerda que las expresiones de asignación retornar el valor asignado.
Al terminar lo anterior hemos creado un arreglo de 17 elementos, donde el último elemento tiene el caracter "!", y el segundo la cadena "NaN". Al mismo tiempo, la expresión devuelve la cadena "NaN" que al mismo tiempo es el argumento de la función join()
. Recuerda que esta función recibe un parámetro que usa como separador de caracteres para imprimir todos los elementos del arreglo. En este momento de la ejecución, el arreglo es similar a lo siguiente:
- Posición 0: undefined
- Posición 1: "NaN"
- Posición 2: undefined
- ...
- ...
- Posición 16: "!"
Lo que hará la función join()
es tomar el elemento en la posición 0, concatenarlo con el parámetro ("NaN"), concatenarlo con el elemento en la posición 1, concatenarlo con el parámetro, y así hasta llegar al elemento en la posición 16. El tipo de dato undefined en Javascript significa que el tipo es desconocido (no está definido). La documentación menciona que el método join()
encuentra un elemento de tipo undefined lo convierte a una cadena vacía. Esto significa que concatenará cadenas vacías con la palabra "NaN" 16 veces más la cadena "NaN" de la posición 2 más el caracter "!" de la última posición. Y eso explica cómo se origina la primera parte de la cadena.
La parte BaTMaN!
La explicación anterior mostró como las expresiones A y B de las partes 1 y 2 logran construir la concatenación de NaN, recordemos que estas expresiones evalúan a un valor. El resultado de la ejecución de la función join()
es una cadena de texto (de tipo String). Al seguir la precedencia del código original nos encontramos ahora con la función concat()
. De acuerdo a la documentación esta función combina texto de dos entradas y retorna una nueva cadena producto de la concatenación de estas. Esta función puede llamarse sobre objetos de tipo string, que es precisamente el tipo de dato de la cadena "NaNNaN..." que retornó la función join
. Al igual que esta, recibe un valor como parámetro, por lo tanto puede pasarse una expresión que evalúe a un valor, que es precisamente lo que hace la expresión C:
// C: (a[0]=function(p){return p + a[1][1]})(' B'),'T',a[0]('M'),(a[1][0]+a[16])
Voy a redactar el código de una forma ligeramente diferente:
(a[0]=function(p){
return p + a[1][1]
}
)(' B'),'T',a[0]('M'),(a[1][0]+a[16])
Esta expresión en realidad son 4 expresiones separadas por el operador coma (,)
. El objetivo de este operador es separar un conjunto de expresiones asociándolas de izquierda a derecha, las siguientes son las 4 expresiones que separa, la primera es:
(a[0]=function(p){
return p + a[1][1]
})(' B')
Con lo mencionado anteriormente no es difícil notar que el objetivo de la expresión es asignar al primer elemento del arreglo a
una función anónima (sin nombre). Antes de ver qué devuelve esta función es necesario ver qué hay en el elemento a1 del arreglo. Es claro que el elemento 1 del arreglo a
es la cadena de texto "NaN", las cadenas de texto son por sí mismas un arreglo de caracteres, por lo que el segundo elemento de la cadena es el caracter 'a', es decir, a1 retorna el caracter 'a', por lo que la función puede escribirse también de la siguiente manera.
(a[0]=function(p){
return p + 'a'
})(' B')
Ahora, la expresión no solamente le asigna al primer elemento del arreglo a esta función, sino que se invoca inmediatamente se define (un patrón habitual en Javascript). Si te fijas, la función anónima se encuentra dentro de un operador de agrupación, por lo que la declaración se define primero, luego se retorna la misma función (porque la expresión devuelve el valor que se asigna) y se ejecuta con el parámetro ' B'. Al hace esto, la función retornará ' Ba' (la concatenación del parámetro ' B' con el caracter 'a'.
La segunda expresión que separa el operador coma es
'T'
que es simplemente el caracter 'T'
La tercera expresión que separa el operador coma es
a[0]('M')
Recuerda que en la primera posición del arreglo a
existe una función anónima que podemos llamar, en este caso estamos llamando la misma función que vimos anteriormente pero con el parámetro 'M', es claro que retornará la cadena 'Ma' (concatenar el parámetro con el caracter 'a').
La cuarta expresión que separa el operador coma es
(a[1][0]+a[16])
Esta es nuevamente otra expresión (por el operador de agrupación). El objetivo de la expresión es usar el operador binario de concatenación +
para unir lo que hay en la segunda posición del arreglo a
(una cadena de caracteres: "NaN" y primer caracter de la cadena (la letra "N") con lo que hay en la última posición del arreglo a
(el caracter "!"). Por lo tanto, la expresión retorna el valor 'N!'
Ahora bien, todas estas expresiones están separadas por coma al pasarse como parámetro a la función concat()
. Esta función concatena la cadena de caracteres a la que se llama con cada uno de los parámetros que se le envían separados por coma, de izquierda a derecha, es decir:
var name = "Daniel ".concat('Ar','an','d','a');
console.log(name); //Imprime "Daniel Aranda"
Como la palabra a la que se concatena es:
NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN!
y se le aplica la función que resuelve a `concat(' Ba','T','Ma','N!'), la expresión que finalmente devuelve es la esperada:
NaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaNNaN! BaTMaN!
Comentarios adicionales
¿Para qué sirve lo anterior?: absolutamente para nada. Probablemente para demostrar cómo ofuscar código en Javascript (hacerlo ilegible a otras personas), o como parte de una prueba técnica para ver qué tanto alguien sabe del lenguaje (ya que si te diste cuenta una porción de código como esa requirió explicar muchos temas variados). En últimas es un abuso completo del lenguaje y de la notación del mismo y siempre es preferible la construcción de un código claro y conciso que realice lo mismo, así no sea tan divertido, compara por ejemplo con este código que hace exactamente lo mismo que el código original:
a = new Array(17);
a[17] = '!';
a[1] = NaN;
var nanString = a.join("NaN");
a[0] = function(p) { return p + 'a'};
var ba = a[0]('B');
var t = 'T';
var ma = a[0]('M');
var n = 'N!';
nanString = nanString.concat(ba,t,ma,n);
console.log(nanString);
javascript
, (a partir del minuto 1:23)NaN
(Not a Number).