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

Noen ganger er det vanskelig å skrive JavaScript-kode, og noen ganger kan det til og med være skremmende, noe mange utviklere kjenner seg igjen i. I løpet av arbeidet oppstår det uunngåelig feil, og noen av dem gjentar seg ofte. Denne artikkelen, rettet mot nybegynnere, beskriver disse feilene og måtene å løse dem på. For oversiktlighetens skyld er navnene på funksjoner, egenskaper og objekter hentet fra en populær sang. Alt dette hjelper til med å huske raskt hvordan man retter vanlige feil.

Vi minner om: for alle lesere av «Habr» — 10 000 rubler rabatt ved påmelding til hvilket som helst Skillbox-kurs med kampanjekoden «Habr».

Skillbox anbefaler: Praktisk kursus «Mobiludvikler PRO».

TypeError: egenskap 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)

Eksemplet med koden ovenfor gir feilen Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Problemet er at objektet girl ikke har egenskapen named, selv om det har egenskapen name. Siden egenskapen girl.named ikke er definert, kan man ikke få tilgang til den, fordi den formelt ikke eksisterer. Men hvis man erstatter girl.named.lucky med girl.name, vil alt fungere, og programmet vil returnere Lucky.

Les mer om egenskaper kan man lese her.

Metoder for å rette TypeError-feil

TypeError-feil oppstår når programmereren prøver å utføre handlinger med data som ikke samsvarer med en bestemt type. Et eksempel kan være bruk av .bold(), forespørsel om en egenskap som er undefined, eller kall av en funksjon som faktisk ikke er en funksjon.

Så hvis du prøver å kalle girl (), vil det oppstå en feil Uncaught TypeError: yourVariable.bold is not a function og girl is not a function, ettersom det faktisk er objektet som kalles, ikke en funksjon.

For å rette opp feilene må man studere variablene. Så, hva er girl? Og hva er girl.named? Dette kan man finne ut ved å analysere koden, skrive ut variablene med console.log, bruke debugger-kommandoen eller ved å kalle navnet på variabelen i konsollen. Man må sørge for at man har muligheten til å operere med datatypen som er lagret i variabelen. Hvis det ikke passer, endre det, for eksempel ved å legge til en betingelse eller en try..catch-blokk — og få kontroll over utførelsen av operasjonen.

Stakkoverløp

Hvis man tror på forfatterne av sangen Baby One More Time (ja, det er Britney Spears), så betyr ordet hit i denne sammenhengen at sangeren ønsker å bli oppringt igjen (her er en forklaring på sangens kontekst, — kommentar fra oversetteren). Det er fullt mulig at dette ønsket vil føre til en økning i antall oppringninger i det virkelige liv. Men i programmering er dette rekursjon, noe som kan forårsake en feil hvis stakken av oppringninger blir overfylt.

Feilene ser slik ut:

Feil: Ut av stakkplass (Edge)
InternalError: for mye rekursjon (Firefox)
RangeError: Maksimal stakkstørrelse overskredet (Chrome)

Stakkoverføring skjer hvis utvikleren ikke vurderer basisfallet i rekursjonen, eller hvis koden ikke håndterer det tiltenkte tilfellet.

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

I dette tilfellet kan never stillBelieve ta verdien false, så oneMoreTime vil bli kalt hver gang, men funksjonen vil aldri fullføres.

Hvis man imidlertid begynner å håpe på to venner, vil dette redusere loneliness (alenehet), og oppringningen vil ikke være nødvendig.

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

Et eksempel kan være situasjoner med uendelige løkker, hvor systemet ikke viser en feilmelding, men siden som kjører JavaScript-koden bare henger. Dette skjer hvis while-løkken ikke har en avslutningsbetingelse.

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

Problemet kan løses på følgende måte:

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 det oppstår et problem med en uendelig løkke, må man i Chrome eller Edge lukke fanen, mens man i Firefox må lukke nettleservinduet. Deretter må koden analyseres nøye. Hvis man ikke finner problemet, kan man legge til kommandoen debugger i løkken eller funksjonen for å sjekke verdien av variablene. Hvis resultatet ikke samsvarer med forventet, bør man endre det, og dette kan gjøres enkelt.

I eksempelet som er angitt ovenfor, bør debugger legges til som den første linjen i funksjonen eller løkken. Deretter må du åpne debuggervinduet i Chrome for å analysere variablene i scope. Ved hjelp av knappen next kan du spore deres endring med hver iterasjon. Å gjøre alt dette er enkelt, og i de fleste tilfeller er problemet funnet.

Mer om dette kan leses her (for Chrome) og her (for Firefox).

Syntaxfeil

En av de vanligste feilene i JavaScript er SyntaxError. For å unngå dem kan hjelpe utvidelser for tekstredigering. Slik markerer Bracket Pair Colorizer klammer i koden med forskjellige farger, og Prettier eller et lignende analyseverktøy lar deg raskt finne feil. Den beste løsningen for å redusere sjansen for SyntaxError er minimal innrykk.

Del i kommentarfeltet: hva gjør du for å unngå feil eller raskt oppdage og rette dem?

Skillbox anbefaler:

• Toårig praktisk kurs «Jeg er WEB-utvikler PRO».
• Nettkurs «C#-utvikler fra 0».
• Praktisk ettårig kurs «PHP-utvikler fra 0 til PRO».

Kilde: habr.com