Conversión de tipos en

Acerca de Conversión de tipos

En JavaScript, los valores pueden ser de distintos tipos. Cambiar el tipo de una variable se puede hacer mediante una conversión de tipos explícita. Además, JavaScript también realiza una coerción de tipos (conversión de tipos implícita) cuando el contexto lo requiere.

Conversión de tipos

JavaScript no tiene una construcción para convertir a un tipo (diferente) como muchos otros lenguajes, pero se pueden usar algunos ayudantes integrados en su lugar. En particular, los objetos globales Boolean, Number y String se pueden usar como funciones para convertir un valor al tipo correspondiente.

Conversión a Boolean (valores truthy/falsy)

Con Boolean(value) puedes convertir cualquier valor a un booleano. ¿Cómo funciona eso?

Hay un conjunto fijo de valores, los llamados valores falsy, que se convierten a false. En particular, false, 0, el string vacío, null, undefined y NaN son falsy. El artículo de MDN sobre «Falsy» muestra la lista completa.

Para todos los demás valores, Boolean devuelve true. Estos valores se llaman truthy.

Boolean(-1);
// => true

Boolean(0);
// => false

Boolean(' ');
// => true

Boolean('');
// => false

Ten en cuenta que, debido a las reglas descritas, '0', 'false', [] y {} son truthy en JavaScript.

Conversión a número

Number(value) se puede usar para convertir un valor a un número. Los espacios en blanco al principio y al final de un string se ignoran, y un string vacío se convierte a 0. Si intentas convertir un valor no primitivo o un string que no representa un número, no se lanzará ningún error. En su lugar, el resultado es NaN (Not-A-Number).

Number('  -12.34  ');
// => -12.34

Number('1,2');
// => NaN

Number('1 2');
// => NaN

Number('');
// => 0

Number('10e3');
// => 10000

Number({ key: '123' });
// => NaN

A continuación puedes ver qué devuelve Number para otros valores primitivos.

Number(true);
// => 1

Number(false);
// => 0

Number(null);
// => 0

Number(undefined);
// => NaN

Ten en cuenta que, a diferencia del último ejemplo, Number() llamado sin ningún argumento está definido para devolver 0.

JavaScript también proporciona las funciones parseInt y parseFloat. Aplican reglas más laxas sobre qué strings se pueden convertir a un número. Por eso, se debería preferir Number como función de conversión para evitar resultados inesperados.

parseInt('123a45');
// => 123

Number('123a45');
// => NaN

Conversión a string

Con String(value) puedes convertir un valor a un string. El resultado es lo que esperarías para valores primitivos.

String(12.34);
// => '12.34'

String(false);
// => 'false'

String(null);
// => 'null'

String(undefined);
// => 'undefined'

Para los arrays, la función String aplicará la conversión a string a cada elemento y unirá los resultados con una coma. También puedes aplicar tú mismo el método join, por ejemplo, para personalizar el separador. Sin embargo, en estos casos null y undefined se convertirán a un string vacío.

String([42, null, true, 'abc']);
// => '42,,true,abc'

Para los objetos, por defecto String devuelve un texto poco útil.

String({ key: 'value' });
// => '[object Object]'

Puedes personalizar el comportamiento de la conversión, por ejemplo, proporcionando un método toString. La sección «Conversión de objeto a primitivo» de javascript.info explica los detalles.

Otra forma común de lograr una mejor representación en string para objetos y arrays es usar la codificación JSON. Puedes convertir a un string con JSON.stringify y de vuelta a un objeto o array con JSON.parse.

const obj = {
  name: 'Gilda Guerra',
  address: {
    city: 'Goiânia',
  },
};

JSON.stringify(obj);
// => '{"name":"Gilda Guerra","address":{"city":"Goiânia"}}'

Coerción de tipos

En ciertos contextos, JavaScript convierte automáticamente un valor a otro tipo de dato antes de evaluar alguna sentencia. Esta conversión implícita se llama coerción de tipos.

Contexto booleano

Cuando un valor se usa en un contexto booleano, JavaScript aplicará las mismas reglas que la función Boolean para convertir el valor de forma implícita.

• Cuando la condición de un condicional no es un booleano, se aplica coerción para determinar si la condición se cumple o no. Lo mismo ocurre con el primer operando del operador ternario ?.

  const num = 0;
  if (num) {
    // this block is NOT executed because 0 is falsy
  }
  
  const name = 'Jin';
  name ? 'name was provided' : 'no name provided';
  // => 'name was provided'
  

• El operando del operador lógico de negación ! también se convierte a booleano antes de aplicar la operación de negación.

  const name = '';
  !name;
  // => true
  

  Un resultado del comportamiento descrito es que !!value tiene el mismo efecto que Boolean(value). Sin embargo, deberías usar Boolean por legibilidad.

• JavaScript también aplica coerción a los operandos de los operadores lógicos Y (&&) y O (||). Pero ten en cuenta que el resultado de la expresión no es necesariamente un booleano. Devuelve uno de los operandos originales (consulta MDN sobre operadores lógicos).

  null || 'hello';
  // => 'hello'
  

Contexto de string

Si se usa el operador de suma + con valores primitivos y uno de los operandos es un string, el otro también se convertirá a un string. La lógica de conversión es la misma que al usar la función String. Después, los dos strings se concatenan.

let name;
'hello ' + name;
// => 'hello undefined'

La misma conversión implícita ocurre con los valores que no son strings y que se incrustan en strings de plantilla.

const degrees = 23;
`It is ${degrees} °C`;
// => 'Is is 23 °C.';

Contexto numérico

Muchos operadores convierten los operandos a números (si es necesario) según la lógica de la función Number explicada antes.

• Operadores aritméticos: + (si no hay ningún string involucrado), -, *, /, %, **
• Operadores unarios de suma y de negación: +, -
• Operadores relacionales (para operandos que no son strings): >, >=, <, <=
• Operadores bit a bit: |, &, ^, ~

Consulta la lista de operadores de MDN para más detalles sobre cualquiera de estos operadores.

Cuando un operando podría ser un string, lo mejor es convertir siempre de forma explícita con la función Number para evitar errores.

'1' + '2';
// => '12'
// addition operator in string context as explained above

Number('1') + Number('2');
// => 3

A veces verás que se usa el operador unario de suma para convertir un string a un número. No se recomienda, porque es mucho más difícil de leer que la llamada explícita a Number.

const value = '42';
+value;
// => 42

Number(value);
// => 42

Usar los operadores de igualdad y desigualdad débiles ==/!= también implica a menudo una conversión implícita a número. Sin embargo, la lógica exacta de estos operadores es bastante complicada (consulta MDN sobre la igualdad débil). Los resultados son difíciles de predecir y a veces no son lo que esperarías. Usa los operadores de igualdad/desigualdad estrictos ===/!== en su lugar para evitar estas conversiones implícitas.