volgende op de lijst met artikelen in onze JavaScript Error Handling serie nemen we een kijkje op de ongedefinieerde variabele fout. De ongedefinieerde variabele fout wordt gegooid wanneer een verwijzing naar een variabele of object wordt gemaakt in code die ofwel niet bestaat, of buiten het bereik van de uitvoerende code valt.

hieronder zullen we een kijkje nemen op een paar specifieke voorbeelden die gewoonlijk een ongedefinieerde variabele fout zullen produceren, evenals hoe deze fout te vangen en om te gaan wanneer deze verschijnt. Laten we beginnen!

the Technical Rundown

• alle JavaScript-foutobjecten zijn afstammelingen van het Foutobject, of een overgenomen object daarin.
• het ReferenceError object wordt overgenomen van het Error object.
• de Undefined Variable error is een specifiek type ReferenceError object.

Wanneer moet u het gebruiken?

als je diep in het coderingsproces zit met JavaScript, is het niet zo ongehoord om een typefout te maken of gewoon te vergeten om een variabele of object te initialiseren voordat je die variabele later aanroept. Wanneer dit gebeurt, JavaScript zal zijn ongenoegen tonen door het gooien van een ongedefinieerde variabele fout, wat aangeeft dat het object waarnaar wordt verwezen niet eerder was gedefinieerd.

bijvoorbeeld, hier maken we een eenvoudig statement van een poging om de te grijpen .lengte eigenschap van onze ongedefinieerde itemvariable. We gebruiken ook een eenvoudig try-catch-blok en grijpen alle Referentiefouten die kunnen optreden, en geven ze vervolgens door aan een eenvoudige printerrorfunctie om de uitvoer van onze foutmeldingen te verfraaien:

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

zeker genoeg, zoals verwacht, merkt JavaScript dat de item variabele niet gedefinieerd is, en produceert de expliciete ongedefinieerde variabele fout:

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

Het is vermeldenswaard dat in tegenstelling tot veel andere JavaScript fouten die we hebben behandeld in deze serie, de ongedefinieerde variabele foutmelding tekst niet verschilt tussen de twee motoren die Firefox of Chrome voeden.

de voor de hand liggende en eenvoudige oplossing voor deze specifieke ongedefinieerde variabele fout is om gewoon onze item variabele te declareren voordat we het aanroepen:

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

nu komen we voorbij het item.lengte oproep zonder fouten te gooien en zo produceren onze console.log uitvoer van de lengte van onze item string:

Length is 3.

technisch gezien, hoewel de fout van de ongedefinieerde variabele bedoeld is om verwijzingen naar ongedefinieerde variabelen te identificeren, speelt het ook een rol wanneer wordt geprobeerd te verwijzen naar variabelen die zijn gedefinieerd, maar buiten de huidige scope context vallen waar de code wordt uitgevoerd.

bijvoorbeeld, hier hebben we een eenvoudige getFullName functie, die twee variabelen in zichzelf definieert, voornaam en achternaam. Buiten het bereik van die functie, proberen we de lengte eigenschap van de voornaam variabele te krijgen:

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

Tijdens de voornaam variabele is technisch al gedefinieerd, is het niet toegankelijk voor ons is op dit niveau van de uitvoering, en dus een niet-gedefinieerde Variabele fout is opgetreden:

 ReferenceError: firstName is not defined

In dit geval, de resolutie is een kwestie van trekken aan de voornaam en achternaam variabele buiten de reikwijdte van de getFullNamefunction, ze zijn dus in dezelfde context van uitvoering als onze try-catch blok:

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

Zoals verwacht, geen fouten gemaakt worden en krijgen we de lengte van de voornaam variabele uitgang:

Length is 3.

om nog dieper in te gaan op hoe uw applicaties omgaan met JavaScript-fouten, kijk dan op de revolutionaire Airbrake JavaScript error tracking tool voor real-time waarschuwingen en onmiddellijk inzicht in wat er mis ging met uw JavaScript-code.