{"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\/hu\/blog\/news\/oops-i-did-it-again-otladka-rasprostranennyh-oshibok-v-javascript","title":{"rendered":"Oops, I did it again: a gyakori JavaScript hib\u00e1k hibakeres\u00e9se.","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

\"Oops,
\n
\nN\u00e9ha a JavaScript k\u00f3d \u00edr\u00e1sa neh\u00e9zs\u00e9gekbe \u00fctk\u00f6zik, \u00e9s egyes esetekben meg is ijeszt, amit sok fejleszt\u0151 ismer. A munka sor\u00e1n elker\u00fclhetetlen\u00fcl hib\u00e1k l\u00e9pnek fel, r\u00e1ad\u00e1sul ezek k\u00f6z\u00fcl n\u00e9h\u00e1ny gyakran ism\u00e9tl\u0151dik. A kezd\u0151 fejleszt\u0151k sz\u00e1m\u00e1ra k\u00e9sz\u00fclt cikk foglalkozik ezekkel a hib\u00e1kkal \u00e9s azok megold\u00e1si lehet\u0151s\u00e9geivel. A funkci\u00f3k, tulajdons\u00e1gok \u00e9s objektumok nevei a n\u00e9pszer\u0171 dalb\u00f3l<\/a><\/noindex>. Mindez seg\u00edt gyorsan megjegyezni, hogyan kell kijav\u00edtani a gyakori hib\u00e1kat.
\n<\/a><\/noindex><\/p>\n

Eml\u00e9keztetj\u00fck:<\/b> minden \u00abHabr\u00bb olvas\u00f3nak 10 000 rubeles kedvezm\u00e9ny j\u00e1r b\u00e1rmely Skillbox kurzus jelentkez\u00e9sekor a \u00abHabr\u00bb prom\u00f3ci\u00f3s k\u00f3d felhaszn\u00e1l\u00e1s\u00e1val.<\/i><\/p>\n

A Skillbox aj\u00e1nlja:<\/b> Gyakorlati kurzus \u00abMobilfejleszt\u0151 PRO\u00bb<\/a><\/noindex>.\n<\/p><\/blockquote>\n

<\/p>\n

TypeError: tulajdons\u00e1g nincs meghat\u00e1rozva<\/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
\nA fenti k\u00f3d p\u00e9lda Uncaught TypeError: Cannot read property \u2018lucky\u2019 of undefined hib\u00e1t ad. A probl\u00e9ma az, hogy a girl objektumnak nincs named tulajdons\u00e1ga, b\u00e1r a name tulajdons\u00e1ga l\u00e9tezik. Mivel a girl.named tulajdons\u00e1g nincs meghat\u00e1rozva, nem lehet hozz\u00e1f\u00e9rni, mert form\u00e1lisan nem l\u00e9tezik. De ha a girl.named.lucky-t girl.name-ra cser\u00e9lj\u00fck, minden m\u0171k\u00f6dni fog, \u00e9s a program visszaadja a Lucky-t.<\/p>\n
Tov\u00e1bbi inform\u00e1ci\u00f3 a tulajdons\u00e1gokr\u00f3l olvashatsz<\/a><\/noindex>.<\/p>\n
A TypeError hib\u00e1k elh\u00e1r\u00edt\u00e1s\u00e1nak m\u00f3djai<\/h3>\n
\nA TypeError hib\u00e1k akkor jelennek meg, amikor a programoz\u00f3 olyan adatokkal pr\u00f3b\u00e1l m\u0171veleteket v\u00e9grehajtani, amelyek nem felelnek meg egy adott t\u00edpusnak. P\u00e9ldak\u00e9nt lehet eml\u00edteni a .bold() alkalmaz\u00e1s\u00e1t, az undefined tulajdons\u00e1g lek\u00e9r\u00e9s\u00e9t vagy egy olyan funkci\u00f3 megh\u00edv\u00e1s\u00e1t, amely val\u00f3j\u00e1ban nem is funkci\u00f3.<\/p>\n
P\u00e9ld\u00e1ul, ha megpr\u00f3b\u00e1ljuk megh\u00edvni a girl-t (), akkor a hiba Uncaught TypeError: yourVariable.bold is not a function \u00e9s girl is not a function hib\u00e1k jelennek meg, mivel val\u00f3j\u00e1ban egy objektumot h\u00edvunk meg, nem pedig egy funkci\u00f3t.<\/p>\n
A hib\u00e1k elh\u00e1r\u00edt\u00e1s\u00e1hoz meg kell vizsg\u00e1lni a v\u00e1ltoz\u00f3kat. Mi az a girl? Mi az a girl.named? Ezt \u00fagy tudhatjuk meg, ha elemezz\u00fck a k\u00f3dot, a console.log seg\u00edts\u00e9g\u00e9vel ki\u00edratjuk a v\u00e1ltoz\u00f3kat, debugger parancsot haszn\u00e1lunk, vagy a v\u00e1ltoz\u00f3 nev\u00e9t a konzolban h\u00edvjuk meg. Biztos\u00edtanunk kell, hogy lehet\u0151s\u00e9g\u00fcnk legyen a v\u00e1ltoz\u00f3ban t\u00e1rolt adatok t\u00edpus\u00e1val m\u0171veleteket v\u00e9gezni. Ha az nem megfelel\u0151, m\u00f3dos\u00edtsuk, p\u00e9ld\u00e1ul adjunk hozz\u00e1 egy felt\u00e9telt vagy try..catch blokkot \u2014 \u00e9s \u00edgy ellen\u0151rz\u00e9st nyer\u00fcnk a m\u0171velet v\u00e9grehajt\u00e1sa felett.<\/p>\n
Verem t\u00falcsordul\u00e1s<\/h3>\n
\nHa elhissz\u00fck a Baby One More Time c\u00edm\u0171 dal szerz\u0151inek (igen, ez Britney Spears), akkor a hit sz\u00f3 ebben az \u00f6sszef\u00fcgg\u00e9sben a dal \u00e9nekesn\u0151j\u00e9nek v\u00e1gy\u00e1t jelenti, hogy ism\u00e9t h\u00edvj\u00e1k (ez itt a dal kontextus\u00e1nak magyar\u00e1zata \u2014 a ford\u00edt\u00f3 megjegyz\u00e9se). Lehets\u00e9ges, hogy ez a v\u00e1gy a val\u00f3 \u00e9letben n\u00f6veli a h\u00edv\u00e1sok sz\u00e1m\u00e1t. De a programoz\u00e1sban ez rekurzi\u00f3, amely hiba\u00fczenetet okozhat a h\u00edv\u00e1si verem t\u00falcsordul\u00e1sakor.<\/p>\n
A hib\u00e1k a k\u00f6vetkez\u0151k\u00e9ppen n\u00e9znek ki:<\/p>\n
Hiba: Nincs hely a veremben (Edge)
\nInternalError: t\u00falzott rekurzi\u00f3 (Firefox)
\nRangeError: A maxim\u00e1lis h\u00edv\u00e1si verem m\u00e9rete t\u00fall\u00e9pve (Chrome)
\n <\/i>
\nA verem t\u00falcsordul\u00e1sa akkor fordul el\u0151, ha a fejleszt\u0151 nem vette figyelembe az alaphelyzetet a rekurzi\u00f3ban, vagy ha a k\u00f3d nem hivatkozik a megadott esetre.<\/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
\nEbben az esetben a stillBelieve soha nem lehet false, ez\u00e9rt minden alkalommal a oneMoreTime h\u00edv\u00e1sa t\u00f6rt\u00e9nik, de a f\u00fcggv\u00e9ny v\u00e9grehajt\u00e1sa soha nem fejez\u0151dik be.<\/p>\n
Ha k\u00e9t bar\u00e1tban kezd\u00fcnk el b\u00edzni, az cs\u00f6kkenti a loneliness (mag\u00e1ny) szintet, \u00e9s a h\u00edv\u00e1sra m\u00e1r nem is lesz sz\u00fcks\u00e9g.<\/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
\nP\u00e9ldak\u00e9nt hozhat\u00f3k a v\u00e9gtelen ciklusok esetei, amikor a rendszer nem ad hiba\u00fczenetet, a JavaScript-k\u00f3dot futtat\u00f3 oldal egyszer\u0171en lelassul. Ez akkor fordul el\u0151, ha a while ciklusnak nincs befejez\u00e9si felt\u00e9tele.<\/p>\n
let worldEnded = false\n \nwhile (worldEnded !== true) {\n  console.log(\"Keep on dancin' till the world ends\")\n}<\/code><\/pre>\n
\nA probl\u00e9ma megold\u00e1sa a k\u00f6vetkez\u0151k\u00e9ppen lehets\u00e9ges:<\/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
V\u00e9gtelen ciklusok \u00e9s rekurzi\u00f3k hibakeres\u00e9se<\/h3>\n
\nHa v\u00e9gtelen ciklussal kapcsolatos probl\u00e9ma mer\u00fcl fel, Chrome vagy Edge eset\u00e9n a lapot be kell z\u00e1rni, a Firefox eset\u00e9ben pedig a b\u00f6ng\u00e9sz\u0151ablakot. Ezt k\u00f6vet\u0151en alaposan \u00e1t kell n\u00e9zni a k\u00f3dot. Ha nem tal\u00e1ljuk a probl\u00e9m\u00e1t, \u00e9rdemes a debugger parancsot hozz\u00e1adni a ciklushoz vagy a f\u00fcggv\u00e9nyhez, \u00e9s ellen\u0151rizni a v\u00e1ltoz\u00f3k \u00e9rt\u00e9k\u00e9t. Ha az eredm\u00e9ny nem felel meg a v\u00e1rtnak, azt k\u00f6nnyen ki lehet cser\u00e9lni.<\/p>\n
A fenti p\u00e9ld\u00e1ban a debuggert a f\u00fcggv\u00e9ny vagy ciklus els\u0151 sor\u00e1ba kell beilleszteni. Ezt k\u00f6vet\u0151en meg kell nyitni a debuggol\u00e1si lapot a Chrome-ban, \u00e9s elemezni a scope-ban l\u00e9v\u0151 v\u00e1ltoz\u00f3kat. A next gomb seg\u00edts\u00e9g\u00e9vel nyomon k\u00f6vethetj\u00fck a v\u00e1ltoz\u00e1saikat minden iter\u00e1ci\u00f3 sor\u00e1n. Mindez egyszer\u0171en megval\u00f3s\u00edthat\u00f3, \u00e9s a legt\u00f6bb esetben a probl\u00e9ma helyzetben rejlik.<\/p>\n
Err\u0151l r\u00e9szletesebben itt olvashat (a Chrome-hoz<\/a><\/noindex>) \u00e9s itt (a Firefoxhoz<\/a><\/noindex>).<\/p>\n
Szintaktikai hiba<\/h3>\n
\nAz egyik leggyakoribb hiba a JavaScript-ben a SyntaxError. Ezek elker\u00fcl\u00e9s\u00e9ben seg\u00edthetnek a sz\u00f6vegszerkeszt\u0151 b\u0151v\u00edtm\u00e9nyek. \u00cdgy p\u00e9ld\u00e1ul a Bracket Pair Colorizer k\u00fcl\u00f6nb\u00f6z\u0151 sz\u00ednekkel jel\u00f6li a k\u00f3d z\u00e1r\u00f3jeleit, m\u00edg a Prettier vagy hasonl\u00f3 elemz\u0151eszk\u00f6z lehet\u0151v\u00e9 teszi a gyors hibaellen\u0151rz\u00e9st. A legjobb megold\u00e1s a SyntaxError val\u00f3sz\u00edn\u0171s\u00e9g\u00e9nek cs\u00f6kkent\u00e9s\u00e9re a minim\u00e1lis be\u00e1gyaz\u00e1s.<\/p>\n
Ossza meg a megjegyz\u00e9sekben: mit tesz az\u00e9rt, hogy elker\u00fclje a hib\u00e1kat, vagy hogyan fedezi fel \u00e9s sz\u00fcnteti meg \u0151ket gyorsan?<\/p>\n
A Skillbox aj\u00e1nlja:<\/b><\/p>\n