Hoppá, újra megcsináltam: gyakori hibák hibakeresése a JavaScriptben

A JavaScript kód írása kihívást jelenthet, sőt néha egyenesen ijesztő is lehet, ahogy azt sok fejlesztő tudja. A folyamat során elkerülhetetlenül hibák merülnek fel, amelyek közül néhány visszatérő. Ez a cikk, amely kezdő fejlesztőknek szól, ezeket a hibákat és azok megoldását tárgyalja. Az érthetőség kedvéért a függvények, tulajdonságok és objektumok neveit a következő forrásból vettük át: népszerű dalMindez segít gyorsan emlékezni arra, hogyan kell kijavítani a gyakori hibákat.

Emlékeztetünk: a "Habr" minden olvasója számára - 10 000 rubel kedvezmény, ha a "Habr" promóciós kóddal bármely Skillbox tanfolyamra jelentkezik.

A Skillbox a következőket ajánlja: Gyakorlati tanfolyam "Mobile Developer PRO".

Típushiba: a tulajdonság nincs definiálva

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ódpélda a következő hibát adja: „Uncaught TypeError: Cannot beolvasni a 'lucky' vagy undefined tulajdonságot.” A probléma az, hogy a „girl” objektumnak nincs „named” tulajdonsága, bár van egy „name” tulajdonsága. És mivel a „girl.named” tulajdonság nincs definiálva, nem lehet hozzáférni, mivel technikailag nem létezik. Ha azonban a „girl.named.lucky” tulajdonságot „girl.name”-re cseréljük, minden működik, és a program „Lucky” értéket ad vissza.

Az ingatlanokról további részletek találhatók olvassa el itt.

A TypeErrors hibaelhárítása

Típushibák akkor fordulnak elő, amikor egy programozó olyan műveletet próbál végrehajtani, amely nem felel meg egy definiált típusnak. Ilyen például a .bold() használata, egy nem definiált tulajdonság lekérdezése, vagy egy olyan függvény meghívása, amely valójában nem függvény.

Tehát, ha megpróbálod meghívni a girl() függvényt, akkor a következő hibát kapod: Uncaught TypeError: a yourVariable.bold nem függvény, és a girl sem függvény, mivel valójában egy objektumot hívunk meg, nem pedig egy függvényt.

A hibák elhárításához meg kell vizsgálnod a változókat. Szóval, mi a „girl”? És mi a „girl.named”? Ezt a kód elemzésével, a változók console.log használatával, a debugger paranccsal történő megjelenítésével, vagy a változónév meghívásával a konzolban megtudhatod. Győződj meg arról, hogy tudod kezelni a változó által tartalmazott adattípust. Ha nem, akkor módosítsd – például egy feltétel vagy egy try..catch blokk hozzáadásával –, és vedd át az irányítást a művelet végrehajtása felett.

Verem túlcsordulás

Ha hihetünk a "Baby One More Time" dalszövegíróinak (azaz Britney Spearsnek, ugye), a "találat" szó ebben a szövegkörnyezetben az énekes azon vágyára utal, hogy újra hívják (íme a dal szövegkörnyezetének magyarázata – fordítói megjegyzés). Teljesen lehetséges, hogy ez a vágy a hívások számának növekedéséhez vezet a való életben. De a programozásban ez rekurzió, ami hibát okozhat hívási verem túlcsordulás esetén.

A hibák így néznek ki:

Hiba: Nincs elég hely a veremben (Edge)
Belső hiba: túl sok rekurzió (Firefox)
RangeError: A hívásverem maximális mérete túllépve (Chrome)

Verem túlcsordulás akkor fordul elő, ha a fejlesztő nem veszi figyelembe az alapesetet a rekurzió során, vagy ha a kód nem a kívánt esetet kezeli.

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

Ebben az esetben a stillBelieve soha nem lehet hamis értékkel kiértékelni, így a oneMoreTime minden alkalommal meghívódik, de a függvény soha nem fog befejezni a végrehajtást.

Ha két barátra támaszkodsz, az csökkenti a magányt, és nem kell várnod a hívásra.

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

Példa erre a végtelen ciklusok esete, ahol a rendszer nem jelenít meg hibaüzenetet, de a JavaScript kódot futtató oldal egyszerűen lefagy. Ez akkor történik, 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 a következőképpen oldható meg:

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émába ütközöl, zárd be a Chrome vagy az Edge fület, illetve a Firefox böngészőablakot. Ezután elemezd alaposan a kódot. Ha nem találod a problémát, adj hozzá egy hibakereső parancsot a ciklushoz vagy függvényhez, és ellenőrizd a változók értékeit. Ha az eredmény nem az, amit vártál, cseréld ki – ez egyszerű.

A fenti példában a debuggert a függvény vagy ciklus első soraként kell hozzáadni. Ezután nyisson meg egy hibakeresési fület a Chrome-ban, és elemezze a hatókörben lévő változókat. A következő gombbal nyomon követheti a változásaikat minden iterációval. Ez mind könnyen megtehető, és a legtöbb esetben a probléma könnyen azonosítható.

Mindezekről bővebben itt olvashatsz (krómhoz) és itt (Firefoxhoz).

Szintaxishiba

A JavaScript egyik leggyakoribb hibája a SyntaxError. A szövegszerkesztő bővítmények segíthetnek elkerülni ezeket. Például a Bracket Pair Colorizer különböző színekkel emeli ki a zárójeleket a kódban, míg a Prettier vagy egy hasonló elemzőeszköz lehetővé teszi a hibák gyors megtalálását. A SyntaxErrors valószínűségének csökkentésének legjobb módja a beágyazás minimalizálása.

Oszd meg a hozzászólásokban: mit teszel a hibák elkerülése, vagy a gyors észlelésük és kiküszöbölésük érdekében?

A Skillbox a következőket ajánlja:

• Két éves gyakorlati tanfolyam "PRO webfejlesztő vagyok".
• Online tanfolyam "C# fejlesztő 0-tól".
• Gyakorlati évfolyam "PHP fejlesztő 0-tól PRO-ig".

Forrás: will.com