{"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\/sk\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, urobil som to znova: ladenie be\u017en\u00fdch ch\u00fdb v JavaScripte","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nP\u00edsanie k\u00f3du v JavaScripte m\u00f4\u017ee by\u0165 niekedy n\u00e1ro\u010dn\u00e9 a ob\u010das dokonca desiv\u00e9, \u010do je mnoh\u00fdm v\u00fdvoj\u00e1rom zn\u00e1me. Po\u010das pr\u00e1ce nevyhnutne vznikaj\u00fa chyby, pri\u010dom niektor\u00e9 z nich sa objavuj\u00fa pomerne \u010dasto. V \u010dl\u00e1nku, ur\u010denom pre za\u010d\u00ednaj\u00facich v\u00fdvoj\u00e1rov, sa hovor\u00ed o t\u00fdchto chyb\u00e1ch a sp\u00f4soboch ich rie\u0161enia. Pre n\u00e1zornos\u0165 s\u00fa n\u00e1zvy funkci\u00ed, vlastnost\u00ed a objektov prevzat\u00e9 z popul\u00e1rnej piesne<\/a><\/noindex>. To v\u0161etko pom\u00e1ha r\u00fdchlo si zapam\u00e4ta\u0165, ako opravi\u0165 be\u017en\u00e9 chyby.
\n<\/a><\/noindex><\/p>\n

Pripom\u00edname:<\/b> pre v\u0161etk\u00fdch \u010ditate\u013eov \u201eHabr\u201c \u2014 z\u013eava 10 000 rub\u013eov pri zap\u00edsan\u00ed na ak\u00fdko\u013evek kurz Skillbox s promo k\u00f3dom \u201eHabr\u201c.<\/i><\/p>\n

Skillbox odpor\u00fa\u010da:<\/b> Praktick\u00fd kurz \u201eMobiln\u00fd v\u00fdvoj\u00e1r PRO\u201c<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: vlastnos\u0165 nie je definovan\u00e1<\/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
\nPr\u00edklad k\u00f3du uveden\u00fd vy\u0161\u0161ie vyhadzuje chybu Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Probl\u00e9m spo\u010d\u00edva v tom, \u017ee objekt girl nem\u00e1 vlastnos\u0165 named, aj ke\u010f m\u00e1 vlastnos\u0165 name. A ke\u010f\u017ee vlastnos\u0165 girl.named nie je definovan\u00e1, nie je k nej mo\u017en\u00e9 z\u00edska\u0165 pr\u00edstup, preto\u017ee form\u00e1lne neexistuje. Ak v\u0161ak nahrad\u00edme girl.named.lucky za girl.name, v\u0161etko za\u010dne fungova\u0165 a program vr\u00e1ti Lucky.<\/p>\n
Viac o vlastnostiach sa mo\u017eno pre\u010d\u00edta\u0165 tu<\/a><\/noindex>.<\/p>\n
Sp\u00f4soby odstr\u00e1nenia ch\u00fdb TypeError<\/h3>\n
\nChyby TypeError sa vyskytuj\u00fa, ke\u010f sa program\u00e1tor pok\u00fa\u0161a vykon\u00e1va\u0165 oper\u00e1cie s \u00fadajmi, ktor\u00e9 nezodpovedaj\u00fa ur\u010dit\u00e9mu typu. Ako pr\u00edklad m\u00f4\u017eeme uvies\u0165 pou\u017eitie .bold(), dotazovanie na vlastnos\u0165 undefined alebo volanie funkcie, ktor\u00e1 v skuto\u010dnosti nie je funkciou.<\/p>\n
Tak\u017ee, ak sa pok\u00fasime zavola\u0165 girl (), objav\u00ed sa chyba Uncaught TypeError: yourVariable.bold is not a function a girl is not a function, preto\u017ee sa v skuto\u010dnosti vol\u00e1 objekt, nie funkcia.<\/p>\n
Aby sme chyby odstr\u00e1nili, je potrebn\u00e9 presk\u00fama\u0165 premenn\u00e9. \u010co presne je girl? A \u010do je girl.named? Zisti\u0165 to m\u00f4\u017eeme anal\u00fdzou k\u00f3du, v\u00fdpisom premenn\u00fdch pomocou console.log, pr\u00edkazu debugger alebo vyvolan\u00edm n\u00e1zvu premennej v konzole. Je potrebn\u00e9 sa uisti\u0165, \u017ee m\u00e1me mo\u017enos\u0165 manipulova\u0165 s typom \u00fadajov, ktor\u00fd sa nach\u00e1dza v premennej. Ak nevyhovuje, zme\u0148te ho, napr\u00edklad pridajte podmienku alebo blok try..catch \u2013 a z\u00edskate kontrolu nad vykonan\u00edm oper\u00e1cie.<\/p>\n
Preplnenie z\u00e1sobn\u00edka<\/h3>\n
\nAk ver\u00edme autorom piesne Baby One More Time (to je Britney Spears, \u00e1no), slovo hit v tomto kontexte znamen\u00e1 \u017eelanie spev\u00e1\u010dky, aby jej zavolali znova (tu je vysvetlenie samotn\u00e9ho kontextu piesne, \u2014 pozn. prekl. ). Je pravdepodobn\u00e9, \u017ee toto \u017eelanie povedie k zv\u00fd\u0161eniu po\u010dtu telefon\u00e1tov v re\u00e1lnom \u017eivote. No v programovan\u00ed ide o rekurziu, ktor\u00e1 m\u00f4\u017ee sp\u00f4sobi\u0165 chybu v pr\u00edpade preplnenia z\u00e1sobn\u00edka volan\u00ed.<\/p>\n
Chyby vyzeraj\u00fa nasledovne:<\/p>\n
Error: Out of stack space (Edge)
\nInternalError: too much recursion (Firefox)
\nRangeError: Maximum call stack size exceeded (Chrome)
\n <\/i>
\nPreplnenie z\u00e1sobn\u00edka nast\u00e1va, ak v\u00fdvoj\u00e1r nezoh\u013eadnil z\u00e1kladn\u00fd pr\u00edpad v rekurzii alebo ak k\u00f3d neodkazuje na predpokladan\u00fd pr\u00edpad.<\/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 tomto pr\u00edpade stillBelieve nikdy nem\u00f4\u017ee nadobudn\u00fa\u0165 hodnotu false, preto sa v\u017edy bude vola\u0165 oneMoreTime, ale vykonanie funkcie sa nikdy nedokon\u010d\u00ed.<\/p>\n
Ak za\u010dneme veri\u0165 v dvoch priate\u013eov, zn\u00ed\u017ei sa t\u00fdm loneliness (samota) a telefon\u00e1t nebude potrebn\u00e9 \u010daka\u0165.<\/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
\nPr\u00edkladom m\u00f4\u017eu by\u0165 pr\u00edpady s nekone\u010dn\u00fdmi cyklami, ke\u010f syst\u00e9m nevyd\u00e1 chybov\u00e9 hl\u00e1senie a str\u00e1nka, na ktorej sa vykon\u00e1va JavaScriptov\u00fd k\u00f3d, jednoducho zamrzne. K tomu doch\u00e1dza, ak slu\u010dka while nem\u00e1 podmienku na ukon\u010denie.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nProbl\u00e9m mo\u017eno vyrie\u0161i\u0165 nasledovne:<\/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
Ladenie nekone\u010dn\u00fdch cyklov a rekurzi\u00ed<\/h3>\n
\nAk nastal probl\u00e9m s nekone\u010dn\u00fdm cyklom, v Chrome alebo Edge treba zatvori\u0165 kartu a vo Firefoxe \u2014 okno prehliada\u010da. Potom je potrebn\u00e9 d\u00f4kladne analyzova\u0165 k\u00f3d. Ak sa probl\u00e9m nepodarilo n\u00e1js\u0165, treba prida\u0165 pr\u00edkaz debugger do cyklu alebo funkcie a skontrolova\u0165 hodnotu premenn\u00fdch. Ak v\u00fdsledok nezodpoved\u00e1 o\u010dak\u00e1vaniu, nahra\u010fte ho, to sa d\u00e1 jednoducho spravi\u0165.<\/p>\n
V pr\u00edklade, ktor\u00fd je uveden\u00fd vy\u0161\u0161ie, by ste mali prida\u0165 debugger ako prv\u00fd riadok funkcie alebo cyklu. Potom mus\u00edte otvori\u0165 debuggovaciu kartu v Chrome a analyzova\u0165 premenn\u00e9 v scope. Pomocou tla\u010didla next m\u00f4\u017eete sledova\u0165 ich zmenu pri ka\u017edej iter\u00e1cii. Je to jednoduch\u00e9 a v mnoh\u00fdch pr\u00edpadoch je probl\u00e9m odhalen\u00fd.<\/p>\n
O v\u0161etkom tomto sa m\u00f4\u017eete dozvedie\u0165 viac tu (pre Chrome<\/a><\/noindex>) a tu (pre Firefox<\/a><\/noindex>).<\/p>\n
Chyba v syntaxi<\/h3>\n
\nJednou z najbe\u017enej\u0161\u00edch ch\u00fdb v JavaScripte je SyntaxError. Vyvarova\u0165 sa im m\u00f4\u017eu pom\u00f4c\u0165 roz\u0161\u00edrenia textov\u00e9ho editora. Tak\u017ee Bracket Pair Colorizer ozna\u010duje z\u00e1tvorky v k\u00f3de r\u00f4znymi farbami, zatia\u013e \u010do Prettier alebo podobn\u00fd analytick\u00fd n\u00e1stroj umo\u017e\u0148uje r\u00fdchlo n\u00e1js\u0165 chyby. Najlep\u0161\u00ed sp\u00f4sob, ako zn\u00ed\u017ei\u0165 pravdepodobnos\u0165 v\u00fdskytu SyntaxError, je minimalizova\u0165 h\u013abku vnorenia.<\/p>\n
Pode\u013ete sa v koment\u00e1roch: \u010do rob\u00edte, aby ste sa vyhli chyb\u00e1m alebo ich r\u00fdchlo odhalili a odstr\u00e1nili?<\/p>\n
Skillbox odpor\u00fa\u010da:<\/b><\/p>\n