En JavaScript, la manipulación de datos a menudo implica trabajar con diferentes tipos. Comprender cómo se convierten estos tipos, tanto de forma explícita como implícita, es fundamental para escribir código predecible y robusto.
Conversión Explícita de Tipos
La conversión explícita, también conocida como coerción explícita, ocurre cuando un programador intencionalmente transforma un valor de un tipo de dato a otro utilizando funciones o métodos específicos.
Operador typeof
Aunque no es una función de conversión, typeof es esencial para entender el tipo de un dato. Devuelve una cadena que indica el tipo del operando. Los valores posibles incluyen "number", "string", "boolean", "object", "undefined", "function", "bigint" y "symbol".
let valorNumerico = 10;
console.log(typeof valorNumerico); // "number"
let cadenaTexto = "Hola Mundo";
console.log(typeof cadenaTexto); // "string"
let estadoActivo = true;
console.log(typeof estadoActivo); // "boolean"
let arregloNumeros = [1, 2, 3];
console.log(typeof arregloNumeros); // "object"
let objetoSimple = {clave: "valor"};
console.log(typeof objetoSimple); // "object"
let valorNulo = null;
console.log(typeof valorNulo); // "object" (un error histórico en JS)
let valorIndefinido;
console.log(typeof valorIndefinido); // "undefined"
let funcionEjecutar = function() {};
console.log(typeof funcionEjecutar); // "function"
Función Number()
La función Number() se utiliza para convertir cualquier tipo de dato a su representación numérica. Si la convesrión no es posible, devuelve NaN (Not-a-Number).
- Cadenas numéricas se convierten a números.
truese convierte a1,falsea0.nullse convierte a0.undefinedse convierte aNaN.- Cadenas no numéricas se convierten a
NaN.
let strANum = '123';
console.log(Number(strANum), typeof Number(strANum)); // 123, "number"
let boolTrue = true;
console.log(Number(boolTrue)); // 1
let boolFalse = false;
console.log(Number(boolFalse)); // 0
let strInvalida = 'texto';
console.log(Number(strInvalida)); // NaN
let valorNulo = null;
console.log(Number(valorNulo)); // 0
let valorNoDefinido;
console.log(Number(valorNoDefinido)); // NaN
Función parseInt()
Esta función analiza una cadena y devuelve un entero. Puede tomar un segundo argumento opcional, radix, que especifica la base numérica (del 2 al 36) del número en la cadena. Si la cadena no comienza con un número, devuelve NaN.
let cadenaEntera = '456';
console.log(parseInt(cadenaEntera)); // 456
let cadenaFlotante = '456.78';
console.log(parseInt(cadenaFlotante)); // 456 (ignora la parte decimal)
let cadenaConUnidad = '200px';
console.log(parseInt(cadenaConUnidad)); // 200 (parsea hasta el primer carácter no numérico)
let cadenaNoNum = 'abc456';
console.log(parseInt(cadenaNoNum)); // NaN
let numBinario = '101';
console.log(parseInt(numBinario, 2)); // 5 (interpreta '101' como binario)
let numHex = 'A';
console.log(parseInt(numHex, 16)); // 10 (interpreta 'A' como hexadecimal)
Función parseFloat()
Similar a parseInt(), pero analiza una cadena y devuelve un número de punto flotante. Solo considera el primer punto decimal y se detiene al encontrar un carácter no numérico (excepto el primer punto decimal).
let strEntera = '500';
console.log(parseFloat(strEntera)); // 500
let strDecimal = '500.25';
console.log(parseFloat(strDecimal)); // 500.25
let strDecimalInvalida = '500.25.75';
console.log(parseFloat(strDecimalInvalida)); // 500.25 (solo toma el primer decimal)
let strMixta = '500.25metros';
console.log(parseFloat(strMixta)); // 500.25
Función String()
La función String() convierte cualquier valor en su representación de cadena. Es una forma segura de convertir null y undefined a cadenas.
let numToStr = 789;
console.log(String(numToStr), typeof String(numToStr)); // "789", "string"
let boolToStr = false;
console.log(String(boolToStr), typeof String(boolToStr)); // "false", "string"
let objToStr = {id: 1};
console.log(String(objToStr)); // "[object Object]"
let nuloToStr = null;
console.log(String(nuloToStr), typeof String(nuloToStr)); // "null", "string"
let indefinidoToStr;
console.log(String(indefinidoToStr), typeof String(indefinidoToStr)); // "undefined", "string"
Método .toString()
Casi todos los tipos de datos en JavaScript tienen un método .toString(). A diferencia de la función String(), este método no puede ser lamado en null o undefined directamente. Para los números, .toString() puede recibir un argumento radix para convertir el número a una cadena en una base numérica diferente (por ejemplo, base 2 para binario, 16 para hexadecimal).
let numEjemplo = 255;
console.log(numEjemplo.toString()); // "255"
console.log(numEjemplo.toString(16)); // "ff" (hexadecimal)
console.log(numEjemplo.toString(2)); // "11111111" (binario)
let boolEjemplo = true;
console.log(boolEjemplo.toString()); // "true"
let arrEjemplo = [10, 20, 30];
console.log(arrEjemplo.toString()); // "10,20,30"
// console.log(null.toString()); // Error: Cannot read properties of null (reading 'toString')
// console.log(undefined.toString()); // Error: Cannot read properties of undefined (reading 'toString')
Conversión Implícita de Tipos (Coerción Implícita)
La conversión implícita ocurre cuando JavaScript convierte automáticamente los tipos de datos sin una instrucción explícita del programador, generalmente en el contexto de operaciones o comparaciones. El motor de JavaScript decide cómo convertir los valores.
Operadores Aritméticos
La coerción implícita es muy común con los operadores aritméticos.
- El operador de suma (
+) es especial: si uno de los operandos es una cadena, realiza concatenación de cadenas; de lo contrario, intenta la suma numérica. - Otros operadores aritméticos (
-,*,/,%) siempre intentan convertir los operandos a números. - El operador unario
+también convierte el operando a un número.
// Suma (+)
console.log("5" + 2); // "52" (concatenación)
console.log(5 + "2"); // "52" (concatenación)
console.log("Hola" + " Mundo"); // "Hola Mundo" (concatenación)
console.log(1 + 2); // 3 (suma numérica)
// Otros operadores aritméticos
console.log("10" - 5); // 5 (coerción de "10" a 10)
console.log("10" * "2"); // 20 (coerción de ambas cadenas a números)
console.log("10" / "2"); // 5
console.log("10" % 3); // 1
console.log(+"20"); // 20 (operador unario +, convierte a número)
console.log(+"texto"); // NaN
Operadores Relacionales y de Igualdad
Los operadores de comparación también desencadenan coerción de tipos.
- Operadores Relacionales (
>,<,>=,<=): JavaScript intenta convertir los operandos a números. Si ambos son cadenas, realiza una comparación lxeicográfica (basada en el orden Unicode). - Operadores de Igualdad Relajada (
==,!=): Realizan coerción de tipos antes de comparar los valores. Intentan hacer que los tipos coincidan. - Operadores de Igualdad Estricta (
===,!==): No realizan coerción de tipos. Los valores deben tener el mismo tipo y valor para ser considerados iguales.
// Operadores relacionales
console.log(10 > "5"); // true (se convierte "5" a 5)
console.log("10" < "5"); // true (comparación lexicográfica, '1' es menor que '5')
console.log(true > 0); // true (true se convierte a 1)
console.log(false > -1); // true (false se convierte a 0)
// Operadores de igualdad relajada (==)
console.log(1 == "1"); // true (coerción de "1" a 1)
console.log(0 == false); // true (coerción de false a 0)
console.log(null == undefined); // true (caso especial, no hay coerción numérica directa)
console.log(0 == null); // false
console.log(0 == undefined); // false
// Operadores de igualdad estricta (===)
console.log(1 === "1"); // false (tipos diferentes)
console.log(0 === false); // false (tipos diferentes)
console.log(null === undefined); // false (tipos diferentes)
Función isNaN()
La función isNaN() comprueba si un valor es NaN. Antes de realizar la comprobación, intenta convertir su argumento a un número, lo que puede llevar a resultados inesperados.
console.log(isNaN('123')); // false (Number('123') es 123)
console.log(isNaN('cadena')); // true (Number('cadena') es NaN)
console.log(isNaN(null)); // false (Number(null) es 0)
console.log(isNaN(undefined)); // true (Number(undefined) es NaN)
console.log(isNaN(true)); // false (Number(true) es 1)