Conversión de tipos

En JavaScript, cada valor pertenece a un tipo de dato. Por ejemplo:

console.log(typeof "25"); // string
console.log(typeof 25); // number
console.log(typeof true); // boolean

En muchas ocasiones es necesario transformar un valor de un tipo en otro. A este proceso se le denomina conversión de tipos.

const price = "25";

const numericPrice = Number(price);

console.log(numericPrice); // 25
console.log(typeof numericPrice); // number

JavaScript puede realizar estas conversiones de dos formas:

• Conversión implícita: el propio lenguaje convierte automáticamente un valor cuando una operación necesita otro tipo.
• Conversión explícita: el desarrollador solicita la conversión mediante funciones como Number(), String() o Boolean().

INFO

JavaScript es un lenguaje de tipado dinámico, por lo que una misma variable puede almacenar valores de distintos tipos durante la ejecución del programa.

let value = 10;

value = "Ten";

Conversión implícita

La conversión implícita (también llamada coerción de tipos) ocurre cuando JavaScript transforma automáticamente un valor para poder realizar una operación.

El operador +

El operador + puede comportarse de dos maneras:

• Sumar números.
• Concatenar cadenas.

console.log(5 + 2); // 7
console.log("5" + 2); // "52"
console.log(5 + "2"); // "52"

Si alguno de los operandos es una cadena, normalmente el resultado también será una cadena.

Cuando intervienen varias operaciones, la evaluación se realiza de izquierda a derecha.

console.log(5 + 2 + "3"); // "73"
console.log("5" + 2 + 3); // "523"

TIP

Cuando combines texto y números, utiliza plantillas de cadena.

const total = 10;

console.log(`Total: ${total} €`);

Operadores aritméticos

Los operadores -, *, /, % y ** siempre realizan operaciones numéricas.

console.log("10" - 3); // 7
console.log("10" * 3); // 30
console.log("10" / 2); // 5

Si la cadena no representa un número válido, el resultado es NaN.

console.log("Hello" * 2); // NaN

Comparaciones

Cuando se comparan valores de distintos tipos, JavaScript puede convertirlos automáticamente.

console.log("10" > 5); // true

Sin embargo, si ambos operandos son cadenas, la comparación es alfabética.

console.log("10" > "5"); // false

Igualdad

La igualdad débil (==) convierte los operandos antes de compararlos.

console.log("5" == 5); // true

La igualdad estricta (===) no realiza ninguna conversión.

console.log("5" === 5); // false

WARNING

En la práctica se recomienda utilizar siempre === y !==.

#@# Valores truthy y falsy

Cuando JavaScript evalúa una condición convierte automáticamente el valor en un booleano.

Los únicos valores falsy son:

• false
• 0
• -0
• 0n
• ""
• null
• undefined
• NaN

Todo lo demás es truthy.

console.log(Boolean(0)); // false
console.log(Boolean("")); // false

console.log(Boolean("0")); // true
console.log(Boolean([])); // true
console.log(Boolean({})); // true

El operador ! invierte el resultado y la doble negación (!!) permite obtener el booleano equivalente.

console.log(!0); // true
console.log(!!"Hello"); // true

Conversión explícita

La conversión explícita se produce cuando el desarrollador transforma un valor de un tipo en otro de forma intencionada.

JavaScript proporciona varias funciones para realizar estas conversiones:

• Number()
• String()
• Boolean()
• parseInt()
• parseFloat()

const value = "25";

console.log(Number(value)); // 25
console.log(String(25)); // "25"
console.log(Boolean(value)); // true

A diferencia de la conversión implícita, el código expresa claramente qué tipo de dato se espera obtener.

TIP

Siempre que sea posible, utiliza conversiones explícitas. El código resulta más claro y evita errores difíciles de detectar.

Number()

Number() convierte un valor en un número.

console.log(Number("25")); // 25
console.log(Number("3.14")); // 3.14
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0

