TypeError: toUpperCase is not a function en JavaScript

¿Te ha sucedido el error «TypeError: toUpperCase is not a function» en JavaScript?, checa por qué pasa y cómo solucionarlo.

El error TypeError: toUpperCase is not a function es un error muy común y sucede porque intentamos llamar el método toUpperCase() anidado a un valor que no es de tipo string (o una cadena de caracteres), por ejemplo:

const cadena = {};
cadena.toUpperCase();

Entonces obtendremos el siguiente error:

Al llamarlo sobre un valor distinto a «string» recibiremos este error, ya sea un objeto, un arreglo, un número o un booleano. Pero, ¿cómo podemos evitar que este error nos suceda?

Gracias a una validación donde podamos corroborar que el tipo es «string» podemos evitar el error. Por ejemplo:

let cadena = null;
// Verificamos que el tipo sea "string"
let resultado = typeof cadena === 'string' ? cadena.toUpperCase() : 'error';
// Debido a que en este caso la variable cadena no es una string, en consola veríamos el mensaje "error":
console.log(resultado);
// Pero pudimos comprobar el tipo de dato por lo que no sucedió el error previamente mencionado.
// Si cambiamos el tipo de dato a una string y manejamos la misma ternaria en la variable resultado:
cadena = 'esta es una cadena';
resultado = typeof cadena === 'string' ? cadena.toUpperCase() : '';
// Ahora veremos 'esta es una cadena' convertida a 'ESTA ES UNA CADENA'
console.log(resultado);

También puedes utilizar el método .toString() para forzar un valor a ser una string cuando este, es posible castearlo (convertirlo), como por ejemplo con un número:

const numero = 1;
const str = numero.toString().toUpperCase();
// Aquí veríamos el mismo 1, ya que no podemos convertir "1" a mayúsculas... 😜
console.log(str);
const booleano = true;
const nuevaStr = booleano.toString().toUpperCase();
// Y aquí, veríamos en consola "TRUE" porque true ahora es una string no un booleano y se convierte cada letra a mayúsculas.

Si por ejemplo intentamos convertir un índice de un objeto a mayúsculas con el método toUpperCase() y el índice no existe, veremos el mismo error, por lo que para estos casos incluso, se puede usar las cadenas opcionales, dejemos un ejemplo:

const objeto = {
   libro: {
      autor: 'John Doe'
   }
};

// Si intentamos convertir un índice inexistente veremos el error:
console.log(objeto.libro.titulo.toUpperCase());
// Pero si usamos los encadenamientos opcionales no tendríamos como tal un error pero sí una respuesta, en este caso "indefinido" o undefined
console.log(objeto?.libro?.titulo?.toUpperCase());
// Ahora, si "agrupamos" el comportamiento y retornamos un valor predefinido:
console.log((objeto?.libro?.titulo || 'valor predefinido').toUpperCase());
// Veríamos en consola "VALOR PREDEFINIDO"

Así que ya sabes, si ves el error TypeError: toUpperCase is not a function ahora sabes cómo evitarlo.

¡Suerte!

Total
0
Shares
Publicación anterior

Usando HTTP Interceptors en Angular

Siguiente Publicación

¿Qué son los Polyfills?

Publicaciones Relacionadas