🥇Oops, I did it again: ladění běžných chyb v JavaScriptu

Někdy je psaní kódu JavaScript obtížné a někdy dokonce děsí, což je mnohým vývojářům známé. Při práci nevyhnutelně dochází k chybám, přičemž některé z nich se opakují poměrně často. V článku určeném začínajícím vývojářům se pojednává o těchto chybách a způsobech jejich řešení. Pro názornost jsou názvy funkcí, vlastností a objektů převzaty z populární písně. To vše pomáhá rychle si zapamatovat, jak opravovat běžné chyby.

Připomínáme: pro všechny čtenáře "Habra" – sleva 10 000 korun při registraci na jakýkoli kurz Skillbox s promokódem "Habr".
Skillbox doporučuje: Praktický kurz "Mobilní vývojář PRO".

TypeError: vlastnost není definována

let dívka = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(dívka.named.lucky)

Příklad výše uvedeného kódu vyvolává chybu Uncaught TypeError: Cannot read property ‘lucky’ of undefined. Problém je v tom, že objekt dívka nemá vlastnost named, ačkoli má vlastnost name. A protože vlastnost dívka.named není definována, nelze na ni přistupovat, protože formálně neexistuje. Pokud však nahradíme dívka.named.lucky za dívka.name, vše začne fungovat a program vrátí Lucky.

O vlastnostech se můžete dozvědět více zde.

Způsoby odstranění chyb TypeError

Chyby TypeError se objevují, když se programátor pokusí provádět operace s daty, která neodpovídají stanovenému typu. Jako příklad lze vzít použití .bold(), dotaz na vlastnost undefined nebo volání funkce, která ve skutečnosti není funkcí.

Pokud se tedy pokusíte zavolat dívka(), objeví se chyba Uncaught TypeError: yourVariable.bold is not a function a dívka is not a function, protože ve skutečnosti je vyvolán objekt, nikoli funkce.

Chcete-li odstranit chyby, je třeba prostudovat proměnné. Co je dívka? A co je dívka.named? To lze zjistit, pokud analyzujete kód, vytisknete proměnné pomocí console.log, použijete příkaz debugger nebo vyvoláte název proměnné v konzole. Je třeba se ujistit, že existuje možnost manipulovat s typem dat obsaženým v proměnné. Pokud nevyhovuje, změňte jej, například přidejte podmínku nebo blok try..catch – a získáte kontrolu nad vykonáváním operace.

Přetečení zásobníku

Pokud věřit autorům písničky Baby One More Time (ano, to je Britney Spears), slovo hit v tomto kontextu znamená, že zpěvačka touží, aby jí znovu zavolali (zde je uvedeno vysvětlení samotného kontextu písně — pozn. překladatele). Je docela možné, že toto přání povede ke zvýšení počtu hovorů v reálném životě. V programování to ale znamená rekurzi, která může vyvolat chybu v případě přeplnění zásobníku volání.

Chyby vypadají takto:

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

Přeplnění zásobníku nastává, pokud vývojář nezohlednil základní případ v rekurzi nebo pokud kód neodkazuje na předpokládaný případ.

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

V tomto případě nemůže stillBelieve nikdy nabýt hodnoty false, takže se vždy vykoná volání oneMoreTime, ale funkce se nikdy nedokončí.

Pokud však začneme doufat ve dva přátele, sníží to loneliness (osamělost) a hovor už nebude nutný.

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

Jako příklad lze uvést případy s nekonečnými cykly, kdy systém nevydává zprávu o chybě, a stránka, na které se provádí JavaScriptový kód, jednoduše zamrzne. K tomu dochází, pokud cyklus while nemá podmínku pro ukončení.

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

Problém lze 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 cyklů a rekurzí

Pokud nastal problém s nekonečným cyklem, v Chrome nebo Edge je třeba zavřít kartu, a ve Firefoxu okno prohlížeče. Poté je nutné pečlivě analyzovat kód. Pokud se problém nepodařilo najít, je dobré do cyklu nebo funkce přidat příkaz debugger a zkontrolovat hodnotu proměnných. Pokud výsledek neodpovídá očekávanému, je třeba provést náhradu, což lze snadno udělat.

V příkladu uvedeném výše by se debugger měl přidat jako první řádek funkce nebo cyklu. Poté je nutné otevřít debuggovací záložku v Chrome a analyzovat proměnné v rozsahu. Pomocí tlačítka next můžete sledovat jejich změny při každé iteraci. Všechny tyto kroky jsou jednoduché a ve většině případů se problém nachází.

O všem tomto se můžete dozvědět více zde (pro Chrome) a zde (pro Firefox).

Syntax Error

Jednou z nejčastějších chyb v JavaScriptu je SyntaxError. Jejich vyhýbání usnadní rozšíření textového editoru. Například Bracket Pair Colorizer vyznačuje závorky v kódu různými barvami, zatímco Prettier nebo podobný nástroj analýzy umožňuje rychle najít chyby. Nejlepším způsobem, jak snížit pravděpodobnost vzniku SyntaxError, je minimalizovat vnoření.

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

Skillbox doporučuje:

Dvouroční praktický kurz „Jsem webový vývojář PRO“.

Online kurz „C# vývojář od nuly“.

Praktický roční kurz „PHP vývojář od 0 do PRO“.

Zdroj: habr.com