{"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\/sl\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, ponovno sem to storil: odpravljanje pogostih napak v JavaScriptu","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nPisanje JavaScript koda ponekad mo\u017ee biti izazovno, a ponekad \u010dak i zastra\u0161uju\u0107e, \u0161to je poznato mnogim programerima. Tokom rada neizbe\u017eno se javljaju gre\u0161ke, a neke od njih se \u010desto ponavljaju. U \u010dlanku namenjenom po\u010detnicima obja\u0161njavaju se te gre\u0161ke i na\u010dini njihovog re\u0161avanja. Funkcije, svojstva i objekti su uzeti iz popularne pesme<\/a><\/noindex>. Sve to poma\u017ee da se brzo zapamti kako ispraviti rasprostranjene gre\u0161ke.
\n<\/a><\/noindex><\/p>\n

Opominjamo:<\/b> za vse bralce \u00bbHabra\u00ab \u2014 popust 10 000 rubljev ob vpisu na kateri koli te\u010daj Skillbox s promo kodo \u00bbHabr\u00ab.<\/i><\/p>\n

Skillbox priporo\u010da:<\/b> Prakti\u010dni te\u010daj Mobilni razvijalec PRO<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: svojstvo nije definisano<\/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 \"pla\u010de, pla\u010de, pla\u010de u svom usamljenom srcu\"\n    }\n}\nconsole.log(girl.named.lucky)<\/code><\/pre>\n
\nPrimer koda iznad bac\u0301e gre\u0161ku Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Problem je u tome \u0161to objekat girl nema svojstvo named, iako ima svojstvo name. Po\u0161to svojstvo girl.named nije definisano, ne mo\u017ee se ni pristupiti tom svojstvu jer formalno ne postoji. Ali ako zamenite girl.named.lucky sa girl.name, sve \u0107e raditi i program \u0107e vratiti Lucky.<\/p>\n
Vi\u0161e o svojstvima mo\u017eete pro\u010ditati ovde<\/a><\/noindex>.<\/p>\n
Na\u010dini za re\u0161avanje TypeError gre\u0161aka<\/h3>\n
\nTypeError gre\u0161ke se pojavljuju kada programer poku\u0161ava da izvr\u0161i akcije sa podacima koji ne odgovaraju odre\u0111enom tipu. Kao primer mo\u017ee se uzeti primena .bold(), pozivanje svojstva undefined ili pozivanje funkcije koja zapravo nije funkcija.<\/p>\n
Na primer, ako poku\u0161ate da pozovete girl (), javlja se gre\u0161ka Uncaught TypeError: yourVariable.bold is not a function i girl is not a function, jer se zapravo poziva objekat, a ne funkcija.<\/p>\n
Da biste uklonili gre\u0161ke, potrebno je istra\u017eiti promenljive. Dakle, \u0161ta je girl? A \u0161ta je girl.named? To mo\u017eete saznati ako analizirate kod, ispi\u0161ete promenljive pomo\u0107u console.log, komande debugger ili pozivanjem imena promenljive u konzoli. Treba da se uverite da je mogu\u0107e raditi sa tipom podataka koji se nalazi u promenljivoj. Ako ne odgovara, izmenite ga, na primer, dodajte uslov ili blok try..catch - i dobijete kontrolu nad izvr\u0161enjem operacije.<\/p>\n
Preoptere\u0107enje steka<\/h3>\n
\n\u010ce verjamemo avtorjem pesmi Baby One More Time (to je Britney Spears, ja), beseda hit v tem kontekstu pomeni \u017eeljo pevke, da bi ji ponovno poklicali (tukaj je pojasnilo samega konteksta pesmi \u2014 op. prev.). Zelo verjetno je, da bo ta \u017eelja pove\u010dala \u0161tevilo klicev v resni\u010dnem \u017eivljenju. V programiranju pa to predstavlja rekurzijo, ki lahko povzro\u010di napako v primeru prelivanja sklada klicev.<\/p>\n
Napake izgledajo takole:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nPrelivanje sklada se zgodi, \u010de razvijalec ni upo\u0161teval osnovnega primera pri rekurziji ali pa \u010de koda ne naslovi predvidenega primera.<\/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
\nV tem primeru stillBelieve nikoli ne more prevzeti vrednosti false, zato se bo vsakokrat zgodil klic oneMoreTime, a izvajanje funkcije se ne bo nikoli kon\u010dalo.<\/p>\n
\u010ce pa za\u010dnemo upati na dva prijatelja, to zmanj\u0161a loneliness (osamljenost), in klic morda ne bo potreben.<\/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
\nKot primer lahko navedemo primere z neskon\u010dnimi zankami, kjer sistem ne izda sporo\u010dila o napaki, ampak stran, na kateri se izvaja JavaScript koda, preprosto zmrzne. To se zgodi, \u010de zanka while nima pogoja za zaklju\u010dek.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Continue dancing until the world ends\")\n}<\/code><\/pre>\n
\nProblem lahko re\u0161imo na naslednji na\u010din:<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Continue dancing until the world ends\")\n  worldEnded = true\n}<\/code><\/pre>\n
<\/p>\n
Odpravljanje neskon\u010dnih zank in rekurzij<\/h3>\n
\n\u010ce se pojavi te\u017eava z neskon\u010dno zanko, je v Chrome ali Edge treba zapreti zavihek, v Firefoxu pa okno brskalnika. Nato je treba natan\u010dno analizirati kodo. \u010ce te\u017eave ne najdete, dodajte ukaz debugger v zanko ali funkcijo in preverite vrednosti spremenljivk. \u010ce rezultat ni tak\u0161en, kot je pri\u010dakovano, ga lahko enostavno zamenjate.<\/p>\n
V primeru, ki je naveden zgoraj, je debugger potrebno dodati kot prvo vrstico funkcije ali zanke. Nato je treba odpreti zavihek za razhro\u0161\u010devanje v Chromu in analizirati spremenljivke v obsegu. S pomo\u010djo gumba next lahko spremljate njihove spremembe pri vsaki iteraciji. Vse to je enostavno narediti, te\u017eave pa se v ve\u010dini primerov nahajajo.<\/p>\n
Ve\u010d o vsem tem lahko preberete tukaj (za Chrome<\/a><\/noindex>) in tukaj (za Firefox<\/a><\/noindex>).<\/p>\n
Napaka v sintaksi<\/h3>\n
\nEna najpogostej\u0161ih napak v JavaScriptu je SyntaxError. Njihovemu izogibanju lahko pomagajo raz\u0161iritve besedilnega urejevalnika. Tako Bracket Pair Colorizer ozna\u010duje oklepaje v kodi z razli\u010dnimi barvami, Prettier ali podoben analizni instrument pa omogo\u010da hitro iskanje napak. Najbolj\u0161i na\u010din za zmanj\u0161anje verjetnosti pojava SyntaxError je minimalna vgrajenost.<\/p>\n
Delite v komentarjih: Kaj po\u010dnete, da ne bi delali napak ali jih hitro odkrili in popravili?<\/p>\n
Skillbox priporo\u010da:<\/b><\/p>\n