5 funkcí JavaScriptu, které zjednoduší každodenní kód

Testovací pokrytí je číslo, které mnoho týmů sleduje, ale málokdo si u něj položí základní otázku: chrání mě před chybami, nebo mě jen uklidňuje? Rozdíl je zásadní. Pokrytí vzniká měřením řádků, větví nebo funkcí, které testy spustily. Jenže spuštěný řádek neznamená ověřenou logiku. Test může kód zavolat, projít skrz něj a přesto netvrdit nic o tom, zda výsledek odpovídá očekávání. Pokud v testu chybí assertion, pokrytí roste a ochrana ne.

Nakonec počítejte s tím, že některé chyby v debuggeru prostě neuvidíte, protože se projeví jen v produkci nebo jen na konkrétním zařízení. Síťové požadavky kontrolujte v panelu sítě, kde zjistíte stavový kód, hlavičky i tělo odpovědi. Chyby v obsluze událostí zase odhalí panel, který zobrazuje posluchače na vybraném prvku. Kombinace zarážek, sledovaných výrazů a přehledu o síti pokryje drtivou většinu situací. Kdo místo toho jen přidává další console.log, ten se připravuje o přesnost i čas.

Častým zdrojem zmatku je klíčové slovo this. V konzoli se jeho hodnota mění podle toho, In the event you adored this informative article along with you would like to obtain more info concerning dokončEní Interiéru i implore you to go to our own web site. jak funkci voláte. V panelu Scope si proto vždy zkontrolujte, čemu this skutečně odpovídá. Další pasti je tichý převod typů: 0 == '0' vrátí true, ale 0 === '0' false. Pro ladění používejte striktní porovnání, předejdete překvapením. Pokud se hodnota neaktualizuje podle očekávání, ověřte, zda pracujete s kopií pole nebo objektu. Metody jako slice vracejí nové pole, kdežto splice mění původní.

Zvolte jeden formát zápisu a držte se ho. Klíčová jména pište podle významu, ne podle anglické věty. Místo textu jako klíč používejte krátké identifikátory, například „tlacitko_ulozit". Výhoda je zřejmá: když se změní česká věta, nemusíte přepisovat klíče ve všech jazycích. Naopak nevýhoda přístupu „anglická věta jako klíč" se projeví ve chvíli, kdy potřebujete stejný text použít dvakrát v jiném kontextu. Pak vznikají duplicitní klíče a v překladech chaos.

Překlad je práce, ne doplněk. Určete, kdo za jazykové sady odpovídá, ať už je to člověk, nebo externí překladatel. Bez vlastníka se soubory rozpadnou během několika měsíců. Do repozitáře ukládejte i pravidla, podle kterých se texty píšou: jak se píší data, jak se zkracují slova, zda se používají uvozovky. Stejný termín přeložený dvěma způsoby mate uživatele víc než chybějící překlad. Slovník pojmů proto není formalita, ale nástroj, který drží projekt pohromadě.

Chybové stavy a autentizace patří do dokumentace stejně jako úspě

Nakonec se vyplatí naučit se číst sledování síťových požadavků v panelu Síť neboli Network. Neúspěšné volání API se často projeví až jako chyba v JavaScriptu, ale příčina je jinde – chybí hlavička, je špatná adresa nebo server vrátil stav 500. V panelu Network klikněte na požadavek a zkontrolujte kartu Response a Headers. Pokud data nedorazí včas, zkuste v konzoli zavolat await fetch(...) a prohlédnout si výsledek. Ladění není o hádání, ale o pozorování. Čím přesněji si položíte otázku, tím rychleji najdete odpověď.

Breakpointy místo hádání Mnohem silnější nástroj než výpisy jsou breakpointy v panelu Zdroje neboli Sources. Kliknutím na číslo řádku zastavíte běh skriptu přesně v místě, které vás zajímá. Poté můžete krok za krokem procházet kód tlačítky Step over, Step into a Step out. V každém kroku sledujte panel Scope, kde jsou vidět aktuální hodnoty lokálních i globálních proměnných. Typická chyba je, že vývojář nastaví breakpoint na řádek, který se nikdy nevykoná kvůli špatné podmínce. Pokud se běh nezastaví, ověřte, zda je skript skutečně načtený a zda v daném místě nekončí dřív, než se k němu dostanete.

Pro asynchronní kód se hodí podmíněné breakpointy. Pravým tlačítkem na číslo řádku zvolte Add conditional breakpoint a napište výraz, například i === 5. Skript se zastaví jen tehdy, když je podmínka splněna. To šetří čas při procházení dlouhých cyklů. U funkcí, které se volají mnohokrát, můžete také použít debugger; přímo v kódu. Prohlížeč se zastaví na tomto příkazu, pokud jsou otevřené vývojářské nástroje. Pozor ale na to, abyste debugger; omylem nenechali v produkční verzi – zbytečně to zpomalí běh a uživatele to zmate.

Šablony řetězců, destrukce a další pomocníci Šablonové literály (template literals) umožňují vkládat proměnné přímo do řetězce pomocí zpětných apostrofů a syntaxe $proměnná. Odpadá tak zbytečné spojování pomocí plus. Typická chyba: zapomenutí zpětných apostrofů místo běžných uvozovek, což vede k chybě syntaxe. Dále destrukce (destructuring) zjednodušuje přístup k vlastnostem objektů a prvkům polí. Místo const jmeno = uzivatel.jmeno; const vek = uzivatel.vek; stačí napsat const jmeno, vek = uzivatel;. Pozor rekonstrukce koupelny krok za krokem na vnořené objekty – je třeba je destruovat postupně.