Conversiones de Tipos en JavaScript

JavaScript es un lenguaje de tipado dinámico: una variable puede contener un string en un momento y un número en el siguiente, y nunca se declara el tipo de un valor por adelantado. Debido a esta flexibilidad, los valores constantemente necesitan moverse entre tipos — un número se convierte en texto para mostrarlo, el texto de un campo de formulario se convierte en número para un cálculo, un object se evalúa como "verdadero" dentro de un if. Estas conversiones ocurren de dos maneras: explícitamente, cuando tú mismo llamas a una función como String() o Number(), e implícitamente (también llamada coerción), cuando el lenguaje convierte un valor automáticamente para ajustarlo a la operación. Este capítulo cubre ambas formas, las reglas exactas para cada tipo destino y las sorpresas que confunden a casi todos en algún momento.

Si aún no has leído sobre los tipos de datos disponibles, conviene repasarlos primero — las conversiones solo tienen sentido cuando sabes entre qué tipos estás convirtiendo.

Las Tres Conversiones

Casi todas las conversiones en JavaScript apuntan a uno de tres tipos primitivos: string, número o boolean. No existe una operación general de "convertir al tipo X"; en cambio, cada tipo destino tiene sus propias reglas. Veremos cada uno por turno y luego examinaremos cuándo el lenguaje las aplica automáticamente.

Conversión a String

La conversión a string transforma un valor en su forma textual. Ocurre explícitamente con la función String(), e implícitamente cuando un valor se combina con un string en una concatenación o se interpola en una plantilla literal.

String(123);        // "123"
String(true);       // "true"
String(null);       // "null"
String(undefined);  // "undefined"
`Value: ${42}`;     // "Value: 42"

Las reglas son intuitivas para los primitivos — el valor se representa exactamente como esperarías leerlo. Ten en cuenta que null y undefined se convierten en el texto literal "null" y "undefined", no en una cadena vacía.

Los objects y arrays son más interesantes. Un array se convierte en sus elementos unidos por comas, y un object simple se convierte en el famoso e inútil "[object Object]":

Así, un array vacío se convierte a una cadena vacía, y null/undefined dentro de un array se representan como posiciones vacías (por eso [null, 5] da ",5"). El resultado "[object Object]" para objects es la razón por la que se usa JSON.stringify(obj) cuando realmente quieres leer el contenido de un object.

Conversión Numérica

La conversión numérica transforma un valor en un número. La forma explícita es la función Number(); implícitamente ocurre con el operador unario más (+valor) y con la mayoría de los operadores aritméticos y de comparación.

Vale la pena memorizar las reglas porque no siempre son obvias:

Algunos de estos son notorios. Number(null) es 0 pero Number(undefined) es NaN — los dos valores "vacíos" se comportan de forma diferente. Un string vacío también se convierte en 0, no en NaN. Las cadenas se recortan de los espacios circundantes primero y luego se analizan; si queda algo no numérico, el resultado es NaN (que significa "Not a Number").

Unario Plus

El operador unario plus es la forma más corta de forzar una conversión numérica. Colocado antes de un valor, +valor hace exactamente lo mismo que Number(valor):

+"42";       // 42
+"";         // 0
+true;       // 1
+"abc";      // NaN

Es práctico pero fácil de malinterpretar, así que resérvalo para lugares donde la intención sea clara (como +event.target.value al leer un campo numérico de un formulario).

parseInt y parseFloat vs Number

Number() es estricto: el string completo debe ser un número válido, o se obtiene NaN. Las funciones parseInt() y parseFloat() son más tolerantes — leen desde el inicio del string y se detienen en el primer carácter que no encaja, devolviendo lo que han analizado hasta ese punto.

Dos precauciones con parseInt:

• Devuelve NaN solo si el string no comienza con un número analizable — "px12" falla, pero "12px" tiene éxito con 12.
• Pasa siempre el radix (base) como segundo argumento para evitar sorpresas: parseInt("08", 10) da 8 de forma fiable. Sin él, los motores modernos usan base 10 por defecto, pero ser explícito elimina cualquier duda y documenta tu intención.

parseInt("FF", 16);  // 255  (hexadecimal)
parseInt("101", 2);  // 5    (binary)
parseInt("08", 10);  // 8    (decimal, explicit radix)

Usa Number() (o +) cuando quieras validar que un valor completo es numérico, y parseInt/parseFloat cuando deliberadamente quieras extraer un número del inicio de una cadena más larga, como "24px" de CSS.

Conversión a Boolean

La conversión a boolean responde una sola pregunta: ¿es este valor "verdadero" (truthy) o "falso" (falsy)? Ocurre explícitamente con Boolean() e implícitamente en cualquier lugar donde se evalúa una condición — dentro de if, while, el ternario ? y los operadores lógicos.

