Avanti nella lista degli articoli nella nostra serie JavaScript Error Handling diamo uno sguardo più da vicino l’errore variabile indefinita. L’errore Variabile indefinita viene generato quando viene fatto un riferimento a una variabile o un oggetto in un codice che non esiste o che non rientra nell’ambito del codice in esecuzione.

Di seguito daremo un’occhiata a un paio di esempi specifici che produrranno comunemente un errore variabile indefinito, nonché come catturare e gestire questo errore quando appare. Cominciamo!

Il riepilogo tecnico

• Tutti gli oggetti error JavaScript sono discendenti dell’oggetto Error o di un oggetto ereditato in esso.
• L’oggetto ReferenceError viene ereditato dall’oggetto Error.
• L’errore Variabile indefinita è un tipo specifico di oggetto ReferenceError.

Quando si dovrebbe usarlo?

Quando si è nel profondo del processo di codifica con JavaScript, non è poi così inaudito fare un errore di battitura o semplicemente dimenticare di inizializzare una variabile o un oggetto prima di chiamare detta variabile in seguito lungo la linea. Quando ciò si verifica, JavaScript mostrerà il suo dispiacere lanciando un errore variabile non definito, indicando che l’oggetto di riferimento non è stato definito in precedenza.

Ad esempio, qui stiamo facendo una semplice dichiarazione di tentativo di afferrare il .proprietà di lunghezza del nostro itemvariable indefinito. Stiamo anche usando un semplice blocco try-catch e afferrando qualsiasi ReferenceErrors che potrebbe verificarsi, quindi passandoli a una semplice funzione printError per abbellire l’output dei nostri messaggi di errore:

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); }}

Abbastanza sicuro, come previsto, JavaScript nota che la variabile item non è definita e produce l’errore esplicito della variabile Undefined:

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

Vale la pena notare che a differenza di molti altri errori JavaScript che abbiamo trattato in questa serie, il testo del messaggio di errore variabile non definito non differisce tra i due motori che alimentano Firefox o Chrome.

La soluzione ovvia e semplice a questo particolare errore di variabile indefinita è semplicemente dichiarare la nostra variabile item prima di chiamarla:

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); }}

Ora superiamo l’elemento.lunghezza chiamata senza lanciare errori e quindi produrre la nostra console.log output della lunghezza della nostra stringa articolo:

Length is 3.

Tecnicamente, mentre l’errore Variabile indefinita ha lo scopo di identificare i riferimenti a variabili indefinite, svolge anche un ruolo quando si tenta di fare riferimento a variabili definite, ma al di fuori del contesto dell’ambito corrente in cui viene eseguito il codice.

Ad esempio, qui abbiamo una semplice funzione getFullName, che definisce due variabili al suo interno, FirstName e LastName. Al di fuori dell’ambito di tale funzione, tentiamo di ottenere la proprietà length della variabile 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); }}

Mentre il nome di variabile è tecnicamente definito già, è inaccessibile a noi a questo livello di esecuzione, e quindi una Variabile non definita viene generato un errore:

 ReferenceError: firstName is not defined

In questo caso, la risoluzione è una questione di tirare firstName e lastName variabile al di fuori del campo di applicazione della getFullNamefunction, quindi sono all’interno dello stesso contesto di esecuzione del nostro blocco 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); }}

Come previsto, non vengono generati errori e otteniamo la lunghezza del nome di una variabile di output:

Length is 3.

Per approfondire ancora di più la comprensione di come le applicazioni si occupano di errori JavaScript, controllare il rivoluzionario Airbrake JavaScript error tracking tool per avvisi in tempo reale e la comprensione istantanea di ciò che è andato storto con il codice JavaScript.