Oeps, ik heb het weer gedaan: veelvoorkomende fouten in JavaScript opsporen

Oeps, ik heb het weer gedaan: veelvoorkomende fouten in JavaScript opsporen

Het schrijven van JavaScript-code kan een uitdaging zijn en soms ronduit intimiderend, zoals veel ontwikkelaars bekend zijn. Tijdens het werk ontstaan ​​​​er onvermijdelijk fouten, en sommige worden vaak herhaald. Dit artikel, gericht op beginnende ontwikkelaars, gaat over deze fouten en hoe je ze kunt oplossen. Voor de duidelijkheid zijn de namen van functies, eigenschappen en objecten overgenomen populair liedje. Dit alles helpt u snel te onthouden hoe u veelvoorkomende fouten kunt corrigeren.

Herinnering: voor alle lezers van "Habr" - een korting van 10 roebel bij inschrijving voor een Skillbox-cursus met behulp van de promotiecode "Habr".

Skillbox beveelt aan: Praktische cursus "Mobiele ontwikkelaar PRO".

TypeError: eigenschap is niet gedefinieerd

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

De bovenstaande voorbeeldcode genereert de fout Uncaught TypeError: Kan de eigenschap 'lucky' van undefined niet lezen. Het probleem is dat het girl-object geen benoemde eigenschap heeft, hoewel het wel een naameigenschap heeft. En aangezien de eigenschap girl.named niet is gedefinieerd, kunt u er geen toegang toe krijgen, omdat deze formeel niet bestaat. Maar als je girl.named.lucky vervangt door girl.name, dan zal alles werken en zal het programma Lucky retourneren.

U kunt meer te weten komen over de eigenschappen lees hier.

Hoe typefouten op te lossen

TypeErrors treden op wanneer een programmeur acties probeert uit te voeren op gegevens die niet overeenkomen met een specifiek type. Voorbeelden hiervan zijn het gebruik van .bold(), het vragen om een ​​ongedefinieerde eigenschap of het aanroepen van een functie die eigenlijk geen functie is.

Dus als je girl() probeert aan te roepen, krijg je de foutmelding Uncaught TypeError: yourVariable.bold is geen functie en girl is geen functie, omdat het eigenlijk een object is dat wordt aangeroepen, en geen functie.

Om fouten te elimineren, moet je de variabelen bestuderen. Dus, wat is een meisje? Wat is de naam van het meisje? U kunt hierachter komen door de code te analyseren, variabelen weer te geven met behulp van console.log, de debugger-opdracht, of door de naam van de variabele in de console aan te roepen. U moet ervoor zorgen dat het mogelijk is om te werken met het gegevenstype in de variabele. Als het niet past, verander het dan, voeg bijvoorbeeld een voorwaarde toe of probeer het blok..catch - en krijg controle over de uitvoering van de bewerking.

Stapeloverloop

Als je de auteurs van de tekst van het nummer Baby One More Time (dit is Britney Spears, ja) gelooft, dan betekent het woord hit in deze context het verlangen van de zanger om opnieuw gebeld te worden (hier is een uitleg van de context zelf van het nummer). lied - notitie van de vertaler). Het kan heel goed zijn dat deze wens zal leiden tot een toename van het aantal oproepen in het echte leven. Maar bij het programmeren is dit een recursie die een fout kan veroorzaken als de call-stack overloopt.

De fouten zien er als volgt uit:

Fout: onvoldoende stapelruimte (rand)
InternalError: te veel recursie (Firefox)
RangeError: maximale call stack-grootte overschreden (Chrome)

Er treedt een stackoverflow op als de ontwikkelaar het basisscenario niet in aanmerking neemt in de recursie, of als de code het beoogde geval niet aanpakt.

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

In dit geval kan stillBelieve nooit false zijn, dus wordt oneMoreTime elke keer aangeroepen, maar de functie zal nooit worden voltooid.

Als je afhankelijk wordt van twee vrienden, zal dit de eenzaamheid verminderen en hoef je niet op een telefoontje te wachten.

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

Een voorbeeld zijn gevallen met oneindige lussen, waarbij het systeem geen foutmelding genereert, maar de pagina waarop de JavaScript-code wordt uitgevoerd eenvoudigweg vastloopt. Dit gebeurt als de while-lus geen beëindigingsvoorwaarde heeft.

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

Je kunt het probleem als volgt oplossen:

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

Foutopsporing in oneindige lussen en recursies

Als u een probleem met een oneindige lus heeft, moet u het tabblad in Chrome of Edge sluiten en het browservenster in Firefox sluiten. Hierna moet je de code zorgvuldig analyseren. Als u het probleem niet kunt vinden, is het de moeite waard om een ​​debugger-opdracht aan uw lus of functie toe te voegen en de waarden van de variabelen te controleren. Mocht het resultaat niet overeenkomen met wat er verwacht werd, dan vervangen wij deze, dit kan eenvoudig.

In het bovenstaande voorbeeld moet debugger worden toegevoegd als de eerste regel van de functie of lus. Vervolgens moet u het tabblad Foutopsporing in Chrome openen en de variabelen binnen het bereik analyseren. Met de knop Volgende kunt u hun wijzigingen bij elke iteratie volgen. Dit alles is gemakkelijk te doen en in de meeste gevallen wordt het probleem gevonden.

Hier kun je meer over dit alles lezen (voor Chroom) en hier (voor Firefox).

Syntax error

Een van de meest voorkomende fouten in JavaScript is SyntaxError. Met teksteditor-extensies kunt u deze vermijden. Bracket Pair Colorizer markeert bijvoorbeeld haakjes in de code met verschillende kleuren, en Prettier of een soortgelijke analysetool maakt het mogelijk om snel fouten te vinden. De beste optie om de kans op een SyntaxError te verkleinen is minimaal nesten.

Deel in de reacties: wat doe jij om fouten te voorkomen of snel op te sporen en te elimineren?

Skillbox beveelt aan:

Bron: www.habr.com

Voeg een reactie