Truco: Cómo saber si JavaScript concatena o suma:
- Si hay al menos un
string, JavaScript concatena. - Si no hay ningún
string, JavaScript realiza una suma.
Comprender cómo JavaScript maneja la conversión de tipos de datos es fundamental para evitar errores inesperados en tu código. La diferencia entre convertir un valor de forma deliberada o dejar que el lenguaje lo haga por ti puede cambiar por completo el resultado de una operación. A continuación se explican ambas formas de type casting con ejemplos prácticos directos.
¿Cómo funciona el type casting explícito en JavaScript?
El type casting explícito ocurre cuando tú, como desarrollador, decides convertir un tipo de dato a otro de manera intencional. JavaScript ofrece funciones integradas para lograrlo.
¿Cómo convertir un string a número entero con parseInt?
Si tienes un string que contiene un valor numérico, puedes transformarlo con parseInt [0:20]. Por ejemplo:
javascript const stringNumber = "42"; const integer = parseInt(stringNumber); console.log(integer); // 42 console.log(typeof integer); // number
El resultado es 42 y el typeof confirma que ahora es de tipo number.
¿Cómo convertir un string a número decimal con parseFloat?
Para valores decimales se utiliza parseFloat [1:05]:
javascript const stringDecimal = "3.14"; const float = parseFloat(stringDecimal); console.log(float); // 3.14 console.log(typeof float); // number
En JavaScript no existe una distinción formal entre enteros y decimales: ambos comparten el tipo de dato number.
¿Se puede convertir de binario a decimal?
Sí. parseInt acepta un segundo argumento que indica la base numérica [1:45]. Para convertir un número binario a decimal basta con pasar 2 como base:
javascript const binary = "1010"; const decimal = parseInt(binary, 2); console.log(decimal); // 10 console.log(typeof decimal); // number
El valor 1010 en binario equivale a 10 en decimal, y el tipo resultante sigue siendo number.
¿Qué es el type casting implícito y por qué sorprende?
Aquí es donde JavaScript muestra su naturaleza de lenguaje débilmente tipado. El type casting implícito significa que el motor del lenguaje convierte tipos de datos automáticamente sin que tú lo solicites [2:30].
¿Por qué "5" + 3 da "53" y no 8?
Cuando un operando es un string y el otro un número, JavaScript convierte el número a string y concatena en lugar de sumar [2:50]:
javascript const sum = "5" + 3; console.log(sum); // "53"
El operador + cumple doble función: suma números y concatena strings. Al detectar un string, JavaScript elige concatenar.
Este comportamiento también se extiende a los booleanos. Al sumar un string con true, el resultado es una concatenación [3:20]:
javascript const sumWithBoolean = "3" + true; console.log(sumWithBoolean); // "3true"
Pero si ambos operandos son numéricos (o un número con un booleano), JavaScript suma [3:55]:
javascript const sumWithNumber = 2 + true; console.log(sumWithNumber); // 3
El valor true se convierte a 1 y false a 0.
¿Cuál es la regla de oro para saber si JavaScript concatena o suma?
Para verificar este patrón se probaron todas las combinaciones posibles entre string, number y boolean [4:30]:
La regla es sencilla: si alguno de los operandos es un string, JavaScript concatena. En cualquier otro caso, suma [7:10]. Ese es el truco que necesitas recordar para anticipar el comportamiento del operador +.
Por último, un ejercicio rápido refuerza estos conceptos [8:00]:
javascript const number = '596'; const numberConverted = parseInt(number); console.log(typeof number); // string console.log(typeof numberConverted); // number
El primer valor, al estar entre comillas, es un string. El segundo pasa por una conversión explícita con parseInt y se transforma en number. Cuéntame en los comentarios si ya conocías este comportamiento o si te tomó por sorpresa.
Comprender cómo JavaScript maneja la conversión de tipos de datos es fundamental para evitar errores inesperados en tu código. La diferencia entre convertir un valor de forma deliberada o dejar que el lenguaje lo haga por ti puede cambiar por completo el resultado de una operación. A continuación se explican ambas formas de type casting con ejemplos prácticos directos.
El type casting explícito ocurre cuando tú, como desarrollador, decides convertir un tipo de dato a otro de manera intencional. JavaScript ofrece funciones integradas para lograrlo.
Si tienes un string que contiene un valor numérico, puedes transformarlo con parseInt [0:20]. Por ejemplo:
javascript const stringNumber = "42"; const integer = parseInt(stringNumber); console.log(integer); // 42 console.log(typeof integer); // number
El resultado es 42 y el typeof confirma que ahora es de tipo number.
Para valores decimales se utiliza parseFloat [1:05]:
javascript const stringDecimal = "3.14"; const float = parseFloat(stringDecimal); console.log(float); // 3.14 console.log(typeof float); // number
En JavaScript no existe una distinción formal entre enteros y decimales: ambos comparten el tipo de dato number.
Sí. parseInt acepta un segundo argumento que indica la base numérica [1:45]. Para convertir un número binario a decimal basta con pasar 2 como base:
javascript const binary = "1010"; const decimal = parseInt(binary, 2); console.log(decimal); // 10 console.log(typeof decimal); // number
El valor 1010 en binario equivale a 10 en decimal, y el tipo resultante sigue siendo number.
Aquí es donde JavaScript muestra su naturaleza de lenguaje débilmente tipado. El type casting implícito significa que el motor del lenguaje convierte tipos de datos automáticamente sin que tú lo solicites [2:30].
Cuando un operando es un string y el otro un número, JavaScript convierte el número a string y concatena en lugar de sumar [2:50]:
javascript const sum = "5" + 3; console.log(sum); // "53"
El operador + cumple doble función: suma números y concatena strings. Al detectar un string, JavaScript elige concatenar.
Este comportamiento también se extiende a los booleanos. Al sumar un string con true, el resultado es una concatenación [3:20]:
javascript const sumWithBoolean = "3" + true; console.log(sumWithBoolean); // "3true"
Pero si ambos operandos son numéricos (o un número con un booleano), JavaScript suma [3:55]:
javascript const sumWithNumber = 2 + true; console.log(sumWithNumber); // 3
El valor true se convierte a 1 y false a 0.
Para verificar este patrón se probaron todas las combinaciones posibles entre string, number y boolean [4:30]:
La regla es sencilla: si alguno de los operandos es un string, JavaScript concatena. En cualquier otro caso, suma [7:10]. Ese es el truco que necesitas recordar para anticipar el comportamiento del operador +.
Por último, un ejercicio rápido refuerza estos conceptos [8:00]:
javascript const number = '596'; const numberConverted = parseInt(number); console.log(typeof number); // string console.log(typeof numberConverted); // number
El primer valor, al estar entre comillas, es un string. El segundo pasa por una conversión explícita con parseInt y se transforma en number. Cuéntame en los comentarios si ya conocías este comportamiento o si te tomó por sorpresa.
Truco: Cómo saber si JavaScript concatena o suma:
string, JavaScript concatena.string, JavaScript realiza una suma.Respuesta: A. El tipo de value de numero es string ya que se encuentra en comillas simples. Y el tipo de value de numeroConvertido es number ya que cuenta con un E<u>xplicit Type Casting</u> (parseInt) la cual se usa para convertir un value tipo string a un value number int.
Excelente clase, me gustó mucho!👌
Gracias por subir esta clase. Las conversiones son importantes y ampliamente utilizadas. Es bueno saber que platzi lee nuestros comentarios y atiende a nuestras peticiones.
parseInt()
Convierte un argumento de tipo cadena y devuelve un entero de la base especificada.
typeof
El operador typeof devuelve una cadena que indica el tipo del operando sin evaluarlo.
parseFloat()
La función parseFloat() analiza un argumento (si es necesario, lo convierte en una cadena) y devuelve un número de coma flotante.
Donde no hay string JS suma
numero + numero = suma
numero + boleano = suma
boleano + numero = suma
boleano + boleano = suma
Donde hay string concatena(une)
string + string = unir
string + numero = unir
string + boleano = unir
numero + string = unir
boleano + string = unir
Respuesta es: A.
String, number: el String es un tipo de dato que representa texo.
Number: Es un tipo de dato que representa números.
/*
Truco: Cómo saber si JavaScript concatena o suma:
Si hay al menos un string, JavaScript concatena.
Si no hay ningún string, JavaScript realiza una suma.
*/
const stringValue = "10";
const numberValue = 10;
const booleanValue = true;
console.log("----- stringValue -------");
console.log(stringValue + stringValue); // 1010 concatena
console.log(stringValue + numberValue); // 1010 concatena
console.log(stringValue + booleanValue );// 10true concatena
console.log("----- numberValue -------");
console.log(numberValue + stringValue); // 1010 concatena
console.log(numberValue + numberValue); // 20 suma
console.log(numberValue + booleanValue); // 11 suma
console.log("----- booleanValue -------");
console.log(booleanValue + stringValue); // true10 concatena
console.log(booleanValue + numberValue); // 11 suma
console.log(booleanValue + booleanValue); // 2 suma

No entendi porque el 2 a la hora de convertir a binario.
Qué buena forma de abordar este tema. JavaScript es un poco "travieso" a veces, así que vamos a simplificarlo para que lo domines sin complicaciones.
DOMINANDO LA MAGIA DE LOS TIPOS EN JAVASCRIPT
Aquí tienes los 5 puntos clave para entender cómo JavaScript cambia los datos:
parseInt() para números enteros.
parseInt("42") convierte el texto "42" en el número 42.parseFloat().
parseFloat("3.14") te da el número 3.14.parseInt("1010", 2) nos devuelve el número 10."5" + 3 resulta en "53".2 + true se convierte en 3 (porque true vale 1).¿Ves cómo cambia todo según lo que le pongas al lado? ¿Qué crees que pasaría si intentas sumar un número con un texto que no parece número?
Recomendación: Siempre trata de convertir tus datos manualmente antes de operar si no estás seguro de su origen. Por ejemplo:
• Usar
Number(stringValue)
para forzar que sea un número.
• Usar
String(numberValue)
para asegurar que sea texto.