post thumbnail

JavaScript Desmitificado: Coercion Parte 2

Publicado Por: Oscar González, El 21/04/2014


Detalles del Curso:

Dificultad: Heroe

Duración: 10 min


Más artículos en JavaScript Desmitificado

Este es el artículo Coercion Parte 2 de la serie JavaScript Desmitificado - Mostrar todos

  1. Objetos
  2. Funciones
  3. Clausuras (closures)
  4. Coerción parte 1
  5. Coercion Parte 2
  6. Concurrencia
  7. Calidad

Continuemos con más de coerción. En esta oportunidad voy a presentar su parte más confusa y compleja.

Como es muy difícil imaginar ejemplos para esta sección del contenido de la serie, voy a estar extrayendo la mayoría del código de este capítulo del libro “Expert Javascript” de Mark Daggett.

¿Preparados para ser sorprendidos?.


Coerción... increíble

Veamos el siguiente ejemplo. Puedes probarlo en una consola de JavaScript; abres el terminal (consola), y si tienes Node.js instalado, solo escribe node y presiona enter, escribe el código de abajo y vuelve a presionar enter.

++[[]][+[]]+[+[]] // => '10'

¿Increíble, no es cierto?. Si escribimos ++[[]][+[]]+[+[]] en una consola de javascript, retorna un string con el valor de '10'.

Voy a explicarlo por partes.

[[]] es un array vacío dentro de otro array.

[+[]] retorna [0], ya que el + forza el array interno a su valor numérico.

Entonces quedamos con ++[[]][0]. Si lo vemos bien, el primer array es accedido en su posición cero, es similar a myArray[0]. Entonces esta primera parte retornaría el array interno []. Si ahora aplicamos el ++, entonces forzamos el array a su valor numérico, 0, pero a la vez lo estamos incrementando, entonces retorna 1:

++[[]][0] // => 1

Quedamos entonces con 1+[+[]]. Como el primer valor es un numero y el segundo un array ([0]), entonces el resultado no será combinado por suma sino por concatenación. Resultado en '10'


Coercion de Operadores Lógicos

Los operadores lógicos se utilizan para retornar valores booleanos, pero en ciertas ocasiones son útiles para simplificar código.

&& (AND)

Todos conocemos la función de AND a estas alturas. Combina varios resultados booleanos en uno solo.

true && true // => true

true && true && false // => false

|| (OR)

Aparte de su uso común (Ej: true || false = false; true || true = true). También se puede utilizar para asignar valores por defecto:

var name = myArray[3] || 'No name';

var bank = myMoney || 10;

! (NOT)

El operador NOT, toma un operando ubicado a su derecha, que debe ser un valor buleano, y retorna true si es false o false si es true.

!true // => false

!false // => true

Si el valor no es buleano, será forzado a boleano y luego lo aplicará el operador:

// forzado a false
!0 // => true

// forzado a true
!1 // => false

// forzado a true
!'1' // => false

// forzado a false
!undefined // => true

// forza el array a numero (0), luego a false
!+[] // => true

Última sorpresa

Todo lo explicado anteriormente sobre coerción se demuestra a su máxima expresión con el programa jsfuck. Su funcionamiento puede ser probado en http://www.jsfuck.com/. Es realmente sorprendente como el siguiente código de 2288 caracteres resulta en el string 'codehero':

([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+
[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(!
[]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!!
[]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[!+[]+!+[]]+
(!![]+[])[!+[]+!+[]+!+[]]+(+(+!+[]+[+[]]+[+!+[]]))[(!![]+[])[+[]]+(!![]+[][(![]
+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+
[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(+![]+([]+[])[([][(![]+[])
[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])
[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+
([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!
+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]
+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([][[]]+[])[+[]]+([][(![]+[])[+[]]+([!
[]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]
+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[][(![]+[])[+
[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+
[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+
(!![]+[])[+[]]+(!![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+([][[]]+[])[+!+[]]+
(+![]+[![]]+([]+[])[([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]
+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]
+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+
(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+[]]]+([]
[[]]+[])[+!+[]]+(![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[+!+[]]+([]
[[]]+[])[+[]]+([][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]
+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]]+[])[!+[]+!+[]+!+[]]
+(!![]+[])[+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+
[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+[]]])[+!+[]+[+
[]]]+(!![]+[])[+!+[]]])[!+[]+!+[]+[+[]]]](!+[]+!+[]+[+!+[]])[+!+[]]+(!![]+[])[!
+[]+!+[]+!+[]]+(!![]+[])[+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+
[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+[]]+(!![]+[])[!+[]+!+[]+!+[]]+(!![]+[])[+!+
[]]])[+!+[]+[+[]]] // => 'codehero'

Cierre

Todo este asunto de la coerción puede parecer inútil, y tal vez saber utilizarlo al punto de poder escribir 'codehero' con expresiones forzosas parezca osado. Pero al final del día aporta un entendimiento profundo del lenguaje Javascript.

¿Te ha gustado esta entrada?. Comenta y pregunta lo que quieras en la sección de más abajo, quiero saber cuales son tus impresiones.

Recuerda siempre compartir en las redes sociales. Ayuda a que se esparza el conocimiento.

Hasta una próxima entrega de la serie.


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus