{"id":32769,"date":"2019-10-31T21:48:48","date_gmt":"2019-10-31T18:48:48","guid":{"rendered":"https:\/\/prohoster.info\/blog\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript\/"},"modified":"2019-10-31T21:48:48","modified_gmt":"2019-10-31T18:48:48","slug":"oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","status":"publish","type":"post","link":"https:\/\/prohoster.info\/et\/blog\/novosti-interneta\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, ma tegin seda uuesti: levinud vigade t\u00f5rkeotsing JavaScriptis","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nM\u00f5nikord on JavaScript'i kirjutamine keeruline ja m\u00f5nikord isegi hirmutav, mis on paljude arendajate jaoks tuttav. T\u00f6\u00f6tamise k\u00e4igus tekivad paratamatult vead, millest m\u00f5ned korduvad sageli. Artiklis, mis on suunatud algajatele arendajatele, k\u00e4sitletakse neid vigu ja nende lahendamise viise. N\u00e4iteks on funktsioonide, omaduste ja objektide nimetused v\u00f5etud populaarsest laulust<\/a><\/noindex>. See k\u00f5ik aitab kiiresti meelde j\u00e4tta, kuidas leida ja parandada levinud vigu.
\n<\/a><\/noindex><\/p>\n

Tuletame meelde:<\/b> k\u00f5igile \u00abHabra\u00bb lugejatele \u2014 10 000 rubla soodustus, kui registreerite end Skillboxi mis tahes kursusele promokoodi \u00abHabr\u00bb abil.<\/i><\/p>\n

Skillbox soovitab:<\/b> Praktiline kursus \u00abMobiilne arendaja PRO\u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: omadus ei ole m\u00e4\u00e4ratletud<\/h3>\n

<\/p>\n

let girl = {\n    name: \"Lucky\",\n    location: \"Hollywood\",\n    profession: \"star\",\n    thingsMissingInHerLife: true,\n    lovely: true,\n    cry: function() {\n        return \"cry, cry, cries in her lonely heart\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\n\u00dclaltoodud koodiline n\u00e4ide annab veateate Uncaught TypeError: Cannot read property \u2018lucky\u2019 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\u00e4\u00e4ratletud, pole sellele juurde p\u00e4\u00e4semine v\u00f5imalik, sest seda ei eksisteeri. Kui asendada girl.named.lucky girl.name'iga, t\u00f6\u00f6tab k\u00f5ik ja programm tagastab Lucky.<\/p>\n
Rohkem teavet omaduste kohta leiate lugeda siit<\/a><\/noindex>.<\/p>\n
TypeError vigade parandamise viisid<\/h3>\n
\nTypeError vead tekivad siis, kui arendaja \u00fcritab teha toiminguid andmetega, mis ei vasta kindlale t\u00fc\u00fcbile. N\u00e4itena v\u00f5ib tuua .bold() rakendamise, omaduse undefined p\u00e4rimise v\u00f5i funktsiooni kutsumise, mis tegelikult ei ole funktsioon.<\/p>\n
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.<\/p>\n
Veaohtude eemaldamiseks on oluline uurida muutujaid. Niisiis, mis on girl? Ja mis on girl.named? Seda saab teada, kui anal\u00fc\u00fcsida koodi, printida muutujaid console.log abil koos debugging k\u00e4suga v\u00f5i k\u00fcsida muutuja nime konsoolis. Tuleb veenduda, et on v\u00f5imalik t\u00f6\u00f6tada muutuja andmet\u00fc\u00fcbiga. Kui see ei sobi, tuleks seda muuta, n\u00e4iteks lisada tingimus v\u00f5i try..catch blokk \u2014 ja omada kontrolli operatsiooni \u00fcle.<\/p>\n
Pinu \u00fclevool<\/h3>\n
\nKui usaldada lauljate s\u00f5nu laulust Baby One More Time (see on Britney Spears, jah), siis t\u00e4hendab s\u00f5na hit antud kontekstis laulikule, et ta soovib, et talle helistataks veel kord (see on laulu konteksti seletus, \u2014 t\u00f5lkija m\u00e4rkus). On \u00fcsna t\u00f5en\u00e4oline, et see soov toob kaasa helistamiste arvu suurenemise reaalses elus. Kuid programmeerimises t\u00e4histab see rekursiooni, mis v\u00f5ib p\u00f5hjustada vea, kui kutsumiste pinu \u00fcletatakse.<\/p>\n
Vead n\u00e4evad v\u00e4lja j\u00e4rgmised:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nPinu \u00fclevool toimub, kui arendaja ei ole arvesse v\u00f5tnud rekursiooni baast juhtumit v\u00f5i kui kood ei viita etten\u00e4htud juhtumile.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness++\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nAntud juhul ei saa stillBelieve kunagi v\u00e4\u00e4rtust false, seega juhtub iga kord, kui toimub kutsumine oneMoreTime, kuid funktsiooni t\u00e4itmine ei l\u00f5peta kunagi.<\/p>\n
Kui aga hakata lootma kahele s\u00f5brale, siis see v\u00e4hendab loneliness (\u00fcksiolu) ja k\u00f5net ei pea ootama.<\/p>\n
function oneMoreTime(stillBelieve=true, loneliness=0) {\n    if (!stillBelieve && loneliness < 0) return\n    loneliness--\n    stillBelieve = false\n    return oneMoreTime(stillBelieve, loneliness)\n}<\/code><\/pre>\n
\nN\u00e4itena v\u00f5ib tuua juhtumid piiramatest ts\u00fcklitest, kus s\u00fcsteem ei kuva vigade teateid, vaid leht, millel JavaScripti koodit teostatakse, lihtsalt hangub. Seda juhtub, kui while ts\u00fcklitel ei ole l\u00f5petamise tingimust.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nProbleemi saab lahendada j\u00e4rgmiselt:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Piiramatute ts\u00fcklite ja rekursioonide t\u00f5rkeotsing<\/h3>\n
\nKui ilmneb probleem piiramatute ts\u00fcklitega, tuleb Chrome'is v\u00f5i Edges sulgeda vahekaart, ja Firefoxis \u2014 brauseri aken. P\u00e4rast seda tuleks hoolikalt anal\u00fc\u00fcsida koodi. Kui probleemi ei leitud, tasub lisada ts\u00fcklisse v\u00f5i funktsiooni k\u00e4su debugger ja kontrollida muutujaid. Kui tulemus ei vasta ootustele, tuleks see asendada, seda on lihtne teha.<\/p>\n
\u00dclaltoodud n\u00e4ites tuleks debugger lisada funktsiooni v\u00f5i ts\u00fckli esimesele reale. Siis tuleb avada debug vahekaart Chrome'is, anal\u00fc\u00fcsides muutujaid ulatuses. Nupu next abil saab j\u00e4lgida nende muutumist iga kord, kui ts\u00fckkel toimub. K\u00f5ike seda on lihtne teha ja enamasti on probleem leitav.<\/p>\n
Rohkem teavet selle kohta saab lugeda siit (Chrome'ile<\/a><\/noindex>) ja siit (Firefoxile<\/a><\/noindex>).<\/p>\n
S\u00fcntaksiviga<\/h3>\n
\n\u00dcks levinumaid vigu JavaScriptis on SyntaxError. Nende v\u00e4ltimiseks v\u00f5ivad aidata tekstiredaktori laiendused. N\u00e4iteks Bracket Pair Colorizer r\u00f5hutab koodi sulgusid erinevate v\u00e4rvidega, ning Prettier v\u00f5i sarnane anal\u00fc\u00fcsit\u00f6\u00f6riist v\u00f5imaldab kiiresti leida vigu. Parim variant, et v\u00e4hendada SyntaxErrori tekkimise t\u00f5en\u00e4osust, on minimaalne s\u00fcntaksis\u00fcgavus.<\/p>\n
Jagage kommentaarides: mida te teete, et v\u00e4ltida vigu v\u00f5i kiiresti neid tuvastada ja k\u00f5rvaldada?<\/p>\n
Skillbox soovitab:<\/b><\/p>\n