Si el valor no puede convertirse completamente en un número, devuelve NaN.

console.log(Number("25px")); // NaN
console.log(Number("Hello")); // NaN

String()

String() convierte cualquier valor en una cadena.

console.log(String(25)); // "25"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
console.log(String(undefined)); // "undefined"

También es habitual convertir valores en cadenas al construir mensajes.

const age = 20;

console.log("Age: " + age);
console.log(`Age: ${age}`);

Las plantillas de cadena suelen ser la opción más legible.

Boolean()

Boolean() convierte cualquier valor en true o false.

console.log(Boolean(1)); // true
console.log(Boolean("Hello")); // true

console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean(null)); // false

Es importante recordar que el contenido de una cadena no se interpreta.

console.log(Boolean("false")); // true
console.log(Boolean("0")); // true

Ambas cadenas contienen caracteres y, por tanto, son truthy.

parseInt()

parseInt() interpreta una cadena como un número entero.

console.log(parseInt("25")); // 25
console.log(parseInt("3.14")); // 3
console.log(parseInt("25px")); // 25

Si la cadena no comienza por un número válido, devuelve NaN.

console.log(parseInt("Hello")); // NaN

Es recomendable indicar siempre la base numérica.

parseInt("25", 10);

parseFloat()

parseFloat() funciona de forma similar, pero conserva la parte decimal.

console.log(parseFloat("3.14")); // 3.14
console.log(parseFloat("3.14px")); // 3.14
console.log(parseFloat("Hello")); // NaN

¿Cuál utilizar?

Función	Uso recomendado
Number()	Convertir una cadena que debe ser completamente numérica.
String()	Convertir cualquier valor en texto.
Boolean()	Obtener el valor lógico equivalente.
parseInt()	Extraer un número entero del inicio de una cadena.
parseFloat()	Extraer un número decimal del inicio de una cadena.

NaN e Infinity

NaN (Not a Number) indica que una operación numérica no ha podido producir un resultado válido.

console.log(Number("Hello")); // NaN
console.log(0 / 0); // NaN

Aunque su nombre pueda resultar extraño, pertenece al tipo number.

console.log(typeof NaN); // "number"

Para comprobar si un valor es NaN, utiliza Number.isNaN().

const value = Number("Hello");

console.log(Number.isNaN(value)); // true

JavaScript también dispone de los valores especiales Infinity y -Infinity, que representan el infinito positivo y negativo.

console.log(1 / 0); // Infinity
console.log(-1 / 0); // -Infinity

Puedes comprobar si un resultado es un número finito mediante Number.isFinite().

console.log(Number.isFinite(25)); // true
console.log(Number.isFinite(Infinity)); // false

Errores frecuentes

Los errores más habituales relacionados con la conversión de tipos son:

• Pensar que + siempre suma.

console.log("5" + 2); // "52"

• Utilizar == en lugar de ===.

console.log("5" == 5); // true
console.log("5" === 5); // false

• Creer que "false" equivale a false.

console.log(Boolean("false")); // true

• Comparar directamente con NaN.

// Incorrecto
value === NaN;

// Correcto
Number.isNaN(value);

Resumen

• JavaScript puede convertir valores de forma implícita o explícita.
• El operador + puede sumar o concatenar.
• Los operadores aritméticos convierten automáticamente cadenas numéricas en números.
• Number(), String() y Boolean() realizan conversiones explícitas.
• parseInt() obtiene un entero y parseFloat() conserva los decimales.
• Los valores truthy y falsy determinan el resultado de las condiciones.
• NaN representa un resultado numérico no válido.
• === y !== son preferibles a == y !=.
• Las conversiones explícitas hacen el código más claro y seguro.

Idea clave

No memorices todas las conversiones posibles. Recuerda únicamente las más habituales y, cuando tengas dudas, realiza la conversión de forma explícita mediante Number(), String() o Boolean().