Escuela Frontend
JavaScript

Aprende Sobre la Coerción de Datos en JavaScript

Facundo Giuliani
Autor
Facundo Giuliani

¿Qué es la coerción de datos?

JavaScript es el lenguaje de programación más popular del mundo. Uno de los aspectos del lenguaje por los cuales se da esta situación es su flexibilidad al momento de manejar tipos de datos al crear y manipular variables. Si bien su tipado débil y dinámico nos permite manejar variables con menos ataduras, puede ser un arma de doble filo si no comprendemos que es lo que está pasando al momento de operar con datos de distintos tipos. En este artículo vamos a hablar sobre la coerción de datos, qué es y cómo se efectúa en nuestro código.

Tipos de datos

Como mencionamos anteriormente, JavaScript es un lenguaje de programación débilmente tipado. Esto significa que al momento de crear variables no hace falta que indiques de qué tipo de dato será el valor contenido, y que puede llegar a cambiar durante la ejecución de tu código. JavaScript también es un lenguaje de tipado dinámico. Esto hace referencia a que la verificación de tipos de datos se realiza en tiempo de ejecución.

let variable = "texto";
console.log(typeof variable); // "string"
variable = 42;
console.log(typeof variable); // "number"

Estas características que definen a JavaScript pueden ser ventajosas, como también perjudiciales. La flexibilidad provista al no definir el tipo de datos de las variables puede acarrear errores en tus proyectos, si el código no se implementa de la manera adecuada. Puedes crear una variable y asignarle un valor de cierto tipo de dato, y en el transcurso de la ejecución del código, cambiar el valor de esa variable a uno de otro tipo de dato, y JavaScript seguirá ejecutando tu aplicación normalmente. Si en alguna parte de tu código asumes que la variable tiene un valor de cierto tipo, y en realidad es de otro, puede que se genere un error en la ejecución, o que tu código devuelva un resultado incorrecto.

let variable1 = 1;
variable1 = "1";
let variable2 = variable1 + 1;
console.log(variable2); // 11

En JavaScript podemos dividir a los tipos de datos en dos grandes grupos: primitivos y de tipo objeto. En este artículo nos enfocaremos en los primeros.

Los tipos de datos primitivos se diferencian de los de tipo objeto en que no poseen métodos ni propiedades, y su valor es inmutable: una vez que se le asigna un valor primitivo a una variable, la única manera de cambiarlo es asignándole otro valor. Si quieres saber más sobre los tipos de datos primitivos puedes leer este artículo de Escuela Frontend.

JavaScript no impone una definición estricta del tipo de dato que contienen las variables. Por otro lado, no es requisito que todas las variables que se utilizan en una cierta operación contengan valores del mismo tipo de dato.

let variable1 = "10";
let variable2 = variable1 - 5;
console.log(variable2); // 5

Quizás te preguntes cómo JavaScript puede ejecutar operaciones con variables que contengan valores de distintos tipos de datos y que, eventualmente, esas operaciones retornen resultados correctos. Aquí es donde entra en juego el concepto de coerción de datos.

Qué es coerción de datos

Se llama coerción de datos, o coerción de tipos, al proceso mediante el cual JavaScript convierte el valor de una variable de un tipo a otro. Este proceso se realiza al momento de ejecutar una operación donde uno de los operandos contiene un valor de un cierto tipo de datos, pero el otro operando posee un valor de otro tipo.

El intérprete de JavaScript hace la conversión de tipos para adaptarse a las operaciones que defines en tu código. De esta manera, se convierte el valor asignado a una de las variables involucradas en la operación a un valor “equivalente” del tipo de dato del otro operando.

Por medio de la coerción de datos, JavaScript permite operar con valores sin importar si ellos son de distintos tipos de datos. Puedes sumar el valor de una variable de tipo number con un valor string. También puedes comparar un valor de tipo boolean con otro de tipo number. Puedes concatenar un number con un string y formar una nueva cadena de texto. Esto te da flexibilidad al momento de crear tus funciones en JavaScript, pero también ayuda a que tu código sea más legible.

Si bien JavaScript puede aplicar la coerción de datos de manera automática e implícita, también tenemos la posibilidad de definir el tipo de dato al cual queremos convertir cierto valor.

Tipos de coerción

Existen dos formas de coerción de datos: Implícita y Explícita.

La coerción implícita es la que se aplica automáticamente cuando intentas ejecutar una operación con dos valores de distintos tipos. En este caso, JavaScript intenta interpretar los valores y convertir uno de ellos al tipo de dato del otro valor, para que la operación se pueda llevar a cabo. Si bien este método de coerción de datos es directo e imperceptible, dado que no tienes que agregar ningún código extra o llamar a ninguna función, también abre la puerta a posibles comportamientos no deseados en tu aplicación.

Veamos algunos ejemplos de coerción implícita. Dada la siguiente lista de operaciones, intenta determinar cuál será el resultado de cada una de ellas:

