Oops, I did it again: a gyakori JavaScript hibák hibakeresése.

Néha a JavaScript kód írása nehézségekbe ütközik, és egyes esetekben meg is ijeszt, amit sok fejlesztő ismer. A munka során elkerülhetetlenül hibák lépnek fel, ráadásul ezek közül néhány gyakran ismétlődik. A kezdő fejlesztők számára készült cikk foglalkozik ezekkel a hibákkal és azok megoldási lehetőségeivel. A funkciók, tulajdonságok és objektumok nevei a népszerű dalból. Mindez segít gyorsan megjegyezni, hogyan kell kijavítani a gyakori hibákat.

Emlékeztetjük: minden «Habr» olvasónak 10 000 rubeles kedvezmény jár bármely Skillbox kurzus jelentkezésekor a «Habr» promóciós kód felhasználásával.

A Skillbox ajánlja: Gyakorlati kurzus «Mobilfejlesztő PRO».

TypeError: tulajdonság nincs meghatározva

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

A fenti kód példa Uncaught TypeError: Cannot read property ‘lucky’ of undefined hibát ad. A probléma az, hogy a girl objektumnak nincs named tulajdonsága, bár a name tulajdonsága létezik. Mivel a girl.named tulajdonság nincs meghatározva, nem lehet hozzáférni, mert formálisan nem létezik. De ha a girl.named.lucky-t girl.name-ra cseréljük, minden működni fog, és a program visszaadja a Lucky-t.

További információ a tulajdonságokról olvashatsz.

A TypeError hibák elhárításának módjai

A TypeError hibák akkor jelennek meg, amikor a programozó olyan adatokkal próbál műveleteket végrehajtani, amelyek nem felelnek meg egy adott típusnak. Példaként lehet említeni a .bold() alkalmazását, az undefined tulajdonság lekérését vagy egy olyan funkció meghívását, amely valójában nem is funkció.

Például, ha megpróbáljuk meghívni a girl-t (), akkor a hiba Uncaught TypeError: yourVariable.bold is not a function és girl is not a function hibák jelennek meg, mivel valójában egy objektumot hívunk meg, nem pedig egy funkciót.

A hibák elhárításához meg kell vizsgálni a változókat. Mi az a girl? Mi az a girl.named? Ezt úgy tudhatjuk meg, ha elemezzük a kódot, a console.log segítségével kiíratjuk a változókat, debugger parancsot használunk, vagy a változó nevét a konzolban hívjuk meg. Biztosítanunk kell, hogy lehetőségünk legyen a változóban tárolt adatok típusával műveleteket végezni. Ha az nem megfelelő, módosítsuk, például adjunk hozzá egy feltételt vagy try..catch blokkot — és így ellenőrzést nyerünk a művelet végrehajtása felett.

Verem túlcsordulás

Ha elhisszük a Baby One More Time című dal szerzőinek (igen, ez Britney Spears), akkor a hit szó ebben az összefüggésben a dal énekesnőjének vágyát jelenti, hogy ismét hívják (ez itt a dal kontextusának magyarázata — a fordító megjegyzése). Lehetséges, hogy ez a vágy a való életben növeli a hívások számát. De a programozásban ez rekurzió, amely hibaüzenetet okozhat a hívási verem túlcsordulásakor.

A hibák a következőképpen néznek ki:

Hiba: Nincs hely a veremben (Edge)
InternalError: túlzott rekurzió (Firefox)
RangeError: A maximális hívási verem mérete túllépve (Chrome)

A verem túlcsordulása akkor fordul elő, ha a fejlesztő nem vette figyelembe az alaphelyzetet a rekurzióban, vagy ha a kód nem hivatkozik a megadott esetre.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

Ebben az esetben a stillBelieve soha nem lehet false, ezért minden alkalommal a oneMoreTime hívása történik, de a függvény végrehajtása soha nem fejeződik be.

Ha két barátban kezdünk el bízni, az csökkenti a loneliness (magány) szintet, és a hívásra már nem is lesz szükség.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Példaként hozhatók a végtelen ciklusok esetei, amikor a rendszer nem ad hibaüzenetet, a JavaScript-kódot futtató oldal egyszerűen lelassul. Ez akkor fordul elő, ha a while ciklusnak nincs befejezési feltétele.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

A probléma megoldása a következőképpen lehetséges:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

Végtelen ciklusok és rekurziók hibakeresése

Ha végtelen ciklussal kapcsolatos probléma merül fel, Chrome vagy Edge esetén a lapot be kell zárni, a Firefox esetében pedig a böngészőablakot. Ezt követően alaposan át kell nézni a kódot. Ha nem találjuk a problémát, érdemes a debugger parancsot hozzáadni a ciklushoz vagy a függvényhez, és ellenőrizni a változók értékét. Ha az eredmény nem felel meg a vártnak, azt könnyen ki lehet cserélni.

A fenti példában a debuggert a függvény vagy ciklus első sorába kell beilleszteni. Ezt követően meg kell nyitni a debuggolási lapot a Chrome-ban, és elemezni a scope-ban lévő változókat. A next gomb segítségével nyomon követhetjük a változásaikat minden iteráció során. Mindez egyszerűen megvalósítható, és a legtöbb esetben a probléma helyzetben rejlik.

Erről részletesebben itt olvashat (a Chrome-hoz) és itt (a Firefoxhoz).

Szintaktikai hiba

Az egyik leggyakoribb hiba a JavaScript-ben a SyntaxError. Ezek elkerülésében segíthetnek a szövegszerkesztő bővítmények. Így például a Bracket Pair Colorizer különböző színekkel jelöli a kód zárójeleit, míg a Prettier vagy hasonló elemzőeszköz lehetővé teszi a gyors hibaellenőrzést. A legjobb megoldás a SyntaxError valószínűségének csökkentésére a minimális beágyazás.

Ossza meg a megjegyzésekben: mit tesz azért, hogy elkerülje a hibákat, vagy hogyan fedezi fel és szünteti meg őket gyorsan?

A Skillbox ajánlja:

• Kétéves gyakorlati tanfolyam „Webfejlesztő PRO”.
• Online kurzus „C#-fejlesztő 0-ról”.
• Gyakorlati éves kurzus „PHP fejlesztő a nullától a PROig”.

Forrás: habr.com