La regla es sorprendentemente simple porque la lista de valores falsy es corta y fija. Estos ocho valores se convierten a false:

false
0
-0
0n        // BigInt zero
""        // empty string
null
undefined
NaN

Todo lo demás es truthy. Ese "todo lo demás" incluye algunos valores que sorprenden a los recién llegados:

El string "0" es truthy porque es un string no vacío — su contenido no importa. Del mismo modo, "false" es un string no vacío perfectamente normal y se convierte a true. Y un array vacío [] o un object vacío {} es truthy, aunque "parezca" vacío. Memoriza la lista de falsy; si un valor no está en ella, es truthy.

Coerción Implícita

Hasta ahora hemos llamado nosotros mismos a las funciones de conversión. Sin embargo, la mayoría de las conversiones en el mundo real son implícitas — el lenguaje coerciona los valores para que una operación funcione. El truco está en saber qué tipo destino espera cada contexto.

Aritmética y la Peculiaridad de +

Todos los operadores aritméticos coercionan sus operandos a números — excepto +, que está sobrecargado. Si cualquiera de los operandos de + es un string, + se convierte en concatenación de strings; de lo contrario, suma números. Todos los demás operadores (-, *, /, %) siempre convierten a números.

La línea 1 + 2 + '3' muestra por qué importa el orden: + es asociativo por la izquierda, por lo que 1 + 2 se ejecuta primero como números (3), luego 3 + '3' encuentra un string y concatena a "33". Esta única regla — "+ con cualquier string concatena, todo lo demás convierte a número" — explica una gran parte de la confusión de los principiantes.

Condiciones y Lógica

En cualquier contexto boolean — if, while, ?: y los operadores lógicos && / || — el valor de control pasa por la conversión boolean usando la lista de falsy anterior.

if ("0") {
  // runs: "0" is a non-empty string, therefore truthy
}

if (0 || "fallback") {
  // "fallback" is returned: 0 is falsy, so || moves to the next value
}

Comparaciones

Los operadores de igualdad hacen su propia coerción, y el operador débil == en particular tiene reglas lo suficientemente sutiles como para merecer su propio capítulo. La versión corta: prefiere el estricto ===, que nunca coerciona. El conjunto completo de sorpresas (como que [] == ![] sea true) se cubre en operadores de comparación.

Conversión de Object a Primitivo

Cuando un object se usa donde se espera un primitivo (concatenación, aritmética, un mensaje de alerta), JavaScript lo convierte primero a un primitivo. Lo hace llamando al método Symbol.toPrimitive del object si existe; de lo contrario recurre a valueOf() y toString(), eligiendo el orden según si se "sugiere" un número o un string. Por eso un object simple se convierte en "[object Object]" y un array en un string unido por comas — eso proviene del toString() por defecto. Puedes personalizar el resultado definiendo estos métodos en tus propios objects, pero para el código cotidiano es suficiente saber que la conversión existe y usar JSON.stringify() cuando quieras un object legible.

Errores Comunes

Un puñado de resultados de conversión explican la mayoría de los momentos "espera, ¿qué?". Ten presentes estos:

Analizando los más extraños:

• +[] es 0. La conversión numérica primero transforma el array en un string (""), luego la cadena vacía se convierte en 0.
• +{} es NaN. El object se convierte en "[object Object]", que no es un número válido, por lo que se convierte en NaN.
• "" + 1 es "1". Como + encontró un string, concatenó en lugar de sumar.
• [] + [] es "". Cada array se convierte a string como cadena vacía, y "" + "" es "".

Estos no son errores — siguen las reglas anteriores exactamente. Solo parecen extraños porque dos conversiones diferentes se encadenan en una sola expresión.

Resumen

• JavaScript convierte valores a string, número o boolean — explícitamente mediante String(), Number(), Boolean(), o implícitamente mediante coerción.
• String: los primitivos se representan como su texto; [1,2,3] se convierte en "1,2,3", [] en "", y un object simple en "[object Object]".
• Número: null es 0, undefined es NaN, "" es 0; las cadenas se recortan y luego se analizan estrictamente. Usa +valor como abreviatura y parseInt/parseFloat (con un radix) para el análisis tolerante desde el inicio del string.
• Boolean: solo false, 0, -0, 0n, "", null, undefined y NaN son falsy; todo lo demás — incluido "0", "false", [] y {} — es truthy.
• + concatena cuando cualquiera de los lados es un string; todos los demás operadores aritméticos convierten a número.
• Ante la duda, convierte explícitamente y compara con ===.

Usarás estas reglas constantemente al trabajar con números, strings y datos de usuario almacenados en variables.

Pon a Prueba tu Conocimiento