{"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\/lv\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, es atkal to izdar\u012bju: izsekojums izplat\u012bt\u0101kaj\u0101m k\u013c\u016bd\u0101m JavaScript","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nDa\u017ereiz JavaScript koda rakst\u012b\u0161ana var b\u016bt sare\u017e\u0123\u012bta, un da\u017eiem izstr\u0101d\u0101t\u0101jiem t\u0101 pat var rad\u012bt bailes. Darba proces\u0101 neizb\u0113gami rodas k\u013c\u016bdas, un da\u017eas no t\u0101m atk\u0101rtojas diezgan bie\u017ei. \u0160aj\u0101 rakst\u0101, kas paredz\u0113ts ies\u0101c\u0113jiem izstr\u0101d\u0101t\u0101jiem, tiek apskat\u012btas \u0161\u012bs k\u013c\u016bdas un to nov\u0113r\u0161anas veidi. Piem\u0113ri funkciju, \u012bpa\u0161\u012bbu un objektu nosaukumi \u0146emti no popul\u0101ras dziesmas<\/a><\/noindex>. Tas viss pal\u012bdz \u0101tri atcer\u0113ties, k\u0101 labot izplat\u012btas k\u013c\u016bdas.
\n<\/a><\/noindex><\/p>\n

Atg\u0101din\u0101m:<\/b> visiem \u00abHabr\u00bb las\u012bt\u0101jiem \u2014 atlaide 10 000 rub\u013cu re\u0123istr\u0113joties jebkur\u0101 Skillbox kurs\u0101 ar promo kodu \u00abHabr\u00bb.<\/i><\/p>\n

Skillbox iesaka:<\/b> Praktiskais kurss \u00abMobilais izstr\u0101d\u0101t\u0101js PRO\u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: \u012bpa\u0161\u012bba nav defin\u0113ta<\/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
\nIepriek\u0161 nor\u0101d\u012btais koda piem\u0113rs atgrie\u017e k\u013c\u016bdu Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Probl\u0113ma ir t\u0101da, ka objektam girl nav \u012bpa\u0161\u012bbas named, lai gan ir \u012bpa\u0161\u012bba name. T\u0101 k\u0101 \u012bpa\u0161\u012bba girl.named nav defin\u0113ta, pie t\u0101s nevar piek\u013c\u016bt, jo form\u0101li t\u0101 nepast\u0101v. Tom\u0113r, ja aizst\u0101t girl.named.lucky ar girl.name, viss darbosies un programma atgriez\u012bs Lucky.<\/p>\n
Vair\u0101k par \u012bpa\u0161\u012bb\u0101m var izlas\u012bt \u0161eit<\/a><\/noindex>.<\/p>\n
TypeError k\u013c\u016bdu nov\u0113r\u0161anas veidi<\/h3>\n
\nTypeError k\u013c\u016bdas rodas, kad programm\u0113t\u0101js m\u0113\u0123ina veikt darb\u012bbas ar datiem, kas neatbilst noteiktam tipam. Piem\u0113ram, var piemin\u0113t .bold() izmanto\u0161anu, pieprasot undefined \u012bpa\u0161\u012bbu vai izsaucot funkciju, kas faktiski nav funkcija.<\/p>\n
T\u0101d\u0113j\u0101di, ja m\u0113\u0123in\u0101t izsaukt girl(), par\u0101d\u012bsies k\u013c\u016bda Uncaught TypeError: yourVariable.bold is not a function un girl is not a function, jo faktiski tiek izsaukts objekts, nevis funkcija.<\/p>\n
Lai nov\u0113rstu k\u013c\u016bdas, ir j\u0101izp\u0113ta main\u012bgie. T\u0101d\u0113j\u0101di, kas ir girl? Un kas ir girl.named? To var noskaidrot, ja analiz\u0113jam kodu, izmantojam console.log, ievie\u0161am debugger komandu vai izsaucam main\u012bg\u0101 nosaukumu konsol\u0113. J\u0101nodro\u0161ina, ka ir iesp\u0113jams str\u0101d\u0101t ar datu tipu, kas satur main\u012bgais. Ja tas nepiem\u0113rots, mainiet to, piem\u0113ram, pievienojot nosac\u012bjumu vai try..catch bloku \u2014 un ieg\u016bstiet kontroli p\u0101r oper\u0101cijas izpildi.<\/p>\n
Steka p\u0101rpild\u012bjums<\/h3>\n
\nJa tic\u0113t dziesmas Baby One More Time autoriem (tas ir Britney Spears, j\u0101), tad v\u0101rds hit \u0161aj\u0101 kontekst\u0101 noz\u012bm\u0113 dzied\u0101t\u0101jas v\u0113lmi, lai vi\u0146ai piezvana v\u0113lreiz (\u0161eit ir pa\u0161a dziesmas konteksta skaidrojums \u2014 tulkot\u0101ja piez\u012bme). Pavisam iesp\u0113jams, ka \u0161\u012b v\u0113lme rad\u012bs zvanu pieaugumu re\u0101laj\u0101 dz\u012bv\u0113. Bet programm\u0113\u0161an\u0101 tas ir rekursija, kas var izrais\u012bt k\u013c\u016bdu, ja aicin\u0101jumu steks ir p\u0101rpild\u012bts.<\/p>\n
K\u013c\u016bdas izskat\u0101s \u0161\u0101di:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nSteka p\u0101rpl\u016bde notiek, ja izstr\u0101d\u0101t\u0101js nav \u0146\u0113mis v\u0113r\u0101 pamata gad\u012bjumu rekursij\u0101, vai ja kods nepiev\u0113r\u0161as paredz\u0113tajam gad\u012bjumam.<\/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
\n\u0160aj\u0101 gad\u012bjum\u0101 stillBelieve nekad nevar pie\u0146emt v\u0113rt\u012bbu false, t\u0101p\u0113c katru reizi notiks oneMoreTime izsaukums, bet funkcijas izpilde t\u0101 ar\u012b nebeigsies.<\/p>\n
Ja s\u0101ksim cer\u0113t uz diviem draugiem, tas samazin\u0101s loneliness (vienatni), un zvanu varb\u016bt nemaz nevajadz\u0113s gaid\u012bt.<\/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
\nPar piem\u0113ru var min\u0113t bezgal\u012bgos ciklus, kad sist\u0113ma neizdod k\u013c\u016bdas zi\u0146ojumu, bet lapa, kur\u0101 tiek izpild\u012bts JavaScript kods, vienk\u0101r\u0161i sasalst. Tas notiek, ja while ciklam nav pabeig\u0161anas nosac\u012bjuma.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nProbl\u0113mu var atrisin\u0101t \u0161\u0101d\u0101 veid\u0101:<\/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
Bezgala ciklu un rekursiju atk\u013c\u016bdo\u0161ana<\/h3>\n
\nJa rodas probl\u0113ma ar bezgal\u012bgu ciklu, Chrome vai Edge j\u0101aizver cilne, bet Firefox \u2014 p\u0101rl\u016bkprogrammas logs. P\u0113c tam r\u016bp\u012bgi j\u0101p\u0101rbauda kode. Ja probl\u0113mu neizdodas atrast, v\u0113rts pievienot debugger komandu ciklam vai funkcijai un p\u0101rbaud\u012bt main\u012bgo v\u0113rt\u012bbas. Ja rezult\u0101ts neatbilst gaid\u012btajam, to var viegli aizst\u0101t.<\/p>\n
Piem\u0113r\u0101, kas min\u0113ts iepriek\u0161, debugger j\u0101ievieto funkcijas vai cilpas pirmaj\u0101 rind\u0101. P\u0113c tam j\u0101atver debaga cilne Chrome, lai analiz\u0113tu main\u012bg\u0101s scope. Ar next pogu var izsekot to izmai\u0146\u0101m katr\u0101 iter\u0101cij\u0101. To visu izdar\u012bt ir vienk\u0101r\u0161i, un liel\u0101kaj\u0101 da\u013c\u0101 gad\u012bjumu probl\u0113ma ir atrodama.<\/p>\n
S\u012bk\u0101k par to visu var las\u012bt \u0161eit (Chrome<\/a><\/noindex>) un \u0161eit (Firefox<\/a><\/noindex>).<\/p>\n
Sintakses k\u013c\u016bda<\/h3>\n
\nViens no visbie\u017e\u0101kaj\u0101m k\u013c\u016bd\u0101m JavaScript ir SyntaxError. To nov\u0113rst pal\u012bdz\u0113s teksta redaktora papla\u0161in\u0101jumi. T\u0101tad, Bracket Pair Colorizer iez\u012bm\u0113 iekavas kod\u0101 ar da\u017e\u0101d\u0101m kr\u0101s\u0101m, bet Prettier vai l\u012bdz\u012bgs anal\u012bzes r\u012bks \u013cauj \u0101tri atrast k\u013c\u016bdas. Lab\u0101kais variants, lai samazin\u0101tu SyntaxError iesp\u0113jam\u012bbu, ir minim\u0101la iedzi\u013cin\u0101\u0161an\u0101s.<\/p>\n
Dalieties koment\u0101ros: ko j\u016bs dar\u0101t, lai nepie\u013cautu k\u013c\u016bdas vai \u0101tri t\u0101s atkl\u0101tu un nov\u0113rstu?<\/p>\n
Skillbox iesaka:<\/b><\/p>\n