{"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\/cs\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, ud\u011blal jsem to znovu: lad\u011bn\u00ed b\u011b\u017en\u00fdch chyb v JavaScriptu","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nN\u011bkdy je psan\u00ed k\u00f3du JavaScript obt\u00ed\u017en\u00e9 a n\u011bkdy dokonce d\u011bs\u00ed, co\u017e je mnoh\u00fdm v\u00fdvoj\u00e1\u0159\u016fm zn\u00e1m\u00e9. P\u0159i pr\u00e1ci nevyhnuteln\u011b doch\u00e1z\u00ed k chyb\u00e1m, p\u0159i\u010dem\u017e n\u011bkter\u00e9 z nich se opakuj\u00ed pom\u011brn\u011b \u010dasto. V \u010dl\u00e1nku ur\u010den\u00e9m za\u010d\u00ednaj\u00edc\u00edm v\u00fdvoj\u00e1\u0159\u016fm se pojedn\u00e1v\u00e1 o t\u011bchto chyb\u00e1ch a zp\u016fsobech jejich \u0159e\u0161en\u00ed. Pro n\u00e1zornost jsou n\u00e1zvy funkc\u00ed, vlastnost\u00ed a objekt\u016f p\u0159evzaty z popul\u00e1rn\u00ed p\u00edsn\u011b<\/a><\/noindex>. To v\u0161e pom\u00e1h\u00e1 rychle si zapamatovat, jak opravovat b\u011b\u017en\u00e9 chyby.
\n<\/a><\/noindex><\/p>\n

P\u0159ipom\u00edn\u00e1me:<\/b> pro v\u0161echny \u010dten\u00e1\u0159e \"Habra\" \u2013 sleva 10 000 korun p\u0159i registraci na jak\u00fdkoli kurz Skillbox s promok\u00f3dem \"Habr\".<\/i><\/p>\n

Skillbox doporu\u010duje:<\/b> Praktick\u00fd kurz \"Mobiln\u00ed v\u00fdvoj\u00e1\u0159 PRO\"<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: vlastnost nen\u00ed definov\u00e1na<\/h3>\n

<\/p>\n

let d\u00edvka = {\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(d\u00edvka.named.lucky)<\/code><\/pre>\n
\nP\u0159\u00edklad v\u00fd\u0161e uveden\u00e9ho k\u00f3du vyvol\u00e1v\u00e1 chybu Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined. Probl\u00e9m je v tom, \u017ee objekt d\u00edvka nem\u00e1 vlastnost named, a\u010dkoli m\u00e1 vlastnost name. A proto\u017ee vlastnost d\u00edvka.named nen\u00ed definov\u00e1na, nelze na ni p\u0159istupovat, proto\u017ee form\u00e1ln\u011b neexistuje. Pokud v\u0161ak nahrad\u00edme d\u00edvka.named.lucky za d\u00edvka.name, v\u0161e za\u010dne fungovat a program vr\u00e1t\u00ed Lucky.<\/p>\n
O vlastnostech se m\u016f\u017eete dozv\u011bd\u011bt v\u00edce zde<\/a><\/noindex>.<\/p>\n
Zp\u016fsoby odstran\u011bn\u00ed chyb TypeError<\/h3>\n
\nChyby TypeError se objevuj\u00ed, kdy\u017e se program\u00e1tor pokus\u00ed prov\u00e1d\u011bt operace s daty, kter\u00e1 neodpov\u00eddaj\u00ed stanoven\u00e9mu typu. Jako p\u0159\u00edklad lze vz\u00edt pou\u017eit\u00ed .bold(), dotaz na vlastnost undefined nebo vol\u00e1n\u00ed funkce, kter\u00e1 ve skute\u010dnosti nen\u00ed funkc\u00ed.<\/p>\n
Pokud se tedy pokus\u00edte zavolat d\u00edvka(), objev\u00ed se chyba Uncaught TypeError: yourVariable.bold is not a function a d\u00edvka is not a function, proto\u017ee ve skute\u010dnosti je vyvol\u00e1n objekt, nikoli funkce.<\/p>\n
Chcete-li odstranit chyby, je t\u0159eba prostudovat prom\u011bnn\u00e9. Co je d\u00edvka? A co je d\u00edvka.named? To lze zjistit, pokud analyzujete k\u00f3d, vytisknete prom\u011bnn\u00e9 pomoc\u00ed console.log, pou\u017eijete p\u0159\u00edkaz debugger nebo vyvol\u00e1te n\u00e1zev prom\u011bnn\u00e9 v konzole. Je t\u0159eba se ujistit, \u017ee existuje mo\u017enost manipulovat s typem dat obsa\u017een\u00fdm v prom\u011bnn\u00e9. Pokud nevyhovuje, zm\u011b\u0148te jej, nap\u0159\u00edklad p\u0159idejte podm\u00ednku nebo blok try..catch \u2013 a z\u00edsk\u00e1te kontrolu nad vykon\u00e1v\u00e1n\u00edm operace.<\/p>\n
P\u0159ete\u010den\u00ed z\u00e1sobn\u00edku<\/h3>\n
\nPokud v\u011b\u0159it autor\u016fm p\u00edsni\u010dky Baby One More Time (ano, to je Britney Spears), slovo hit v tomto kontextu znamen\u00e1, \u017ee zp\u011bva\u010dka tou\u017e\u00ed, aby j\u00ed znovu zavolali (zde je uvedeno vysv\u011btlen\u00ed samotn\u00e9ho kontextu p\u00edsn\u011b \u2014 pozn. p\u0159ekladatele). Je docela mo\u017en\u00e9, \u017ee toto p\u0159\u00e1n\u00ed povede ke zv\u00fd\u0161en\u00ed po\u010dtu hovor\u016f v re\u00e1ln\u00e9m \u017eivot\u011b. V programov\u00e1n\u00ed to ale znamen\u00e1 rekurzi, kter\u00e1 m\u016f\u017ee vyvolat chybu v p\u0159\u00edpad\u011b p\u0159epln\u011bn\u00ed z\u00e1sobn\u00edku vol\u00e1n\u00ed.<\/p>\n
Chyby vypadaj\u00ed takto:<\/p>\n
Chyba: Nedostatek m\u00edsta na z\u00e1sobn\u00edku (Edge)
\nInternalError: p\u0159\u00edli\u0161 mnoho rekurz\u00ed (Firefox)
\nRangeError: Byla p\u0159ekro\u010dena maxim\u00e1ln\u00ed velikost z\u00e1sobn\u00edku vol\u00e1n\u00ed (Chrome)
\n <\/i>
\nP\u0159epln\u011bn\u00ed z\u00e1sobn\u00edku nast\u00e1v\u00e1, pokud v\u00fdvoj\u00e1\u0159 nezohlednil z\u00e1kladn\u00ed p\u0159\u00edpad v rekurzi nebo pokud k\u00f3d neodkazuje na p\u0159edpokl\u00e1dan\u00fd p\u0159\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 p\u0159\u00edpad\u011b nem\u016f\u017ee stillBelieve nikdy nab\u00fdt hodnoty false, tak\u017ee se v\u017edy vykon\u00e1 vol\u00e1n\u00ed oneMoreTime, ale funkce se nikdy nedokon\u010d\u00ed.<\/p>\n
Pokud v\u0161ak za\u010dneme doufat ve dva p\u0159\u00e1tele, sn\u00ed\u017e\u00ed to loneliness (osam\u011blost) a hovor u\u017e nebude nutn\u00fd.<\/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
\nJako p\u0159\u00edklad lze uv\u00e9st p\u0159\u00edpady s nekone\u010dn\u00fdmi cykly, kdy syst\u00e9m nevyd\u00e1v\u00e1 zpr\u00e1vu o chyb\u011b, a str\u00e1nka, na kter\u00e9 se prov\u00e1d\u00ed JavaScriptov\u00fd k\u00f3d, jednodu\u0161e zamrzne. K tomu doch\u00e1z\u00ed, pokud cyklus while nem\u00e1 podm\u00ednku pro ukon\u010den\u00ed.<\/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 lze vy\u0159e\u0161it n\u00e1sleduj\u00edc\u00edm zp\u016fsobem:<\/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
Lad\u011bn\u00ed nekone\u010dn\u00fdch cykl\u016f a rekurz\u00ed<\/h3>\n
\nPokud nastal probl\u00e9m s nekone\u010dn\u00fdm cyklem, v Chrome nebo Edge je t\u0159eba zav\u0159\u00edt kartu, a ve Firefoxu okno prohl\u00ed\u017ee\u010de. Pot\u00e9 je nutn\u00e9 pe\u010dliv\u011b analyzovat k\u00f3d. Pokud se probl\u00e9m nepoda\u0159ilo naj\u00edt, je dobr\u00e9 do cyklu nebo funkce p\u0159idat p\u0159\u00edkaz debugger a zkontrolovat hodnotu prom\u011bnn\u00fdch. Pokud v\u00fdsledek neodpov\u00edd\u00e1 o\u010dek\u00e1van\u00e9mu, je t\u0159eba prov\u00e9st n\u00e1hradu, co\u017e lze snadno ud\u011blat.<\/p>\n
V p\u0159\u00edkladu uveden\u00e9m v\u00fd\u0161e by se debugger m\u011bl p\u0159idat jako prvn\u00ed \u0159\u00e1dek funkce nebo cyklu. Pot\u00e9 je nutn\u00e9 otev\u0159\u00edt debuggovac\u00ed z\u00e1lo\u017eku v Chrome a analyzovat prom\u011bnn\u00e9 v rozsahu. Pomoc\u00ed tla\u010d\u00edtka next m\u016f\u017eete sledovat jejich zm\u011bny p\u0159i ka\u017ed\u00e9 iteraci. V\u0161echny tyto kroky jsou jednoduch\u00e9 a ve v\u011bt\u0161in\u011b p\u0159\u00edpad\u016f se probl\u00e9m nach\u00e1z\u00ed.<\/p>\n
O v\u0161em tomto se m\u016f\u017eete dozv\u011bd\u011bt v\u00edce zde (pro Chrome<\/a><\/noindex>) a zde (pro Firefox<\/a><\/noindex>).<\/p>\n
Syntax Error<\/h3>\n
\nJednou z nej\u010dast\u011bj\u0161\u00edch chyb v JavaScriptu je SyntaxError. Jejich vyh\u00fdb\u00e1n\u00ed usnadn\u00ed roz\u0161\u00ed\u0159en\u00ed textov\u00e9ho editoru. Nap\u0159\u00edklad Bracket Pair Colorizer vyzna\u010duje z\u00e1vorky v k\u00f3du r\u016fzn\u00fdmi barvami, zat\u00edmco Prettier nebo podobn\u00fd n\u00e1stroj anal\u00fdzy umo\u017e\u0148uje rychle naj\u00edt chyby. Nejlep\u0161\u00edm zp\u016fsobem, jak sn\u00ed\u017eit pravd\u011bpodobnost vzniku SyntaxError, je minimalizovat vno\u0159en\u00ed.<\/p>\n
Pod\u011blte se v koment\u00e1\u0159\u00edch: co d\u011bl\u00e1te, abyste p\u0159ede\u0161li chyb\u00e1m nebo je rychle objevili a odstranili?<\/p>\n
Skillbox doporu\u010duje:<\/b><\/p>\n