Oops, ma tegin seda uuesti: levinud vigade tõrkeotsing JavaScriptis

Mõnikord on JavaScript'i kirjutamine keeruline ja mõnikord isegi hirmutav, mis on paljude arendajate jaoks tuttav. Töötamise käigus tekivad paratamatult vead, millest mõned korduvad sageli. Artiklis, mis on suunatud algajatele arendajatele, käsitletakse neid vigu ja nende lahendamise viise. Näiteks on funktsioonide, omaduste ja objektide nimetused võetud populaarsest laulust. See kõik aitab kiiresti meelde jätta, kuidas leida ja parandada levinud vigu.

Tuletame meelde: kõigile «Habra» lugejatele — 10 000 rubla soodustus, kui registreerite end Skillboxi mis tahes kursusele promokoodi «Habr» abil.

Skillbox soovitab: Praktiline kursus «Mobiilne arendaja PRO».

TypeError: omadus ei ole määratletud

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)

Ülaltoodud koodiline näide annab veateate Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Probleem on selles, et objektiga girl ei ole omadust named, kuid omadus name on olemas. Ja kuna omadus girl.named ei ole määratletud, pole sellele juurde pääsemine võimalik, sest seda ei eksisteeri. Kui asendada girl.named.lucky girl.name'iga, töötab kõik ja programm tagastab Lucky.

Rohkem teavet omaduste kohta leiate lugeda siit.

TypeError vigade parandamise viisid

TypeError vead tekivad siis, kui arendaja üritab teha toiminguid andmetega, mis ei vasta kindlale tüübile. Näitena võib tuua .bold() rakendamise, omaduse undefined pärimise või funktsiooni kutsumise, mis tegelikult ei ole funktsioon.

Nii et kui proovida kutsuda girl (), siis ilmneb viga Uncaught TypeError: yourVariable.bold is not a function ja girl is not a function, kuna tegelikult kutsutakse objekti, mitte funktsiooni.

Veaohtude eemaldamiseks on oluline uurida muutujaid. Niisiis, mis on girl? Ja mis on girl.named? Seda saab teada, kui analüüsida koodi, printida muutujaid console.log abil koos debugging käsuga või küsida muutuja nime konsoolis. Tuleb veenduda, et on võimalik töötada muutuja andmetüübiga. Kui see ei sobi, tuleks seda muuta, näiteks lisada tingimus või try..catch blokk — ja omada kontrolli operatsiooni üle.

Pinu ülevool

Kui usaldada lauljate sõnu laulust Baby One More Time (see on Britney Spears, jah), siis tähendab sõna hit antud kontekstis laulikule, et ta soovib, et talle helistataks veel kord (see on laulu konteksti seletus, — tõlkija märkus). On üsna tõenäoline, et see soov toob kaasa helistamiste arvu suurenemise reaalses elus. Kuid programmeerimises tähistab see rekursiooni, mis võib põhjustada vea, kui kutsumiste pinu ületatakse.

Vead näevad välja järgmised:

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

Pinu ülevool toimub, kui arendaja ei ole arvesse võtnud rekursiooni baast juhtumit või kui kood ei viita ettenähtud juhtumile.

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

Antud juhul ei saa stillBelieve kunagi väärtust false, seega juhtub iga kord, kui toimub kutsumine oneMoreTime, kuid funktsiooni täitmine ei lõpeta kunagi.

Kui aga hakata lootma kahele sõbrale, siis see vähendab loneliness (üksiolu) ja kõnet ei pea ootama.

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

Näitena võib tuua juhtumid piiramatest tsüklitest, kus süsteem ei kuva vigade teateid, vaid leht, millel JavaScripti koodit teostatakse, lihtsalt hangub. Seda juhtub, kui while tsüklitel ei ole lõpetamise tingimust.

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

Probleemi saab lahendada järgmiselt:

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

Piiramatute tsüklite ja rekursioonide tõrkeotsing

Kui ilmneb probleem piiramatute tsüklitega, tuleb Chrome'is või Edges sulgeda vahekaart, ja Firefoxis — brauseri aken. Pärast seda tuleks hoolikalt analüüsida koodi. Kui probleemi ei leitud, tasub lisada tsüklisse või funktsiooni käsu debugger ja kontrollida muutujaid. Kui tulemus ei vasta ootustele, tuleks see asendada, seda on lihtne teha.

Ülaltoodud näites tuleks debugger lisada funktsiooni või tsükli esimesele reale. Siis tuleb avada debug vahekaart Chrome'is, analüüsides muutujaid ulatuses. Nupu next abil saab jälgida nende muutumist iga kord, kui tsükkel toimub. Kõike seda on lihtne teha ja enamasti on probleem leitav.

Rohkem teavet selle kohta saab lugeda siit (Chrome'ile) ja siit (Firefoxile).

Süntaksiviga

Üks levinumaid vigu JavaScriptis on SyntaxError. Nende vältimiseks võivad aidata tekstiredaktori laiendused. Näiteks Bracket Pair Colorizer rõhutab koodi sulgusid erinevate värvidega, ning Prettier või sarnane analüüsitööriist võimaldab kiiresti leida vigu. Parim variant, et vähendada SyntaxErrori tekkimise tõenäosust, on minimaalne süntaksisügavus.

Jagage kommentaarides: mida te teete, et vältida vigu või kiiresti neid tuvastada ja kõrvaldada?

Skillbox soovitab:

• Kaheaastane praktiline kursus „Ma olen PRO veebiarendaja“.
• Veebikursus „C# arendaja algusest peale“.
• Praktiline aastakursus „PHP arendaja algusest PRO-ni“.

Allikas: habr.com