🥇Oops, ik deed het weer: debuggen van veelvoorkomende fouten in JavaScript

Soms is het schrijven van JavaScript-code moeilijk, en soms zelfs beangstigend, wat veel ontwikkelaars bekend voorkomt. Tijdens het werk ontstaan onvermijdelijk fouten, waarvan sommige regelmatig terugkomen. Dit artikel, gericht op beginnende ontwikkelaars, bespreekt deze fouten en manieren om ze op te lossen. Voor de duidelijkheid zijn de namen van functies, eigenschappen en objecten afkomstig uit een populaire song. Dit helpt om snel te onthouden hoe je veelvoorkomende fouten kunt corrigeren.

Ter herinnering: voor alle lezers van «Habr» — een korting van 10.000 roebel bij inschrijving voor elke cursus van Skillbox met de promocode «Habr».
Skillbox raadt aan: Praktische cursus ‘Mobiele Ontwikkelaar PRO’.

TypeError: eigenschap is niet gedefinieerd

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "ster",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "huilt, huilt, huilt in haar eenzame hart"
    }
}
console.log(girl.named.lucky)

Het voorbeeld van de bovenstaande code geeft de foutmelding Uncaught TypeError: Kan eigenschap ‘lucky’ van undefined niet lezen. Het probleem is dat het object girl geen eigenschap named heeft, hoewel het wel een eigenschap name heeft. Aangezien girl.named niet is gedefinieerd, kan er geen toegang toe worden verkregen, omdat het formeel niet bestaat. Maar als je girl.named.lucky vervangt door girl.name, werkt alles en zal het programma Lucky retourneren.

Meer over eigenschappen te weten komen lezen hier.

Manieren om TypeError-fouten op te lossen

TypeError-fouten komen voor wanneer een programmeur probeert handelingen uit te voeren met gegevens die niet overeenkomen met een bepaald type. Een voorbeeld hiervan is het gebruik van .bold(), het opvragen van een eigenschap van undefined of het aanroepen van een functie die eigenlijk geen functie is.

Dus, als je girl() probeert aan te roepen, verschijnt er een foutmelding Uncaught TypeError: yourVariable.bold is not a function en girl is not a function, omdat in feite een object wordt aangeroepen, geen functie.

Om fouten op te lossen, moet je de variabelen onderzoeken. Dus, wat is girl? En wat is girl.named? Dit kan worden achterhaald door de code te analyseren, variabelen weer te geven met console.log, de debugger-opdracht te gebruiken of de naam van de variabele in de console aan te roepen. Zorg ervoor dat je kunt werken met het gegevenstype dat in de variabele zit. Als dit niet geschikt is, verander het dan, bijvoorbeeld door een voorwaarde of een try..catch-blok toe te voegen — en krijg controle over de uitvoering van de operatie.

Stack overflow

Als we de auteurs van het nummer Baby One More Time (ja, dat is Britney Spears) geloven, betekent het woord hit in deze context de wens van de zangeres dat ze nog een keer gebeld wordt (hier is een uitleg van de context van het nummer, opmerking vertaler). Het is heel goed mogelijk dat deze wens leidt tot een toename van het aantal telefoontjes in het echte leven. Maar in programmeren is dit recursie, wat een fout kan veroorzaken als de oproepstack overloopt.

Fouten verschijnen als volgt:

Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)

Een stack overflow gebeurt als de ontwikkelaar de basisgevallen in de recursie niet in overweging heeft genomen of als de code niet naar het voorziene geval verwijst.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

In dit geval kan stillBelieve nooit de waarde false aannemen, waardoor één keer oneMoreTime wordt aangeroepen, maar de uitvoering van de functie niet zal eindigen.

Als we echter op twee vrienden gaan hopen, verlaagt dit de loneliness (eenzaamheid), en kan de oproep dus uitblijven.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Een voorbeeld van dit is oneindige lussen, waarbij het systeem geen foutmelding geeft en de pagina waar de JavaScript-code draait gewoon vastloopt. Dit gebeurt als de while-lus geen eindvoorwaarde heeft.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

Het probleem kan als volgt worden opgelost:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Debugging van oneindige lussen en recursies

Als er een probleem is met een oneindige lus, moet je in Chrome of Edge het tabblad sluiten, en in Firefox het browservenster. Vervolgens moet je de code grondig analyseren. Als je het probleem niet kunt vinden, is het raadzaam om de debugger-commando in de lus of functie toe te voegen en de waarden van variabelen te controleren. Als het resultaat niet aan de verwachtingen voldoet, vervang dit dan; dat kan eenvoudig.

In het voorbeeld hierboven moet de debugger als eerste regel van de functie of de loop worden toegevoegd. Open daarna het debug-tabblad in Chrome en analyseer de variabelen in de scope. Met de next-knop kun je hun verandering bij elke iteratie volgen. Dit alles is gemakkelijk te doen en in de meeste gevallen ligt het probleem binnen handbereik.

Meer informatie hierover is te vinden hier (voor Chrome) en hier (voor Firefox).

Syntaxfout

Een van de meest voorkomende fouten in JavaScript is de SyntaxError. Deze kunnen worden vermeden met extensies voor teksteditors. Zo markeert Bracket Pair Colorizer haakjes in de code met verschillende kleuren, terwijl Prettier of een vergelijkbare analysetool je in staat stelt snel fouten te vinden. De beste manier om de kans op een SyntaxError te verkleinen, is door minimale nesting toe te passen.

Deel in de opmerkingen: wat doe jij om fouten te vermijden of ze snel op te sporen en op te lossen?

Skillbox raadt aan:

Praktische tweejarenopleiding ‘Ik ben een PRO webdeveloper’.

Online cursus «C#-ontwikkelaar vanaf 0».

Praktische jaaropleiding ‘PHP-developer van 0 tot PRO’.

Bron: habr.com