paint-brush
¿Qué es Type Coercion y Type Casting en JavaScript?por@kirmani
6,040 lecturas
6,040 lecturas

¿Qué es Type Coercion y Type Casting en JavaScript?

por Kirmani4m2023/05/25
Read on Terminal Reader

Demasiado Largo; Para Leer

En los lenguajes de programación, los datos se clasifican en varios tipos, como números enteros, cadenas, números de punto flotante y booleanos. La capacidad de convertir o forzar datos de un tipo a otro es esencial para realizar operaciones, manipular datos y garantizar la compatibilidad y coherencia de los datos dentro de un programa. La coerción de tipos hace referencia a la conversión automática de tipos de datos que se produce en JavaScript cuando se utilizan juntos diferentes tipos de datos en una operación.
featured image - ¿Qué es Type Coercion y Type Casting en JavaScript?
Kirmani HackerNoon profile picture
0-item
1-item

La coerción de tipos y la conversión de tipos son conceptos fundamentales en la programación que implican la conversión de datos de un tipo a otro. En los lenguajes de programación, los datos se clasifican en varios tipos, como números enteros, cadenas, números de punto flotante y booleanos. La capacidad de convertir o forzar datos de un tipo a otro es esencial para realizar operaciones, manipular datos y garantizar la compatibilidad y coherencia de los datos dentro de un programa.

Tipo Coerción:

La coerción de tipos hace referencia a la conversión automática de tipos de datos que se produce en JavaScript cuando se utilizan juntos diferentes tipos de datos en una operación. Por ejemplo, si se suman un número y una cadena, JavaScript convertirá automáticamente el número en una cadena para realizar la operación.

 const num = 5; const str = "3"; console.log(num + str); //output: "53"


En el ejemplo anterior, el número 5 se convierte automáticamente en la cadena "5" para que pueda concatenarse con la cadena "3" para dar como resultado "53". Algunos otros ejemplos de coerción de tipo incluyen:


  • Uso de los operadores == o != para la comparación, que realizan una conversión de tipos antes de realizar una comparación
  • El uso del operador unario más ( + ) antes de un valor realizará una conversión de tipo a Número. Sin embargo, el signo + solo puede aparecer una vez y no debe ir seguido de un espacio en blanco.


Por ejemplo:

 const x = "5"; const y = +x; console.log(typeof y); // output: number


A menudo se cree que usar el operador unario + al comienzo de un valor en JavaScript es una forma abreviada de la función Number . Sin embargo, éste no es el caso. Tanto el operador unario + como la función Number utilizan el mismo algoritmo para convertir una cadena en un número, pero existen diferencias sutiles.


Por ejemplo, mientras que + arrojará un TypeError cuando encuentre un BigInt , Number() devolverá el valor numérico de un BigInt pero con una posible pérdida de precisión. La coerción también ocurre si usa el operador de negación unario ( - ) antes de una cadena de la misma manera.


  • Usando la declaración if , que forzará un valor a un valor booleano antes de hacer una comparación

  • Usando el && , || y ?: operadores, que coaccionarán el valor a un booleano antes de realizar la operación.


Tipo de fundición:

Por otro lado, la conversión de tipos se refiere a la conversión explícita de tipos de datos. Esto se hace usando funciones de conversión como Number() , String() , Boolean() y Symbol()

 const str = '5'; const num = Number(str); console.log(num); //output: 5


En este ejemplo, la variable num es del tipo número, pero la convertimos explícitamente en una cadena usando la función String() . Echemos un vistazo a varias funciones de conversión de tipos en JavaScript, junto con un código de ejemplo para demostrar su uso:


  • Number() : la función Number() se utiliza para convertir un valor no numérico en un valor numérico. Por ejemplo, si desea convertir un valor de cadena de "10" en un número, usaría la función Number() de esta manera:
 const x = "5"; const y = x+10 const z= Number(x)+10; console.log(y); // output: 510 console.log(z); // output: 15


  • parseInt() : La función parseInt se usa para convertir un valor en un número entero. Es diferente de Number() y parseFloat() ya que ignora cualquier valor después del decimal. Por ejemplo:
 const intValue = parseInt("3.14"); console.log(floatValue); // Output: 3


  • parseFloat() : la función parseFloat() se usa para convertir un valor de cadena en un número de coma flotante. Es muy similar a Number() excepto en algunos casos. Veamos el siguiente ejemplo para ver cómo parseFloat() se compara con parseInt() y Number() :
 console.log(parseInt('22.5')); // Output: 22 console.log(parseFloat('22.5')); // Output: 22.5 console.log(Number('22.5')); // Output: 22.5 console.log(parseInt('070')); // Output: 70 console.log(parseFloat('070')); // Output: 70 console.log(Number('070')); // Output: 70 console.log(parseInt('1234blue')); // Output: 1234 console.log(parseFloat('1234blue')); // Output: 1234 console.log(Number('1234blue')); // Output: NaN console.log(parseInt('0xFF')); // Output: 255 console.log(parseFloat('0xFF')); // Output: 0 console.log(Number('0xFF')); // Output: 255 console.log(parseInt("10 20 30")); // 10 console.log(parseFloat("10 20 30")); // 10 console.log(Number("10 20 30")); // NaN


  • String() : la función String() se usa para convertir un valor que no es una cadena en un valor de cadena. Los siguientes ejemplos muestran cómo puede usar la función String() para convertir diferentes tipos de valores en cadenas:
 const num = 10; console.log(String(num)); // "10" const bool = true; console.log(String(bool)); // "true" const obj = {name: "John"}; console.log(String(obj)); // "[object Object]" const arr = [1, 2, 3]; console.log(String(arr)); // "1,2,3" const date = new Date(); console.log(String(date)); // "Sun Jan 29 2023 18:52:01 GMT+0000 (Coordinated Universal Time)"


  • Boolean() : la función Boolean se utiliza para convertir un valor no booleano en un valor booleano. Por ejemplo, si desea convertir un valor numérico de 0 en un booleano, usaría Boolean() de esta manera:
 let value = 0; console.log(Boolean(value)); // false value = "hello"; console.log(Boolean(value)); // true value = undefined; console.log(Boolean(value)); // false value = {}; console.log(Boolean(value)); // true value = -1; console.log(Boolean(value)); // true


Eso es todo, amigos. Espero que este artículo te haya ayudado a comprender los entresijos de la conversión de tipos en JavaScript. Ahora tiene una comprensión sólida de cómo convertir sus variables a diferentes tipos explícitamente (conversión de tipos), así como también cómo Javascript lo hace implícitamente (coerción de tipos).


Siga practicando y experimentando con estas funciones para dominarlas. No olvides dar me gusta, compartir, seguir y comentar cualquier pregunta que puedas tener. ¡Feliz codificación!

Consejo profesional:

Utilice la comparación de igualdad estricta === en lugar de la comparación de igualdad abstracta == . Evite confiar en la coerción de tipos implícita de JavaScript, especialmente en operaciones aritméticas, y siempre use la conversión de tipos cuando sea necesario.


También publicado aquí.