Ups, ma tegin seda jälle: JavaScripti levinud vigade tõrge

Mõnikord on JavaScripti koodi kirjutamine keeruline ja vahel isegi hirmutav, mis on tuttav paljudele arendajatele. Töö käigus tekivad kindlasti vead, millest osa kordub sageli. Artiklis, mis on mõeldud algajatele arendajatele, räägitakse nendest vigadest ja nende lahendamise viisidest. Näiteks toimi funktsioonide, omaduste ja objektide nimedest populaarse laulu. Kõik see aitab kiiresti meelde jätta, kuidas tavalisi vigu parandada.

Tuletame meelde: kõigile «Habr» lugejatele – 10 000 rubla allahindlus igale Skillboxi kursusele, kasutades sooduskoodi «Habr».

Skillbox soovitab: Praktiline kursus «Mobiilne arendaja PRO».

TypeError: omadus ei ole määratud

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 koodi näide annab veateate Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Probleem on selles, et objektil girl ei ole omadust named, kuigi on omadus name. Kuna omadus girl.named ei ole määratud, ei saa sellele ka ligi pääseda, kuna formaalselt seda ei eksisteeri. Kuid kui asendada girl.named.lucky girl.name'iga, siis kõik töötab ja programm naaseb Lucky.

Rohkem teavet omaduste kohta on võimalik lugeda siit.

TypeErrori tõrgete kõrvaldamise meetodid

TypeErrori vead tekivad, kui programmeerija proovib teha toiminguid andmetega, mis ei vasta määratud tüübile. Näiteks võib tuua .bold() rakendamise, undefined omaduse pärimise või funktsiooni sikutamise, mis tegelikult ei ole funktsioon.

Seega, 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.

Vigade kõrvaldamiseks on oluline uurida muutujaid. Mis on girl? Ent mis on girl.named? Seda saab välja selgitada, kui analüüsida koodi, väljastada muutujaid console.log abil, kasutada käsu debugger või kutsuda muutuja nimi konsooli. Tuleb veenduda, et on võimalik manipuleerida selle muutuja andmetüübiga. Kui see ei sobi, siis muuda seda, näiteks lisa tingimus või blokka try..catch — ja saad kontrolli tegutsemise üle.

Stack overflow

Kui usuda Baby One More Time laulu autorite järgi (jah, see on Britney Spears), tähendab sõna hit antud kontekstis lauljanna soovi, et talle helistataks veel kord (see on laulu konteksti selgitus, - tõlkija märkus). On täiesti võimalik, et see soov toob kaasa tõusu telefonikõnedes reaalses elus. Kuid programmeerimises on see rekursioon, mis suudab tekitada virnade ületäitumise viga.

Vead näevad välja järgmiselt:

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

Virna ületäitumine toimub, kui arendaja ei ole arvesse võtnud rekursiooni baasjuhtumit või kui kood ei pöördu ette nähtud juhtumi poole.

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

Antud juhul ei saa stillBelieve kunagi false-ks, seega toimub iga kord oneMoreTime kutsumine, kuid funktsiooni täitmine ei lõpeta kunagi.

Kui aga hakata lootma kahe sõbra peale, vähendab see loneliness (üksildus) 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äiteks võib tuua juhtumeid lõpututest tsüklitest, kus süsteem ei väljastata veateadet, vaid leht, kus JavaScripti kood täidetakse, lihtsalt hangub. Nii juhtub, kui while tsüklil pole 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
}

Lõputute tsüklite ja rekursioonide tõrkeotsing

Kui tekib probleem lõputu tsükliga, tuleb Chrome'is või Edge'is vahekaart sulgeda ning Firefoxis brauseri aken. Pärast seda tuleb kood hoolikalt analüüsida. Kui probleemi ei õnnestu leida, tasub tsüklisse või funktsiooni lisada käsk debugger ja kontrollida muutujaid. Kui tulemus ei vasta ootustele, siis asendame, seda saab kergesti teha.

Ülaltoodud näites tuleks debugging'it lisada funktsiooni või tsükli esimesele reale. Seejärel tuleb avada Chrome'i debugimise vahekaart ja analüüsida muutujaid scope'is. Kasutades nuppu next, saab jälgida nende muutumist igas iteratsioonis. Kõike seda on lihtne teha ja enamikul juhtudel on probleem juba olemas.

Kõike seda saab põhjalikumalt lugeda siit (Chrome'i jaoks) ja siit (Firefoxile).

Süntaksiviga

Üks levinumaid vigu JavaScriptis on SyntaxError. Nende vältimiseks aitavad tekstiredaktori laiendused. Näiteks Bracket Pair Colorizer märgib koodis sulud erinevate värvidega, samas kui Prettier või sarnane analüüsitööriist võimaldab kiiresti vigu leida. Parim võimalus SyntaxError'i tekkimise tõenäosuse vähendamiseks on miinimum sisemisus.

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

Skillbox soovitab:

• Kaks aastat praktilist kursust „Mina olen PRO veebiarendaja“.
• Veebikursus C# arendaja 0-st.
• Praktiline aastakursus «PHP-arendaja 0-st PRO-ni».

Allikas: habr.com