Ups, urobil som to znova: Ladenie bežných chýb v JavaScripte

Písanie kódu JavaScript môže byť náročné a niekedy úplne zastrašujúce, ako to mnohí vývojári poznajú. V procese práce nevyhnutne vznikajú chyby a niektoré z nich sa často opakujú. Tento článok určený pre začínajúcich vývojárov hovorí o týchto chybách a ich riešení. Pre prehľadnosť sú názvy funkcií, vlastností a objektov prevzaté z populárna pesnička. To všetko vám pomôže rýchlo si spomenúť, ako opraviť bežné chyby.

Pripomíname vám: pre všetkých čitateľov „Habr“ - zľava 10 000 rubľov pri registrácii do akéhokoľvek kurzu Skillbox pomocou propagačného kódu „Habr“.

Skillbox odporúča: Praktický kurz "Mobile Developer 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)

Vo vyššie uvedenom príklade kódu sa zobrazí chyba Uncaught TypeError: Nedá sa prečítať vlastnosť „lucky“ z undefined. Problém je v tom, že objekt dievča nemá pomenovanú vlastnosť, hoci má vlastnosť name. A keďže vlastnosť girl.named nie je definovaná, nemôžete k nej pristupovať, pretože formálne neexistuje. Ale ak nahradíte girl.named.lucky girl.name, potom bude všetko fungovať a program vráti Lucky.

Môžete sa dozvedieť viac o vlastnostiach Prečítajte si tu.

Ako vyriešiť chyby TypeErrors

Chyby typu sa vyskytujú, keď sa programátor pokúsi vykonať akcie s údajmi, ktoré nezodpovedajú konkrétnemu typu. Príklady zahŕňajú použitie .bold(), vyžiadanie nedefinovanej vlastnosti alebo volanie funkcie, ktorá v skutočnosti funkciou nie je.

Takže, ak sa pokúsite zavolať girl(), dostanete chybu Uncaught TypeError: yourVariable.bold nie je funkcia a dievča nie je funkcia, pretože je to v skutočnosti volaný objekt, nie funkcia.

Aby ste odstránili chyby, musíte študovať premenné. Takže, čo je dievča? Čo sa volá dievča? Môžete to zistiť analýzou kódu, zobrazením premenných pomocou console.log, príkazu debugger alebo zavolaním názvu premennej v konzole. Musíte sa uistiť, že je možné pracovať s typom údajov obsiahnutým v premennej. Ak nesedí, zmeňte ho, napríklad pridajte podmienku alebo skúste..chytiť blok – a získajte kontrolu nad vykonaním operácie.

Pretečenie zásobníka

Ak veríte autorom textu k piesni Baby One More Time (toto je Britney Spears, áno), potom slovo hit v tomto kontexte znamená túžbu speváčky byť znova povolaná (tu je vysvetlenie samotného kontextu pieseň – poznámka prekladateľa). Je možné, že táto túžba povedie k zvýšeniu počtu hovorov v reálnom živote. Ale v programovaní ide o rekurziu, ktorá môže spôsobiť chybu, ak zásobník hovorov pretečie.

Chyby vyzerajú takto:

Chyba: Nedostatok miesta v zásobníku (okraj)
Interná chyba: príliš veľa rekurzie (Firefox)
RangeError: Bola prekročená maximálna veľkosť zásobníka hovorov (Chrome)

K pretečeniu zásobníka dôjde, ak vývojár neberie do úvahy základný prípad v rekurzii alebo ak kód nerieši zamýšľaný prípad.

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

V tomto prípade nemôže byť stillBelieve nikdy nepravda, takže zakaždým sa zavolá oneMoreTime, ale funkcia sa nikdy nedokončí.

Ak sa začnete spoliehať na dvoch priateľov, zníži to osamelosť a nebudete musieť čakať na hovor.

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

Príkladom sú prípady s nekonečnými slučkami, kedy systém nevygeneruje chybové hlásenie, ale stránka, na ktorej sa vykonáva JavaScript kód, jednoducho zamrzne. Toto sa stane, ak slučka while nemá podmienku ukončenia.

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

Problém môžete vyriešiť nasledovne:

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

Ladenie nekonečných slučiek a rekurzií

Ak máte problém s nekonečnou slučkou, musíte zatvoriť kartu v prehliadači Chrome alebo Edge a zatvoriť okno prehliadača vo Firefoxe. Potom musíte kód dôkladne analyzovať. Ak nemôžete nájsť problém, stojí za to pridať príkaz debugger do vašej slučky alebo funkcie a skontrolovať hodnoty premenných. Ak výsledok nezodpovedá tomu, čo sa očakávalo, potom ho vymeníme, to sa dá ľahko urobiť.

Vo vyššie uvedenom príklade by mal byť debugger pridaný ako prvý riadok funkcie alebo slučky. Potom musíte otvoriť kartu ladenia v prehliadači Chrome a analyzovať premenné v rozsahu. Pomocou tlačidla Ďalej môžete sledovať ich zmeny pri každej iterácii. To všetko sa dá ľahko urobiť a vo väčšine prípadov sa problém nájde.

Viac o tom všetkom si môžete prečítať tu (pre chróm) a tu (pre Firefox).

Chyba syntaxe

Jednou z najbežnejších chýb v JavaScripte je SyntaxError. Rozšírenia textového editora vám pomôžu vyhnúť sa im. Napríklad Bracket Pair Colorizer označuje zátvorky v kóde rôznymi farbami a Prettier alebo podobný analytický nástroj umožňuje rýchlo nájsť chyby. Najlepšou možnosťou na zníženie pravdepodobnosti chyby SyntaxError je minimálne vnorenie.

Zdieľajte v komentároch: čo robíte, aby ste predišli chybám alebo ich rýchlo odhalili a odstránili?

Skillbox odporúča:

• Dvojročný praktický kurz "Som PRO web developer".
• Online kurz "C# vývojár od 0".
• Praktický ročníkový kurz "PHP vývojár od 0 po PRO".

Zdroj: hab.com