Jejda, udělal jsem to znovu: Ladění běžných chyb v JavaScriptu

Psaní kódu JavaScript může být náročné a někdy přímo zastrašující, jak je známo mnoha vývojářům. V procesu práce nevyhnutelně vznikají chyby a některé z nich se často opakují. Tento článek, zaměřený na začínající vývojáře, pojednává o těchto chybách a jejich řešení. Pro přehlednost jsou názvy funkcí, vlastností a objektů převzaty z populární písnička. To vše vám pomůže rychle si zapamatovat, jak opravit běžné chyby.

Připomínáme: pro všechny čtenáře "Habr" - sleva 10 000 rublů při zápisu do jakéhokoli kurzu Skillbox pomocí propagačního kódu "Habr".

Skillbox doporučuje: Praktický kurz "Mobile Developer PRO".

TypeError: vlastnost není definována

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)

Výše uvedený příklad kódu vyvolá chybu Uncaught TypeError: Nelze přečíst vlastnost 'lucky' z undefined. Problém je v tom, že objekt girl nemá pojmenovanou vlastnost, ačkoli vlastnost name má. A protože vlastnost girl.named není definována, nemůžete k ní přistupovat, protože formálně neexistuje. Pokud ale nahradíte girl.named.lucky girl.name, pak bude vše fungovat a program vrátí Lucky.

Můžete se dozvědět více o vlastnostech čtěte zde.

Jak vyřešit TypeErrors

K chybám typu dochází, když se programátor pokusí provést akce s daty, která neodpovídají určitému typu. Příklady zahrnují použití .bold(), dotaz na nedefinovanou vlastnost nebo volání funkce, která ve skutečnosti funkcí není.

Pokud se tedy pokusíte zavolat girl(), dostanete chybu Uncaught TypeError: yourVariable.bold není funkce a girl není funkce, protože je to ve skutečnosti volaný objekt, nikoli funkce.

Chcete-li odstranit chyby, musíte studovat proměnné. Takže, co je dívka? Co je girl.named? Můžete to zjistit analýzou kódu, zobrazením proměnných pomocí console.log, příkazu debugger nebo voláním názvu proměnné v konzole. Musíte se ujistit, že je možné pracovat s datovým typem obsaženým v proměnné. Pokud to nesedí, změňte to, přidejte například podmínku nebo zkuste..catch block – a získejte kontrolu nad provedením operace.

Přetečení zásobníku

Pokud věříte autorům textu písně Baby One More Time (to je Britney Spears, jo), pak slovo hit v tomto kontextu znamená zpěvaččinu touhu nechat se znovu zavolat (zde je vysvětlení samotného kontextu píseň – pozn. překladatele). Klidně se může stát, že tato touha povede ke zvýšení počtu hovorů v reálném životě. Ale v programování se jedná o rekurzi, která může způsobit chybu, pokud zásobník volání přeteče.

Chyby vypadají takto:

Chyba: Nedostatek místa zásobníku (Edge)
InternalError: příliš mnoho rekurze (Firefox)
RangeError: Překročena maximální velikost zásobníku volání (Chrome)

K přetečení zásobníku dochází, pokud vývojář nezohledňuje základní případ v rekurzi nebo pokud kód neřeší zamýšlený případ.

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

V tomto případě nemůže být stillBelieve nikdy nepravdivé, takže pokaždé bude voláno oneMoreTime, ale funkce se nikdy nedokončí.

Pokud se začnete spoléhat na dva přátele, sníží to osamělost a nebudete muset čekat na telefonát.

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

Příkladem jsou případy s nekonečnými smyčkami, kdy systém nevygeneruje chybovou hlášku, ale stránka, na které se spouští JavaScript kód, prostě zamrzne. K tomu dojde, pokud smyčka while nemá podmínku ukončení.

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

Problém můžete vyřešit následujícím způsobem:

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

Ladění nekonečných smyček a rekurzí

Pokud máte problém s nekonečnou smyčkou, musíte zavřít kartu v Chrome nebo Edge a zavřít okno prohlížeče ve Firefoxu. Poté musíte kód pečlivě analyzovat. Pokud nemůžete najít problém, stojí za to přidat do smyčky nebo funkce příkaz ladicího programu a zkontrolovat hodnoty proměnných. Pokud výsledek neodpovídá tomu, co se očekávalo, pak jej vyměníme, to lze snadno provést.

Ve výše uvedeném příkladu by měl být debugger přidán jako první řádek funkce nebo smyčky. Poté musíte otevřít kartu ladění v prohlížeči Chrome a analyzovat proměnné v rozsahu. Pomocí tlačítka Další můžete sledovat jejich změny při každé iteraci. To vše je snadné a ve většině případů je problém nalezen.

Více o tom všem si můžete přečíst zde (pro Chrome) a tady (pro Firefox).

Chyba syntaxe

Jednou z nejčastějších chyb v JavaScriptu je SyntaxError. Rozšíření textového editoru vám pomohou se jim vyhnout. Například Bracket Pair Colorizer označuje závorky v kódu různými barvami a Prettier nebo podobný analytický nástroj umožňuje rychle najít chyby. Nejlepší možností, jak snížit pravděpodobnost chyby SyntaxError, je minimální vnoření.

Podělte se v komentářích: co děláte, abyste chybám předešli nebo je rychle odhalili a odstranili?

Skillbox doporučuje:

• Dvouletý praktický kurz "Jsem PRO webový vývojář".
• Online kurz "C# vývojář od 0".
• Praktický roční kurz "PHP vývojář od 0 do PRO".

Zdroj: www.habr.com