4 / "2"
10 + "5"
10 * ""
10 + 4 + "dos"
false + true
"true" == true
true && "0"
"hola" || 2
false || null

Ahora veamos cuales son los resultados correctos, ejecutando las operaciones en la consola del navegador e imprimiendo su resultado:

console.log(4 / "2"); // 2
console.log(10 + "5"); // 105
console.log(10 * ""); // 0
console.log(10 + 4 + "dos"); // 14dos
console.log(false + true); // 1
console.log("true" == true); // false
console.log(true && "0"); // 0
console.log("hola" || 2); // hola
console.log(false || null); // null

¿Acertaste? Con la coerción implícita escribes código más directo, pero corres el riesgo de no obtener los resultados esperados al ejecutar las operaciones. Luego veremos cuál es la lógica de los operadores cuando son usados con valores de distintos tipos.

En cambio, la coerción explícita es el proceso mediante el cual el programador indica explícitamente, usando ciertas funciones provistas por JavaScript, a qué tipo de dato se desea convertir un valor.

Evalúa los siguientes casos:

Boolean(-0) // false
Number("10. ") // 10
Number("") // 0
String(10) // "10"

Podemos decir que la coerción explícita deja en evidencia que queremos convertir un valor a cierto tipo de dato.

Veamos como la coerción de datos se aplica en JavaScript al usar distintos operadores (para la coerción implícita) y funciones de conversión (para la coerción explícita).

Operadores

Según los tipos de datos que involucres en tus operaciones, los operadores pueden aplicar coerción de datos a los valores involucrados. Veamos algunos casos.

  • Operador +

Si utilizas el operador + en una operación donde un valor es de tipo texto y el otro valor es de otro tipo, se aplicará coerción implícita sobre el operando de distinto tipo para devolver una cadena de texto como resultado.

"1" + true // "1true"
10 + "texto" + 5 // "10texto5"
10 + "" // "10"

En cambio, si no hay valores de tipo texto involucrados, el operador + intenta realizar una conversión numérica.

true + false // 1
true + true // 2

Lo mismo pasa cuando el operador + se utiliza como operador unario.

+"100" // 100
+true // 1
  • Operadores lógicos

Si utilizas operadores lógicos como (||, &&, !), JavaScript intentará aplicar la coerción de datos implícita de manera tal que todos los valores de la operación sean considerados booleanos.

true && false // false
false || !false // true
!2 // false
"texto" || 0 // "texto"
2 || "prueba" // 2

Fíjate que los operadores || y && realizan una conversión booleana internamente, pero devuelven el valor original de los operandos, incluso si no son valores booleanos.

  • Operadores de igualdad

Un caso curioso es el del operador de igualdad regular ==. Cuando utilizas este operador, JavaScipt aplica coerción de datos si es que se necesita y luego, cuando ambos valores son del mismo tipo, efectúa la comparación entre ambos. Lo mismo pasa con el operador de diferencia !=.

En cambio, el operador de igualdad estricta === no aplica coerción de datos y directamente compara los valores. Esto es algo que debes tener en cuenta al momento de aplicar lógicas de igualdad en tu código.

"1" == 1 // true
100 != "100" // false
"1" === 1 // false
  • Operadores aritméticos y de comparación

Cuando utilizas operadores aritméticos (+, -, *, /, %) u operadores de comparación (>, <, <=, >=), se aplica coerción implícita sobre los valores de la operación, convirtiéndolos (o intentando convertirlos) a valores numéricos.

"3. " * 2 // 6
"5;" - 1 // NaN
10 / null // Infinity
"10" > 5 // true
true <= 10 // true

Conversión

En cuanto a la coerción explícita, JavaScript provee funciones que se pueden utilizar para convertir (o intentar convertir) un valor de un tipo de dato a otro.

  • Números
Number(false) // 0
Number("10") // 10
Number("") // 0
Number(null) // 0
Number(undefined) // NaN
  • Texto
String(25) // "25"
String(true) // "true"
String("42") // "42"
String(-10.5) // "-10.5"
String(null) // "null"
String(undefined) // "undefined"
  • Boolean
Boolean(null) // false
Boolean(1) // true
Boolean("") // false
Boolean(NaN) // false
Boolean(undefined) // false

Puede que algunas de estas coerciones te resulten extrañas, o al menos los resultados obtenidos no sean tan intuitivos (por ejemplo, la diferencia entre Number(null) y Number(undefined)). Estas definiciones están detalladas en la especificación de ECMAScript.

Conclusión

En este artículo definimos y explicamos el concepto de coerción de datos. Analizamos como JavaScript puede convertir valores de un tipo de dato a otro, de manera implícita y explícita.

Hablamos también de como prestar atención al manejar distintos tipos de datos, para evitar errores y resultados no deseados. Vimos ejemplos de cómo llevar a cabo la coerción y así poder realizar operaciones en tus proyectos sin importar que los valores involucrados sean, originalmente, de distintos tipos de datos.

Artículos Relacionados

¿Quieres mejorar tus habilidades de frontend?