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

A JavaScript-kód írása kihívást jelenthet, és néha kifejezetten megfélemlítő is lehet, amint azt sok fejlesztő ismeri. A munkafolyamat során elkerülhetetlenül előfordulnak hibák, és ezek egy része gyakran megismétlődik. Ez a kezdő fejlesztőknek szóló cikk ezekről a hibákról és azok megoldásáról szól. Az érthetőség kedvéért a függvények, tulajdonságok és objektumok nevei innen származnak népszerű dal. Mindez segít abban, hogy gyorsan emlékezzen a gyakori hibák kijavítására.

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".

TypeError: a tulajdonság nincs megadva

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 példakód az Uncaught TypeError: Nem olvasható a undefined 'lucky' tulajdonságát. A probléma az, hogy a lány objektumnak nincs named tulajdonsága, bár van name tulajdonsága. És mivel a girl.named tulajdonság nincs definiálva, nem tud hozzáférni, mert formálisan nem létezik. De ha a girl.named.lucky-t lecseréled a girl.name-re, akkor minden működni fog, és a program visszaadja a Lucky-t.

Az ingatlanokról többet megtudhat olvassa el itt.

A TypeErrors megoldása

Típushibák akkor fordulnak elő, amikor a programozó olyan adatokon próbál meg műveleteket végrehajtani, amelyek nem egyeznek egy adott típussal. Ilyen például a .bold() használata, definiálatlan tulajdonság kérése, vagy olyan függvény meghívása, amely valójában nem függvény.

Tehát, ha megpróbálja meghívni a girl()-et, akkor az Uncaught TypeError hibaüzenetet kapja: a yourVariable.bold nem függvény, és a girl nem függvény, mert valójában egy objektum, amelyet hívnak, nem egy függvény.

A hibák kiküszöbölése érdekében tanulmányoznia kell a változókat. Szóval, mi az a lány? Mi az a girl.named? Ezt megtudhatja a kód elemzésével, a változók megjelenítésével a console.log használatával, a debugger paranccsal vagy a konzolban a változó nevének meghívásával. Meg kell győződnie arról, hogy a változóban lévő adattípussal kezelhető-e. Ha nem illik, módosítsa, például adjon hozzá egy feltételt, vagy próbálja meg..catch block - és vegye át az irányítást a művelet végrehajtása felett.

Halom túlcsordulás

Ha hiszel a Baby One More Time című dal szövegének szerzőinek (ez Britney Spears, igen), akkor a sláger szó ebben a szövegkörnyezetben az énekesnő vágyát jelenti, hogy újra hívják (itt van a magyarázat a zene kontextusára). dal – fordítói megjegyzés). Könnyen lehet, hogy ez a vágy a valós életben a hívások számának növekedéséhez vezet. De a programozásban ez egy rekurzió, amely hibát okozhat, ha a hívási verem túlcsordul.

A hibák így néznek ki:

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

Veremtúlcsordulás akkor következik be, ha a fejlesztő nem veszi figyelembe az alapesetet a rekurzióban, vagy ha a kód nem foglalkozik a tervezett esettel.

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, így a oneMoreTime minden alkalommal meghívásra kerül, de a függvény soha nem fejeződik be.

Ha elkezd két barátra támaszkodni, ez csökkenti a magányt, és nem kell várnia 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 ciklusú esetek, amikor a rendszer nem generál hibaüzenetet, hanem egyszerűen lefagy az oldal, amelyen a JavaScript kód lefut. Ez akkor történik, ha a while ciklusnak nincs lezárási feltétele.

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

A problémát a következőképpen oldhatja meg:

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

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

Ha végtelen hurokkal kapcsolatos problémája van, be kell zárnia a lapot a Chrome-ban vagy az Edge-ben, és be kell zárnia a böngészőablakot a Firefoxban. Ezt követően gondosan elemeznie kell a kódot. Ha nem találja a problémát, érdemes egy hibakereső parancsot hozzáadni a ciklushoz vagy függvényhez, és ellenőrizni a változók értékeit. Ha az eredmény nem felel meg a vártnak, akkor cseréljük ki, ez könnyen megtehető.

A fenti példában a hibakeresőt a függvény vagy ciklus első soraként kell hozzáadni. Ezután meg kell nyitnia a hibakeresés lapot a Chrome-ban, elemezve a változókat a hatókörben. A következő gombbal nyomon követheti a változásokat minden iteráció során. Mindezt könnyű megtenni, és a legtöbb esetben megtalálják a problémát.

Minderről bővebben itt olvashat (krómhoz) és itt (Firefoxhoz).

Szintaktikai hiba

A JavaScript egyik leggyakoribb hibája a SyntaxError. A szövegszerkesztő bővítmények segítenek elkerülni őket. Például a Bracket Pair Colorizer különböző színekkel jelöli meg a zárójeleket a kódban, a Prettier vagy egy hasonló elemző eszköz pedig lehetővé teszi a hibák gyors megtalálását. A SyntaxError valószínűségének csökkentésére a legjobb megoldás a minimális beágyazás.

Oszd meg a megjegyzésekben: mit teszel a hibák megelőzése vagy a gyors észlelés és kiküszöbölés é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