A continuación en la lista de artículos de nuestra serie de Manejo de errores de JavaScript, echamos un vistazo más de cerca a la variable de error Indefinido. El error de Variable Indefinida se genera cuando se hace una referencia a una variable u objeto en un código que no existe o que está fuera del ámbito del código de ejecución.

A continuación, echaremos un vistazo a un par de ejemplos específicos que comúnmente producirán un error Variable Indefinido, así como a cómo detectar y tratar este error cuando aparezca. ¡Empecemos!

El resumen técnico

• Todos los objetos de error de JavaScript son descendientes del objeto de error o de un objeto heredado del mismo.
• El objeto ReferenceError se hereda del objeto Error.
• El error de variable indefinida es un tipo específico de objeto ReferenceError.

¿Cuándo Debe Usarlo?

Cuando está en el proceso de codificar con JavaScript, no es tan inaudito hacer un error tipográfico o simplemente olvidar inicializar una variable u objeto antes de llamar a dicha variable más adelante. Cuando esto ocurre, JavaScript mostrará su desagrado lanzando un error de variable Indefinida, indicando que el objeto al que se hace referencia no estaba definido previamente.

Por ejemplo, aquí estamos haciendo una declaración simple de intentar agarrar el .propiedad length de nuestro elemento indefinido variable. También estamos usando un simple bloque try-catch y agarrando cualquier error de referencia que pueda ocurrir, luego pasándolos a una función printError simple para embellecer la salida de nuestros mensajes de error:

var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Calling an undefined `item `variable var length = item.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}

Como es de esperar, JavaScript nota que la variable item no está definida y produce el error explícito de variable indefinida:

// FIREFOX ReferenceError: item is not defined// CHROME ReferenceError: item is not defined

Vale la pena señalar que, a diferencia de muchos otros errores de JavaScript que hemos cubierto en esta serie, el texto de mensaje de error variable Indefinida no difiere entre los dos motores que alimentan Firefox o Chrome.

La solución obvia y simple para este error de variable Indefinida en particular es simplemente declarar nuestra variable de elemento antes de llamarla:

var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Defining `item` first var item = "Bob"; var length = item.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}

Ahora pasamos el elemento.longitud de llamada sin lanzar ningún error y así producir nuestra consola.salida de registro de la longitud de nuestra cadena de elementos:

Length is 3.

Técnicamente, mientras que el error de variable indefinida está destinado a identificar referencias a variables indefinidas, también juega un papel cuando se intenta hacer referencia a variables definidas, pero que están fuera del contexto de alcance actual donde se está ejecutando el código.

Por ejemplo, aquí tenemos una función getFullName simple, que define dos variables dentro de sí misma, FirstName y LastName. Fuera del ámbito de esa función, intentamos obtener la propiedad length de la variable FirstName:

var getFullName = function() { var firstName = "Bob"; var lastName = "Smith"; return `${firstName} ${lastName}`;}var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Accessing `firstName` from outside its scope var length = firstName.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}

Mientras que la variable FirstName ya está técnicamente definida, es inaccesible para nosotros en este nivel de ejecución, y por lo tanto se genera un error de variable indefinida:

 ReferenceError: firstName is not defined

En este caso, la resolución es una cuestión de extraer la variable FirstName y LastName fuera del alcance de la función Getfullnam, por lo que están dentro de la misma contexto de ejecución como nuestro bloque try-catch:

// 4// Declaring the variables outside our functionvar firstName = "Bob";var lastName = "Smith";var getFullName = function() { return `${firstName} ${lastName}`;}var printError = function(error, explicit) { console.log(` ${error.name}: ${error.message}`);}try { // Accessing `firstName` is now allowed var length = firstName.length; console.log(`Length is ${length}.`)} catch (e) { if (e instanceof ReferenceError) { printError(e, true); } else { printError(e, false); }}

Como se esperaba, no se producen errores y obtenemos la longitud de la variable FirstName como salida:

Length is 3.

Para profundizar aún más en la comprensión de cómo sus aplicaciones lidian con los errores de JavaScript, consulte la revolucionaria herramienta de seguimiento de errores de JavaScript de Airbrake para obtener alertas en tiempo real y una visión instantánea de lo que salió mal con su código JavaScript.