JavaScript — Coerción, coacción explícita e implícita, Truth, Equality & Operators, y ecuaciones complejas…
Temario
- Coerción
- Coacción explícita e implícita (string, boolean, number)
- Tipo de comparaciones (== y ===)
- Coerción (Truth, Equality & Operators)
- Ecuaciones complejas
i. Coerción
Coerción de manera simple : Es la acción de forzar a que un objeto se comporte como si fuera de otro tipo.
Recordemos que JavaScript es de tipado dinámico [ref] (“Duck typing”) a diferencia de otros lenguajes como C# que son “static typed” o de tipos estáticos.
El estilo de tipificación Duck typing no es necesario especificar el tipo de dato para las variables ya que el tipo está asociado al valor, esto, es una gran ventaja ya que podemos cambiar su valor sin ningún problema.
Antes de empezar con los ejemplos, recordemos las siguientes reglas:
- objects evaluado como true
- undefined evaluado como false
- null evaluado como false
- booleans evalúa el valor del booleano
- numbers evalúa false si +0, -0, o NaN, para los demás true
- strings evalúa false si un string está vacío ‘’, para los demás true
Ahora sí veamos nuestro primer ejemplo:
En el ejemplo anterior declaramos una variable var1, y como ya sabemos esta se genera con el valor undefined, y de acuerdo a las reglas de arriba sabemos que undefined = false, por lo que no cumple con la condición.
En el ejemplo anterior declaramos una variable var1 y está inicializado con el valor 100, entonces si revisamos de nuevo las reglas sabemos que un número >0 = true, por lo que sí cumple con la condición y por lo tanto se imprime “Hello World!!” en consola.
En los dos ejemplos anteriores JavaScript está aplicando coerción, ya que está forzando un tipo de dato a que se comporte como otro.
ii. Coacción explícita e implícita
En JavaScript existen dos tipos de coacción:
- Explícita: Es cuando convertimos un valor a otro de manera apropiada (String, Number, etc)
- Implícita: Cuando se convierten los valores de manera “automática”, y comúnmente es cuando aplicamos los operadores de valores diferentes (true + false, “hola” + 2 + 3, etc), y también cuando aplicamos if(value) {}, donde se hace coacción es el valor a un booleano.
Sin importar si es explícita o implícita la coerción, así sean primitivos u objetos, SIEMPRE se van a convertir en los siguientes 3 tipos:
- Cadena (string)
- Booleano (boolean)
- Numérico (Number)
a — Cadena (string)
Para hacer coerción explícita debemos usar String() y para aplicar la coerción implícita es usando el operador +
Si aplicamos coerción explícita a los valores primitivos, todos se convierten a cadena:
b — Booleano (boolean)
Para hacer coerción explícita debemos usar Boolean() y para aplicar la coerción implícita es usando los operadores lógicos ||, &&, !.
Importante: Los operadores lógicos hacen conversiones booleanas internamente, pero en realidad devuelven el valor de los operadores especificados, inclusive si no son booleanos.
Ejemplos:
Si aplicamos coerción explícita a los valores:
c — Numérico (number)
Para hacer coerción explícita debemos usar Number() y para aplicar la coerción implícita tenemos que tomar en cuenta el operador:
- Operadores de comparación (>, <, <=, >=)
- Operadores bitwise (|, &, ^, ~)
- Operadores aritméticos (-, +, *, /, %), el operador + no activa la conversión numérica cuando es una cadena (el resultado lo concatena)
- Operador de igualdad flexible (==, !=), == no aplica la conversión numérica cuando ambos son cadenas.
Si aplicamos coerción explícita a los valores primitivos:
- Cuando convertimos una cadena a número, el motor de JavaScript primero quita los espacios iniciales y finales, devuelve NaN si la cadena no representa un número válido, si la cadena es está vacía nos va a devolver 0
- Para el caso de null regresa 0 (recordemos que se evalúa como objeto [ref]) y para undefined regresa NaN.
- Para la coerción implícita null y undefined su conversión numérica no aplica, ya que cada uno sigue conservando sus valores.
- Para el caso NaN no es igual a nada, ni siquiera para el mismo [ref].
iii.Tipo de comparaciones (== y ===)
JavaScript tiene los siguientes tipos de comparaciones :
- Flexible o abstracta (==) — Sólo basta con que el valor sea el mismo sin importar el tipo de dato y su coerción es implícita.
- Estrictas (=== ) — Sólo es verdadera si los valores y el tipo de dato son los mismos y su coerción es explícita.
- Abstractas relacionales (ej. >=) — antes de hacer la comparación los operadores primero se convierten en primitivos y luego en el mismo tipo.
La mayoría de los errores en las comparaciones es cuando se hace una igualdad flexible (==), ya que dependiendo del valor es el resultado, veamos bajo qué validaciones regresa true (cuadro verde) o false[ref]:
Como podemos observar dependiendo la combinación es si nos regresa true o false.
El == y != siguen el algoritmo de “comparación de igualdad abstracta”, por lo que los valores pueden considerarse iguales incluso si son de diferentes tipos, ya que el operador forzará la coacción de uno o ambos operadores en un solo tipo (generalmente un número) antes de realizar una comparación.
Los siguientes ejemplos regresan true; detectar estos errores en producción es MUY complicado:
Por eso es recomendable SIEMPRE hacer una comparación con igualdad estricta (===), veamos bajo qué validaciones regresa true (cuadro verde) o false[Ref]:
Más amigable y fácil de recordar no?
iv. Coerción (Truth, Equality & Operators)
Se considera una buena práctica usar los operadores de igualdad de tipos seguros === y !== en lugar de los regulares == y !=.
No olvidemos las siguientes reglas, ya que son muy importantes para poder entender lo que viene a continuación:
- objects evaluado como true
- undefined evaluado como false
- null evaluado como false
- booleans evalúa el valor del booleano
- numbers evalúa false si +0, -0, o NaN, para los demás true
- strings evalúa false si un string está vacío ‘’, para los demás true
De acuerdo a las reglas de arriba JavaScript clasifica los valores como:
- Truthy ( true, “kakarot”, 36, [1,2,4] y {a:16})
- Falsey ( false, 0, “”, null y undefined).
Si vemos el siguiente ejemplo, pensaríamos que es false, pero NO!, ya que un array (incluso vacío) regresa true y al ser objeto.
Cuando se hace comparaciones entre dos valores utilizando el algoritmo de igualdad abstracta, es importante entender lo siguiente:
Cuando el resultado es una expresión, el algoritmo se vuelve a aplicar hasta que el resultado sea un booleano. Los métodos toNumber y toPrimitive son internos de JavaScript que convierten sus argumentos de acuerdo con las siguientes reglas:
Veamos cómo funciona el algoritmo de igualdad abstracta:
Cuando comparamos x == y, donde x y y son valores pueden dar un resultado de true o false, la comparación se hace de la siguiente manera:
Tipo => Boolean, String, Object, etc…
Reglas especiales:
- La comparación de cadenas (String) puede ser forzado ‘’ + a == ‘’ + b;
- La comparación numérica (Number) puede ser forzado +a == +b;
- La comparación booleana (Boolean) puede ser forzado !a == !b;
- a != b; es lo mismo que !(a == b);
- El operador de igualdad no siempre es transitivo, esto quiere decir que dos objetos String distintos , cada uno representando el mismo valor de String; cada objeto String sería considerado igual al valor de String por el operador ==, pero los dos objetos String no serían iguales entre sí, por ejemplo:
Entendiendo lo anterior, veamos los siguientes ejemplos:
Ejemplo 1:
Ejemplo 2:
Ejemplo 3:
Cuando se hace comparaciones entre dos valores utilizando el algoritmo de igualdad estricta, es importante entender lo siguiente:
v. Ecuaciones complejas
Ahora que ya hemos entendido lo que es la coerción a un nivel medio, vamos a ver los siguientes ejemplos (explicando el por qué da ese resultado).
Ejemplo 1:
De acuerdo a los temas anteriores, recordemos que: false == 0 y true == 1, teniendo en cuenta esto: 5 + true se convierte a 5 + 1 y nos da de resultado 6.
Ejemplo 2:
Cuando el operador más se coloca entre dos boolean, estos se va a convertir en Number; por lo tanto, true + false se convierte a 1 + 0 y nos da de resultado 1.
Ejemplo 3:
Cuando el operador de mas se coloca entre operandos y uno de ellos es un string, va a convertir el otro en number ó boolean a un string y los va a concatenar. Entonces ‘8’ + 8 se convierte a ‘8’ + ‘8’ y nos da de resultado ‘88’.
Ejemplo 4:
Este ejemplo es igual al pasado: Cuando el operador de mas se coloca entre operandos y uno de ellos es una string, va a convertir el otro en number ó boolean a un string y los va a concatenar. Entonces true + ‘7’ se convierte a ‘true’ + ‘7’ y nos da de resultado ‘true7’.
Ejemplo 5:
Recordemos que el orden de las operaciones es muy importante, para este caso:
Ejemplo 6:
Veamos qué pasa cuando el primero es un string:
Ejemplo 7:
Este ejemplo tiene trampa, ya que su resultado no es 6969
Ejemplo 8:
Ejemplo 9:
Con el siguiente ejemplo, vemos los temas (Operadores unarios[ref] y Ecuaciones Complejas)
Vamos a desglosarlo:
Ejemplo 9:
Es casi el mismo ejemplo que el anterior, lo que hemos agregado un (-) en -[]
Podemos observar como un simple operador unario puede cambiar todo el resultado.
En la siguiente entrega vamos a ver JavaScript — Historia, Estándar & Motores
La entrega pasada vimos JavaScript — Operadores Unarios
Bibliografía y links que te puede interesar…
