> Manuales > Manual de JavaScript

Qué es la coerción de tipos en Javascript y por qué es importante que la conozcas si estás trabajando con este lenguaje de programación.

Coerción de tipos en Javascript

Javascript es un lenguaje de programación sencillo para comenzar. Al poco tiempo de empezar a programar verás que haces cosas interesantes en el contexto de la web y le tomas el gustillo rápidamente a la programación, sobre todo si no tenías antes conocimientos previos. Paralelamente, gracias a que Javascript permite hacer desarrollos en muchos entornos, no solamente en el navegador, sientes que estás adquiriendo habilidades que realmente merecen la pena.

Sin embargo, no nos debemos llevar a engaño y debemos saber que el camino para dominar Javascript no es tan sencillo como podría parecer. En este artículo vamos a analizar uno de los puntos básicos del lenguaje que a menudo uno deja escapar durante su formación pero que es relevante para adquirir dotes profesionales. En otras palabras, puedes vivir durante muchos años sin saber lo que es la coerción de tipos y cómo funciona en Javascript, pero es importante que la conozcas para no andar perdido y frustrado cuando las cosas no funcionan a la primera.

Tipos en Javascript

Primero queremos señalar que a veces se le califica a Javascript como un "lenguaje no tipado". Lejos de la realidad. En realidad claro que existen tipos en el lenguaje, como ya hemos explicado en el artículo dedicado a los tipos en Javascript. Lo que tenemos en realidad es un lenguaje de tipado dinámico, donde una variable puede tener diversos tipos.

En los lenguajes de tipado estático como Java cada operador se debe usar sobre variables de un determinado tipo. Sin embargo en lenguajes de tipado dinámico es posible usar operadores con variables de distintos tipos. Por ejemplo, podemos sumar una cadena a un número sin problemas, algo que en Java daría un error de compilación.

Coerción de tipos

Al relacionar operandos de distintos tipos para realizar diversas operaciones, el intérprete de Javascript, tiene que hacer una transformación implícita de los valores de un tipo a otro. Esa transformación se llama coerción.

Por ejemplo, al usar el operador + con dos valores de tipos distintos, como una cadena de texto y un valor numérico, lo que ocurre por debajo es que el valor numérico se convierte en una cadena y se realiza la concatenación.

let x = 5 + '5'; // la variable x valdrá 55

La coerción de tipos es algo que ocurre constantemente en las aplicaciones Javascript. El intérprete de Javascript la mayoría de las veces funciona de manera bastante lógica, pero en ocasiones podemos tener sorpresas!

Comportamientos extraños de Javascript

Muchas veces podremos suponer cómo se va a comportar el lenguaje cuando se realiza la coerción de tipos para poder realizar operaciones en las que participan distintos tipos de datos, pero algunas veces aplicar simplemente el sentido común no será suficiente! De hecho, Javascript es tan laxo en su sistema de tipos que podemos hacer cosas tan extrañas como esta:

[] + []

En la anterior sentencia no hay sentido común que sirva para imaginarse qué es lo que va a pasar. No hay otra solución que ejecutarlo para ver ¿no?. No hace falta que lo ejecutes, ya te informo yo que evaluar esa sentencia te devolverá un string vacío.

De todos modos, sin irnos a cosas tan raras, vamos a ver ahora algunos casos extraños en Javascript que ocurren cuando se realiza la coerción implícita de tipos al usar operadores distintos. Veremos que la mayoría de las sorpresas ocurrirán porque hacemos cosas que quizás no tengan mucho sentido, pero a veces sin darnos cuenta este tipo de operaciones son bastante frecuentes cuando descuidamos el tipo que tienen las variables que estamos usando.

Veamos un ejemplo bastante extraño.

console.log(0 == "0"); //muestra true en la consola
console.log(0 == []); // muestra true en la consola

Pero ahora a simple vista, y por deducción lógica, qué piensas que mostrará esta sentencia en la consola:

console.log("0" == []);

La lógica nos llevaría a pensar que esta comparación daría true, pero sin embargo Javascript lo evalúa como false. Estas son las cosas que llaman la atención y ante las cuales es mejor ser precavidos, evitando hacer este tipo de comparaciones extrañas.

Veamos otro caso difícil de entender.

console.log('0' == false); // muestra true en la consola

Al ejecutar la sentencia anterior veremos que el resultado de comparar la cadena '0' con false nos devuelve true. Sin embargo, dado el código siguiente:

if('0') {
  console.log("'0' evalúa como true");
} else {
  console.log("'0' evalúa como false");
}

¿Qué salida piensas que veremos? Pues bien, la cadena '0' evaluada tal cual, nos llevaría por el caso positivo del if. Quizás no era lo que esperabas!

Coerción explícita de los datos

Si queremos realizar determinadas operaciones, asegurándonos que los tipos de datos sean los que nosotros queremos, podemos realizar una coerción explícita. En muchos casos es más conveniente que de dejar al intérprete que haga la coerción de tipos que tenga definida de manera predeterminada.

Para ello en Javascript podemos usar unas clases incorporadas que nos pueden ayudar a convertir los datos en los tipos deseados. Las principales serían:

Cuando usamos el constructor de estas clases obtenemos un valor del tipo particular de cada clase. Veamos unos ejemplos de uso de los constructores de estas clases.

let x = Number('999') // devuelve el valor 999 de tipo number
let y = String(true) // devuelve la cadena "true"
let z = Boolean(0); // devuelve el boleano false

Por ejemplo, en el caso de la suma que hemos visto antes de una cadena con un número, si deseamos que se produzca verdaderamente una suma y no una concatenación, podemos hacer lo siguiente.

let sum1 = 5;
let sum2 = '5';
sum2 = Number(sum2);
let suma = sum1 + sum2; // obtenemos el valor 10 en vez del valor 55 como el ejemplo primero del artículo

En este caso, también podemos usar el operador unario + que convierte de manera implícita el valor al tipo number.

let val1 = +'66' // asigna el valor numérico 66
let val2 = +'hola' // asigna el valor NaN (Not a Number)
let val3 = +true // asigna el valor numérico 1
let val4 = +false // asigna el valor numérico 1

Al final se trata de usar las herramientas que te ofrece el lenguaje para asegurarnos que la variable guarda el tipo que deseamos. En este caso particular tienes esta alternativa y quedaría a tu juicio saber qué te ofrece un código más claro, usar el operador unario o bien la clase Number.

Conclusión

Seguramente hemos aprendido alguna cosa más sobre el lenguaje Javascript. Es sin duda bastante básico todo lo que hemos visto, pero muchas veces no se reflexiona tanto sobre las implicaciones que tienen las operaciones con datos en los lenguajes de tipado dinámico.

Si estamos desarrollando aplicaciones y queremos evitar sorpresas es importante no dejar pasar por alto estos detalles. Espero que este artículo sirva para ayudar a ser más consciente de las implicaciones que tiene el trabajar con Javascript.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual