{"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\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Ups, ma tegin seda j\u00e4lle: JavaScripti levinud vigade t\u00f5rge","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Ups,
\n
\nM\u00f5nikord on JavaScripti koodi kirjutamine keeruline ja vahel isegi hirmutav, mis on tuttav paljudele arendajatele. T\u00f6\u00f6 k\u00e4igus tekivad kindlasti vead, millest osa kordub sageli. Artiklis, mis on m\u00f5eldud algajatele arendajatele, r\u00e4\u00e4gitakse nendest vigadest ja nende lahendamise viisidest. N\u00e4iteks toimi funktsioonide, omaduste ja objektide nimedest populaarse laulu<\/a><\/noindex>. K\u00f5ik see aitab kiiresti meelde j\u00e4tta, kuidas tavalisi vigu parandada.
\n<\/a><\/noindex><\/p>\n

Tuletame meelde:<\/b> k\u00f5igile \u00abHabr\u00bb lugejatele \u2013 10 000 rubla allahindlus igale Skillboxi kursusele, kasutades sooduskoodi \u00abHabr\u00bb.<\/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\u00e4ratud<\/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 koodi n\u00e4ide annab veateate Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Probleem on selles, et objektil girl ei ole omadust named, kuigi on omadus name. Kuna omadus girl.named ei ole m\u00e4\u00e4ratud, ei saa sellele ka ligi p\u00e4\u00e4seda, kuna formaalselt seda ei eksisteeri. Kuid kui asendada girl.named.lucky girl.name'iga, siis k\u00f5ik t\u00f6\u00f6tab ja programm naaseb Lucky.<\/p>\n
Rohkem teavet omaduste kohta on v\u00f5imalik lugeda siit<\/a><\/noindex>.<\/p>\n
TypeErrori t\u00f5rgete k\u00f5rvaldamise meetodid<\/h3>\n
\nTypeErrori vead tekivad, kui programmeerija proovib teha toiminguid andmetega, mis ei vasta m\u00e4\u00e4ratud t\u00fc\u00fcbile. N\u00e4iteks v\u00f5ib tuua .bold() rakendamise, undefined omaduse p\u00e4rimise v\u00f5i funktsiooni sikutamise, mis tegelikult ei ole funktsioon.<\/p>\n
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.<\/p>\n
Vigade k\u00f5rvaldamiseks on oluline uurida muutujaid. Mis on girl? Ent mis on girl.named? Seda saab v\u00e4lja selgitada, kui anal\u00fc\u00fcsida koodi, v\u00e4ljastada muutujaid console.log abil, kasutada k\u00e4su debugger v\u00f5i kutsuda muutuja nimi konsooli. Tuleb veenduda, et on v\u00f5imalik manipuleerida selle muutuja andmet\u00fc\u00fcbiga. Kui see ei sobi, siis muuda seda, n\u00e4iteks lisa tingimus v\u00f5i blokka try..catch \u2014 ja saad kontrolli tegutsemise \u00fcle.<\/p>\n
Stack overflow<\/h3>\n
\nKui usuda Baby One More Time laulu autorite j\u00e4rgi (jah, see on Britney Spears), t\u00e4hendab s\u00f5na hit antud kontekstis lauljanna soovi, et talle helistataks veel kord (see on laulu konteksti selgitus, - t\u00f5lkija m\u00e4rkus). On t\u00e4iesti v\u00f5imalik, et see soov toob kaasa t\u00f5usu telefonik\u00f5nedes reaalses elus. Kuid programmeerimises on see rekursioon, mis suudab tekitada virnade \u00fclet\u00e4itumise viga.<\/p>\n
Vead n\u00e4evad v\u00e4lja j\u00e4rgmiselt:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nVirna \u00fclet\u00e4itumine toimub, kui arendaja ei ole arvesse v\u00f5tnud rekursiooni baasjuhtumit v\u00f5i kui kood ei p\u00f6\u00f6rdu ette n\u00e4htud juhtumi poole.<\/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 false-ks, seega toimub iga kord oneMoreTime kutsumine, kuid funktsiooni t\u00e4itmine ei l\u00f5peta kunagi.<\/p>\n
Kui aga hakata lootma kahe s\u00f5bra peale, v\u00e4hendab see loneliness (\u00fcksildus) 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\u00e4iteks v\u00f5ib tuua juhtumeid l\u00f5pututest ts\u00fcklitest, kus s\u00fcsteem ei v\u00e4ljastata veateadet, vaid leht, kus JavaScripti kood t\u00e4idetakse, lihtsalt hangub. Nii juhtub, kui while ts\u00fcklil pole 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
L\u00f5putute ts\u00fcklite ja rekursioonide t\u00f5rkeotsing<\/h3>\n
\nKui tekib probleem l\u00f5putu ts\u00fckliga, tuleb Chrome'is v\u00f5i Edge'is vahekaart sulgeda ning Firefoxis brauseri aken. P\u00e4rast seda tuleb kood hoolikalt anal\u00fc\u00fcsida. Kui probleemi ei \u00f5nnestu leida, tasub ts\u00fcklisse v\u00f5i funktsiooni lisada k\u00e4sk debugger ja kontrollida muutujaid. Kui tulemus ei vasta ootustele, siis asendame, seda saab kergesti teha.<\/p>\n
\u00dclaltoodud n\u00e4ites tuleks debugging'it lisada funktsiooni v\u00f5i ts\u00fckli esimesele reale. Seej\u00e4rel tuleb avada Chrome'i debugimise vahekaart ja anal\u00fc\u00fcsida muutujaid scope'is. Kasutades nuppu next, saab j\u00e4lgida nende muutumist igas iteratsioonis. K\u00f5ike seda on lihtne teha ja enamikul juhtudel on probleem juba olemas.<\/p>\n
K\u00f5ike seda saab p\u00f5hjalikumalt lugeda siit (Chrome'i jaoks<\/a><\/noindex>) ja siit (Firefoxile<\/a><\/noindex>).<\/p>\n
S\u00fcntaksiviga<\/h3>\n
\n\u00dcks levinumaid vigu JavaScriptis on SyntaxError. Nende v\u00e4ltimiseks aitavad tekstiredaktori laiendused. N\u00e4iteks Bracket Pair Colorizer m\u00e4rgib koodis sulud erinevate v\u00e4rvidega, samas kui Prettier v\u00f5i sarnane anal\u00fc\u00fcsit\u00f6\u00f6riist v\u00f5imaldab kiiresti vigu leida. Parim v\u00f5imalus SyntaxError'i tekkimise t\u00f5en\u00e4osuse v\u00e4hendamiseks on miinimum sisemisus.<\/p>\n
Jagage kommentaarides: mida teie teete, et vigu v\u00e4ltida v\u00f5i neid kiiresti tuvastada ja k\u00f5rvaldada?<\/p>\n
Skillbox soovitab:<\/b><\/p>\n