Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

JavaScript Raro II: No Sabes Sumar... ¡NI RESTAR!

JavaScript Raro II: No Sabes Sumar... ¡NI RESTAR! 20.JUL.17

Diego Castaño
Colaborador de Web Bizarro

Esta es la segunda parte de JavaScript Raro, si te perdiste la primera parte puedes verla aquí.

En el último vídeo planteaba una pregunta: ¿Qué resultado da la expresión [] + {}? Para comprobarlo vamos a usar la consola de Chrome, y podemos ver la que respuesta es “[object Object]” Cuidado, no es un array de objetos, es la expresión textual de un objeto. Es lo mismo que si ejecutamos:
let a = {}; a.toString();

Sucede porque a la hora de comprobar si alguno de los operandos son cadenas, detecta el array vacío como la cadena ‘’. Al fin y al cabo las cadenas de texto en JavaScript no son más que arrays de caracteres, por lo que no es capaz de diferenciar la cadena vacía del array vacío.

Entonces, como expliqué en el vídeo anterior, como uno de los operandos es una cadena decide transformar ambos operandos a cadena y concatenarlos. Podemos comprobar que '' + {} hace lo mismo.

Pero, entonces, si [] + {} nos devuelve [object Object], entonces {} + [] debería dar exactamente lo mismo. ¿No? Es la propiedad conmutativa de la suma… ¡Pues no! Nos da… 0 (??)

¡Pero si en vez de por consola lo mostramos en un mensaje de alerta: alert({} + [])… muestra el resultado que esperábamos! ¿Cómo puede ser esto?

El truco está en que JavaScript utiliza la misma sintaxis para 2 cosas distintas:

  1. Definición literal de un objeto
  2. Declaración de un bloque

 

Por ejemplo, es este contexto let a = { atributo: valor}; está claro que estamos creando un objeto con un atributo valor. let a = {}; Estamos creando otro objeto pero esta vez vacío, sin atributos. Por otro lado, podemos escribir lo siguiente para definir un bloque de instrucciones: { let a = 1; let b = 2; a + b; }

No es normal ver esto en JS porque no sirve de mucho, pero sí se suelen usar en funciones, bucles o estructuras if. El problema está al usar {} no sabe diferenciar si se trata de un objeto o un bloque vacío.

Ya hemos visto cómo funciona el operador suma, que hace cosas distintas según uses cadenas o números. Vamos a introducir un elemento más, el operador resta.

Qué resultado crees que da la siguiente expresión: ‘1’ + ‘1’ - ‘1’ + ‘1’ - ‘1’
¿La cadena ’1’? ¿Quizá el número 1? Nop. El resultado es el número 100.
¡¿Como?!

Resulta que el operador resta no está sobrecargado, es decir, se comporta igual con números o letras. Siempre intenta transformar ambos operandos a tipo numérico y realiza una resta aritmética.

Si te ha resultado interesante recuerda suscribirte al canal de Diego Castaño.