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!