Oops, urobil som to znova: ladenie bežných chýb v JavaScripte

Písanie kódu v JavaScripte môže byť niekedy náročné a občas dokonca desivé, čo je mnohým vývojárom známe. Počas práce nevyhnutne vznikajú chyby, pričom niektoré z nich sa objavujú pomerne často. V článku, určenom pre začínajúcich vývojárov, sa hovorí o týchto chybách a spôsoboch ich riešenia. Pre názornosť sú názvy funkcií, vlastností a objektov prevzaté z populárnej piesne. To všetko pomáha rýchlo si zapamätať, ako opraviť bežné chyby.

Pripomíname: pre všetkých čitateľov „Habr“ — zľava 10 000 rubľov pri zapísaní na akýkoľvek kurz Skillbox s promo kódom „Habr“.

Skillbox odporúča: Praktický kurz „Mobilný vývojár PRO“.

TypeError: vlastnosť nie je definovaná

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)

Príklad kódu uvedený vyššie vyhadzuje chybu Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Problém spočíva v tom, že objekt girl nemá vlastnosť named, aj keď má vlastnosť name. A keďže vlastnosť girl.named nie je definovaná, nie je k nej možné získať prístup, pretože formálne neexistuje. Ak však nahradíme girl.named.lucky za girl.name, všetko začne fungovať a program vráti Lucky.

Viac o vlastnostiach sa možno prečítať tu.

Spôsoby odstránenia chýb TypeError

Chyby TypeError sa vyskytujú, keď sa programátor pokúša vykonávať operácie s údajmi, ktoré nezodpovedajú určitému typu. Ako príklad môžeme uviesť použitie .bold(), dotazovanie na vlastnosť undefined alebo volanie funkcie, ktorá v skutočnosti nie je funkciou.

Takže, ak sa pokúsime zavolať girl (), objaví sa chyba Uncaught TypeError: yourVariable.bold is not a function a girl is not a function, pretože sa v skutočnosti volá objekt, nie funkcia.

Aby sme chyby odstránili, je potrebné preskúmať premenné. Čo presne je girl? A čo je girl.named? Zistiť to môžeme analýzou kódu, výpisom premenných pomocou console.log, príkazu debugger alebo vyvolaním názvu premennej v konzole. Je potrebné sa uistiť, že máme možnosť manipulovať s typom údajov, ktorý sa nachádza v premennej. Ak nevyhovuje, zmeňte ho, napríklad pridajte podmienku alebo blok try..catch – a získate kontrolu nad vykonaním operácie.

Preplnenie zásobníka

Ak veríme autorom piesne Baby One More Time (to je Britney Spears, áno), slovo hit v tomto kontexte znamená želanie speváčky, aby jej zavolali znova (tu je vysvetlenie samotného kontextu piesne, — pozn. prekl. ). Je pravdepodobné, že toto želanie povedie k zvýšeniu počtu telefonátov v reálnom živote. No v programovaní ide o rekurziu, ktorá môže spôsobiť chybu v prípade preplnenia zásobníka volaní.

Chyby vyzerajú nasledovne:

Error: Out of stack space (Edge)
InternalError: too much recursion (Firefox)
RangeError: Maximum call stack size exceeded (Chrome)

Preplnenie zásobníka nastáva, ak vývojár nezohľadnil základný prípad v rekurzii alebo ak kód neodkazuje na predpokladaný prípad.

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

V tomto prípade stillBelieve nikdy nemôže nadobudnúť hodnotu false, preto sa vždy bude volať oneMoreTime, ale vykonanie funkcie sa nikdy nedokončí.

Ak začneme veriť v dvoch priateľov, zníži sa tým loneliness (samota) a telefonát nebude potrebné čakať.

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

Príkladom môžu byť prípady s nekonečnými cyklami, keď systém nevydá chybové hlásenie a stránka, na ktorej sa vykonáva JavaScriptový kód, jednoducho zamrzne. K tomu dochádza, ak slučka while nemá podmienku na ukončenie.

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

Problém možno vyriešiť nasledovne:

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

Ladenie nekonečných cyklov a rekurzií

Ak nastal problém s nekonečným cyklom, v Chrome alebo Edge treba zatvoriť kartu a vo Firefoxe — okno prehliadača. Potom je potrebné dôkladne analyzovať kód. Ak sa problém nepodarilo nájsť, treba pridať príkaz debugger do cyklu alebo funkcie a skontrolovať hodnotu premenných. Ak výsledok nezodpovedá očakávaniu, nahraďte ho, to sa dá jednoducho spraviť.

V príklade, ktorý je uvedený vyššie, by ste mali pridať debugger ako prvý riadok funkcie alebo cyklu. Potom musíte otvoriť debuggovaciu kartu v Chrome a analyzovať premenné v scope. Pomocou tlačidla next môžete sledovať ich zmenu pri každej iterácii. Je to jednoduché a v mnohých prípadoch je problém odhalený.

O všetkom tomto sa môžete dozvedieť viac tu (pre Chrome) a tu (pre Firefox).

Chyba v syntaxi

Jednou z najbežnejších chýb v JavaScripte je SyntaxError. Vyvarovať sa im môžu pomôcť rozšírenia textového editora. Takže Bracket Pair Colorizer označuje zátvorky v kóde rôznymi farbami, zatiaľ čo Prettier alebo podobný analytický nástroj umožňuje rýchlo nájsť chyby. Najlepší spôsob, ako znížiť pravdepodobnosť výskytu SyntaxError, je minimalizovať hĺbku vnorenia.

Podeľte sa v komentároch: čo robíte, aby ste sa vyhli chybám alebo ich rýchlo odhalili a odstránili?

Skillbox odporúča:

• Dvojročný praktický kurz „Som webový vývojár PRO“.
• Online kurz C# vývojár od základov.
• Praktický ročný kurz „PHP vývojár od 0 do PRO“.

Zdroj: habr.com