Conversión de tipos en

Acerca de Conversión de tipos

En JavaScript, los valores pueden ser de distintos tipos. El tipo de una variable se puede cambiar 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 dispone de una construcción para convertir a otro tipo como muchos otros lenguajes, pero en su lugar se pueden usar algunos ayudantes integrados. En particular, los objetos globales Boolean, Number y String se pueden usar como funciones para convertir un valor al tipo correspondiente.

Convertir a Boolean (valores truthy/falsy)

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

Hay un conjunto fijo de valores, los llamados valores falsy, que se convierten en 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 denominan 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.

Convertir a número

Number(value) se puede usar para convertir un valor a número. Los espacios en blanco al principio y al final de un string se ignoran, y un string vacío se convierte en 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 con 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 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

Convertir a string

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

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

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

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

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

En el caso de 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 en un string vacío.

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

En el caso de 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 objetos a primitivos» de javascript.info explica los detalles.

Otra forma habitual de conseguir una mejor representación en string para objetos y arrays es usar la codificación JSON. Puedes convertir a 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 instrucción. Esta conversión implícita se denomina coerción de tipos.

Contexto booleano

Cuando se usa un valor en un contexto booleano, JavaScript aplica las mismas reglas que la función Boolean para convertirlo implícitamente.

• Cuando la condición de un condicional no es un valor booleano, se aplica la coerción para determinar si la condición se cumple o no. Lo mismo se aplica al 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 valor booleano antes de aplicar la negación.

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

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

• JavaScript también aplica la coerción a los operandos de los operadores lógicos AND (&&) y OR (||). Pero ten en cuenta que el resultado de la expresión no es necesariamente un valor 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 string. La lógica de la 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 insertan en template strings.

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 anteriormente.

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

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

Cuando un operando podría ser un string, lo mejor es convertir siempre explícitamente 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 número. No es recomendable, 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 no estrictos ==/!= 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 igualdad no estricta). Los resultados son difíciles de predecir y, a veces, no son lo que esperarías. Usa mejor los operadores de igualdad y desigualdad estrictas ===/!== para evitar estas conversiones implícitas.