Ups, jeg gjorde det igen: Fejlretning af almindelige fejl i JavaScript

At skrive JavaScript-kode kan være udfordrende og nogle gange direkte skræmmende, som mange udviklere er bekendt med. Under arbejdet opstår der uundgåeligt fejl, og nogle af dem gentages ofte. Denne artikel, rettet mod nybegyndere, fortæller om disse fejl, og hvordan man løser dem. For overskuelighedens skyld er navnene på funktioner, egenskaber og objekter taget fra populær sang. Alt dette hjælper dig med hurtigt at huske, hvordan du retter almindelige fejl.

Påmindelse: for alle læsere af "Habr" - en rabat på 10 rubler ved tilmelding til ethvert Skillbox-kursus ved hjælp af "Habr"-kampagnekoden.

Skillbox anbefaler: Praktisk kursus "Mobiludvikler PRO".

TypeError: egenskaben er 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)

Eksempelkoden ovenfor giver fejlen Uncaught TypeError: Kan ikke læse egenskaben 'lucky' af undefined. Problemet er, at pigeobjektet ikke har en navngiven egenskab, selvom den har en navnegenskab. Og da ejendommen girl.named ikke er defineret, kan du ikke få adgang til den, fordi den formelt set ikke eksisterer. Men hvis du erstatter girl.named.lucky med pige.navn, så vil alt fungere, og programmet returnerer Lucky.

Du kan lære mere om ejendommene læs her.

Sådan løses TypeErrors

Typefejl opstår, når en programmør forsøger at udføre handlinger på data, der ikke matcher en bestemt type. Eksempler inkluderer brug af .bold(), beder om en udefineret egenskab eller kalder en funktion, der faktisk ikke er en funktion.

Så hvis du prøver at kalde pige(), vil du få fejlen Uncaught TypeError: yourVariable.bold er ikke en funktion, og pigen er ikke en funktion, fordi det faktisk er et objekt, der kaldes, ikke en funktion.

For at eliminere fejl skal du studere variablerne. Så hvad er en pige? Hvad hedder pige. Du kan finde ud af det ved at analysere koden, vise variabler ved hjælp af console.log, debugger-kommandoen eller kalde variabelnavnet i konsollen. Du skal sikre dig, at det er muligt at operere på datatypen indeholdt i variablen. Hvis det ikke passer, så skift det, for eksempel, tilføj en betingelse eller prøv..catch-blok – og få kontrol over udførelsen af ​​operationen.

Stack Overflow

Hvis du tror på forfatterne til teksten til sangen Baby One More Time (det her er Britney Spears, yeah), så betyder ordet hit i denne sammenhæng sangerens ønske om at blive kaldt igen (her er en forklaring på selve konteksten af sang - oversætterens bemærkning). Det kan godt være, at dette ønske vil føre til en stigning i antallet af opkald i det virkelige liv. Men i programmering er dette en rekursion, der kan forårsage en fejl, hvis opkaldsstakken løber over.

Fejlene ser således ud:

Fejl: Ikke mere stakplads (kant)
InternalError: for meget rekursion (Firefox)
RangeError: Maksimal opkaldsstakstørrelse overskredet (Chrome)

Et stack overflow opstår, hvis udvikleren ikke overvejer basissagen i rekursionen, eller hvis koden ikke adresserer det tilsigtede tilfælde.

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

I dette tilfælde kan stillBelieve aldrig være falsk, så oneMoreTime vil blive kaldt hver gang, men funktionen vil aldrig fuldføres.

Hvis du begynder at stole på to venner, vil dette reducere ensomheden, og du behøver ikke vente på et opkald.

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

Et eksempel er tilfælde med uendelige loops, hvor systemet ikke genererer en fejlmeddelelse, men siden, hvor JavaScript-koden udføres, simpelthen fryser. Dette sker, hvis while-løkken ikke har en termineringsbetingelse.

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

Du kan løse problemet som følger:

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

Fejlretning af uendelige loops og rekursioner

Hvis du har et problem med uendelig sløjfe, skal du lukke fanen i Chrome eller Edge og lukke browservinduet i Firefox. Herefter skal du omhyggeligt analysere koden. Hvis du ikke kan finde problemet, er det værd at tilføje en debugger-kommando til din løkke eller funktion og tjekke værdierne af variablerne. Hvis resultatet ikke svarer til det forventede, så erstatter vi det, dette kan nemt gøres.

I eksemplet ovenfor skal debugger tilføjes som den første linje i funktionen eller sløjfen. Derefter skal du åbne fejlfindingsfanen i Chrome og analysere variablerne i omfanget. Ved at bruge den næste knap kan du spore deres ændringer ved hver iteration. Alt dette er nemt at gøre, og i de fleste tilfælde er problemet fundet.

Alt dette kan du læse mere om her (til Chrome) og her (til Firefox).

Syntaks fejl

En af de mest almindelige fejl i JavaScript er SyntaxError. Tekstredigeringsudvidelser hjælper dig med at undgå dem. For eksempel markerer Bracket Pair Colorizer parenteser i koden med forskellige farver, og Prettier eller et lignende analyseværktøj gør det muligt hurtigt at finde fejl. Den bedste mulighed for at reducere sandsynligheden for en SyntaxError er minimal indlejring.

Del i kommentarerne: hvad gør du for at forhindre fejl eller hurtigt opdage og eliminere dem?

Skillbox anbefaler:

• To-årigt praktisk kursus "Jeg er en PRO webudvikler".
• Online kursus "C# udvikler fra 0".
• Praktisk årskursus "PHP-udvikler fra 0 til PRO".

Kilde: www.habr.com