Oops, jeg gjorde det igjen: Feilsøking av vanlige feil i JavaScript

Å skrive JavaScript-kode kan være utfordrende og noen ganger direkte skremmende, som mange utviklere er kjent med. I prosessen med arbeidet oppstår uunngåelig feil, og noen av dem gjentas ofte. Denne artikkelen, rettet mot nybegynnere, snakker om disse feilene og hvordan de kan løses. For klarhetens skyld er navnene på funksjoner, egenskaper og objekter hentet fra populær sang. Alt dette hjelper deg raskt å huske hvordan du retter opp vanlige feil.

Vi minner om: for alle lesere av "Habr" - en rabatt på 10 000 rubler når du melder deg på et hvilket som helst Skillbox-kurs ved å bruke kampanjekoden "Habr".

Skillbox anbefaler: Praktisk kurs "Mobilutvikler PRO".

TypeError: egenskapen er ikke definert

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 gir feilen Uncaught TypeError: Kan ikke lese egenskapen "lucky" for undefined. Problemet er at jenteobjektet ikke har en navngitt egenskap, selv om den har en navneegenskap. Og siden egenskapen girl.named ikke er definert, kan du ikke få tilgang til den, fordi den formelt sett ikke eksisterer. Men hvis du erstatter girl.named.lucky med jente.navn, vil alt fungere og programmet returnerer Lucky.

Du kan lære mer om eiendommene les her.

Måter å løse TypeErrors på

Typefeil oppstår når en programmerer prøver å utføre handlinger på data som ikke samsvarer med en bestemt type. Eksempler inkluderer bruk av .bold(), å spørre etter en udefinert egenskap eller kalle en funksjon som egentlig ikke er en funksjon.

Så hvis du prøver å kalle girl(), vil du få feilen Uncaught TypeError: yourVariable.bold er ikke en funksjon og girl er ikke en funksjon, fordi det faktisk er et objekt som kalles, ikke en funksjon.

For å eliminere feil må du studere variablene. Så hva er en jente? Hva heter jente? Du kan finne ut dette ved å analysere koden, vise variabler ved å bruke console.log, debugger-kommandoen eller kalle variabelnavnet i konsollen. Du må sørge for at det er mulig å operere på datatypen som finnes i variabelen. Hvis det ikke fungerer, endre det – for eksempel legg til en betingelse eller en try..catch-blokk – og få kontroll over utførelsen av operasjonen.

Stack Overflow

Hvis du tror forfatterne av teksten til sangen Baby One More Time (dette er Britney Spears, yeah), så betyr ordet hit i denne sammenhengen sangerens ønske om å bli oppringt igjen (her er en forklaring på selve konteksten til sang - oversetterens notat). Det kan godt hende at dette ønsket vil føre til en økning i antall samtaler i det virkelige liv. Men i programmering er dette en rekursjon som kan forårsake en feil hvis anropsstakken renner over.

Feilene ser slik ut:

Feil: tom for stabelplass (Edge)
InternalError: for mye rekursjon (Firefox)
RangeError: Maksimal anropsstabelstørrelse overskredet (Chrome)

En stackoverflyt oppstår hvis utvikleren ikke vurderer basistilfellet i rekursjonen, eller hvis koden ikke adresserer det tiltenkte tilfellet.

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

I dette tilfellet kan stillBelieve aldri være falsk, så oneMoreTime vil bli kalt hver gang, men funksjonen vil aldri fullføres.

Hvis du begynner å stole på to venner, vil dette redusere ensomheten, og du slipper å vente på en samtale.

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

Et eksempel er tilfeller med uendelige løkker, når systemet ikke genererer en feilmelding, men siden som JavaScript-koden kjøres på, fryser ganske enkelt. Dette skjer 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
}

Feilsøking av uendelige løkker og rekursjoner

Hvis du har et problem med uendelig sløyfe, må du lukke fanen i Chrome eller Edge, og lukke nettleservinduet i Firefox. Etter dette må du analysere koden nøye. Hvis du ikke finner problemet, er det verdt å legge til en debugger-kommando til løkken eller funksjonen din og sjekke verdiene til variablene. Hvis resultatet ikke samsvarer med det som var forventet, så bytter vi det ut, dette kan enkelt gjøres.

I eksemplet ovenfor skal debugger legges til som den første linjen i funksjonen eller løkken. Deretter må du åpne feilsøkingsfanen i Chrome, analysere variablene i omfang. Ved å bruke neste-knappen kan du spore endringene deres ved hver iterasjon. Alt dette er enkelt å gjøre, og i de fleste tilfeller blir problemet funnet.

Du kan lese mer om alt dette her (for Chrome) og her (for Firefox).

Syntaksfeil

En av de vanligste feilene i JavaScript er SyntaxError. Tekstredigeringsutvidelser vil hjelpe deg å unngå dem. For eksempel merker Bracket Pair Colorizer parenteser i koden med forskjellige farger, og Prettier eller et lignende analyseverktøy gjør det mulig å raskt finne feil. Det beste alternativet for å redusere sannsynligheten for en SyntaxError er minimal nesting.

Del i kommentarene: hva gjør du for å forhindre feil eller raskt oppdage og eliminere dem?

Skillbox anbefaler:

• Toårig praktisk kurs "Jeg er en PRO-nettutvikler".
• Online kurs "C#-utvikler fra 0".
• Praktisk årskurs "PHP-utvikler fra 0 til PRO".

Kilde: www.habr.com