🥇Oops, I did it again: fejlsøgning af almindelige fejl i JavaScript

Nogle gange kan det være svært at skrive JavaScript-kode, og nogle bliver endda skræmt, hvilket mange udviklere kender til. Under arbejdet opstår der uundgåeligt fejl, og nogle af dem gentager sig ofte. I denne artikel, der henvender sig til begyndende udviklere, beskrives disse fejl og måder at løse dem på. Til illustrative formål er navne på funktioner, egenskaber og objekter taget fra en populær sang. Alt dette hjælper med hurtigt at huske, hvordan man retter almindelige fejl.

Vi minder om: til alle læsere af 'Habr' — rabat på 10.000 rubler ved tilmelding til et hvilket som helst Skillbox-kursus med rabatkoden 'Habr'.
Skillbox anbefaler: Praktisk kursus «Mobil udvikler PRO».

TypeError: egenskab ikke defineret

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)

Eksemplet med koden ovenfor giver fejlen Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Problemet er, at objektet girl ikke har en egenskab called named, selvom der findes en egenskab called name. Da egenskaben girl.named ikke er defineret, kan man ikke få adgang til den, da den formelt set ikke eksisterer. Men hvis man erstatter girl.named.lucky med girl.name, så fungerer det, og programmet returnerer Lucky.

Man kan læse mere om egenskaberne her.

Måder at rette TypeError-fejl på

TypeError-fejl opstår, når programmøren forsøger at udføre handlinger med data, der ikke svarer til en bestemt type. Som eksempel kan man tage brugen af .bold(), forespørgsel på en egenskab undefined eller kald af en funktion, som faktisk ikke er en funktion.

Så hvis man prøver at kalde girl (), vil der opstå en fejl Uncaught TypeError: yourVariable.bold is not a function og girl is not a function, da der faktisk kaldes et objekt, ikke en funktion.

For at rette fejlene er det nødvendigt at undersøge variablerne. Hvad er girl? Hvad er girl.named? Det kan man finde ud af ved at analysere koden, vise variablerne ved hjælp af console.log med debugger-kommandoen eller ved at kalde variabelnavnet i konsollen. Man skal sikre sig, at man har mulighed for at arbejde med den datatyp, der er indeholdt i variablen. Hvis den ikke passer, skal man ændre den, for eksempel ved at tilføje en betingelse eller en try..catch-blok — og få kontrol over udførelsen af operationen.

Stakoverløb

Hvis man tror på forfatterne af sangen Baby One More Time (det er Britney Spears, ja), betyder ordet hit i denne sammenhæng, at sangeren ønsker, at nogen ringer til hende igen (her er en forklaring af selve sangens kontekst — bemærkning fra oversætteren). Det er meget muligt, at dette ønske fører til et øget antal opkald i virkeligheden. Men i programmering er det rekursion, en metode der kan forårsage en fejl ved stak-overløb.

Fejl ser således ud:

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

Stak-overløb opstår, hvis udvikleren ikke har taget højde for basisværdien i rekursionen, eller hvis koden ikke henviser til den forudsete situation.

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

I dette tilfælde kan stillBelieve aldrig antage værdien false, så der vil hver gang ske et opkald til oneMoreTime, men funktionen vil aldrig afslutte sit udførsel.

Hvis man derimod begynder at håbe på to venner, vil det mindske loneliness (ensomhed), og man kan slippe for at vente på opkaldet.

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

Som eksempel kan man nævne situationer med uendelige løkker, hvor systemet ikke giver en fejlmeddelelse, men siden, hvor JavaScript-koden udføres, blot fryser. Det sker, hvis while-løkken ikke har en afslutningsbetingelse.

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

Problemet kan løses således:

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

Fejlretning af uendelige løkker og rekursioner

Hvis der opstår et problem med en uendelig løkke, skal man i Chrome eller Edge lukke fanen, mens man i Firefox skal lukke browservinduet. Herefter skal man omhyggeligt analysere koden. Hvis man ikke kan finde problemet, bør man tilføje kommandoen debugger i løkken eller funktionen og tjekke værdierne på variablerne. Hvis resultatet ikke svarer til forventningen, skal man erstatte det, hvilket kan gøres nemt.

I eksemplet ovenfor bør debugger tilføjes som den første linje i funktionen eller løkken. Derefter skal debuggervinduet åbnes i Chrome for at analysere variablerne i scope. Med knappen next kan man spore ændringerne for hver iteration. Det er enkelt at gøre, og i de fleste tilfælde er problemet fundet.

For mere information kan du læse her (til Chrome) og her (til Firefox).

Syntaksfejl

En af de mest almindelige fejl i JavaScript er SyntaxError. Disse kan undgås ved hjælp af udvidelser til teksteditorer. For eksempel fremhæver Bracket Pair Colorizer parenteser i koden med forskellige farver, og Prettier eller et lignende analyseværktøj gør det nemt at finde fejl. Den bedste løsning for at mindske sandsynligheden for en SyntaxError er at have minimal indlejring.

Del dine tanker i kommentarerne: Hvad gør du for at undgå fejl eller hurtigt opdage og rette dem?

Skillbox anbefaler:

Toårigt praktisk kursus «Jeg er webudvikler PRO».

Online kursus «C#-udvikler fra bunden».

Praktisk års kursus "PHP-udvikler fra 0 til PRO".

Kilde: habr.com