Čistý kód v JavaScriptu: praktický průvodce pro každodenní vývoj

Začněte u názvů. Funkce by měla být pojmenovaná podle toho, co dělá, ne jak to dělá. Místo processData použijte filterOrdersByStatus. Proměnné popisujte jejich obsah: userList místo arr, isLoading místo flag. Vyhněte se zkratkám, které nejsou zjevné – cfg, tmp nebo data neříkají nic. Pokud si nejste jistí názvem, znamená to, že funkce pravděpodobně dělá více věcí najednou.

Pomalý web odrazuje návštěvníky i vyhledávače. Než začnete investovat do drahých nástrojů, zaměřte se na základy. Klíčem je měřit, optimalizovat a znovu měřit. Nejprve si otevřete nástroj pro vývojáře přímo v prohlížeči a podívejte se na čas načítání jednotlivých souborů. Často zjistíte, že největší zpoždění způsobují obrázky ve špatném formátu nebo příliš mnoho skriptů třetích stran.

DevOps není nástroj ani konkrétní pozice, ale způsob spolupráce mezi vývojem a provozem. Cílem je zkrátit dobu od nápadu po nasazení do produkce a zároveň zvýšit stabilitu systému. Pokud s DevOps začínáte, nezačínejte nákupem drahých nástrojů. Začněte analýzou toho, kde věci drhnou – kde dochází k chybám při nasazování, kde je ruční práce a kde komunikace mezi týmy vázne.

Když nasadíte měření, buďte opatrní na falešně pozitivní výsledky. Testy, které jen spustí kód bez ověření výstupu, uměle zvyšují pokrytí. Kontrolujte, že každý test obsahuje aserce (např. assertEquals). Bez nich je pokrytí k ničemu. Doporučuji také měřit pokrytí během CI, nikoli jen lokálně, aby bylo číslo standardizované. Typická chyba začátečníků je měřit pokrytí až po proběhnutí všech testů, ale to neukáže, co se stane při selhání. Ideální je měřit pokrytí po každém testu zvlášť a agregovat výsledky podle potřeb.

Základní princip je jednoduchý: definujete typy a TypeScript je kontroluje při kompilaci. Když píšete funkci, která přijímá číslo a vrací řetězec, deklarujete to explicitně. Tím se vyhnete situacím, kdy do funkce omylem předáte objekt a zjistíte to až v produkci. Nejdůležitější je naučit se rozlišovat mezi primitivními typy (string, number, boolean) a složitějšími strukturami, jako jsou rozhraní (interface) nebo typové aliasy. Právě rozhraní se používají k popisu tvaru objektů a usnadňují práci s API odpověďmi či konfiguračními soubory.

Při práci s funkcemi si osvojte volitelné parametry (znak ?) a výchozí hodnoty. Volitelné parametry umožňují zavolat funkci bez daného argumentu, ale uvnitř musíte kontrolovat, zda je hodnota definovaná. Výchozí hodnoty vám ušetří ruční přiřazování undefined. Dávejte si také pozor na typy, které se mění v průběhu času – použijte generické typy, pokud chcete, aby funkce fungovala s libovolným typem při zachování typové bezpečnosti. Například funkce pro zpracování pole by měla být generická, abyste nepřišli o informaci o typu prvků.

Pokud přicházíte z čistého JavaScriptu, první setkání s TypeScriptem může působit jako zbytečná byrokracie. Po pár dnech práce si ale začnete všímat, že mnoho chyb, které jste dříve odhalovali až za běhu, se nyní objeví přímo v editoru. TypeScript není samostatný jazyk, ale nadstavba, která do JavaScriptu přidává statické typování. Jeho hlavní přínos spočívá v tom, že umožňuje lépe popsat tvary dat a vztahy mezi nimi, což oceníte zejména u větších projektů nebo týmové spolupráce.

Komentáře používejte střídmě. Dobrý kód se komentuje sám, pokud jsou názvy výstižné a logika přehledná. Komentář by měl vysvětlovat „proč", ne „co". Například „provedeme kontrolu, protože starší prohlížeče nepodporují fetch" je užitečné, ale „přičteme 1" není. Pokud zjistíte, že potřebujete komentář k objasnění složitého výrazu, raději výraz rozdělte do proměnných s názvy, které popisují jednotlivé kroky.

Nakonec vše změřte znovu, ideálně z více zařízení a připojení. Nestačí se dívat na rychlost z rychlého domácího internetu – otestujte si web i z mobilu s pomalejším připojením. Buďte trpěliví: optimalizace není jednorázová akce, ale průběžná péče. Sledujte, které změny přinesly největší efekt, a podle toho upravujte další postup. I malé zlepšení rychlosti může znamenat vyšší spokojenost uživatelů a lepší pozice ve výsledcích vyhledávání.

Nakonec pamatujte na konzistenci. Zvolte si styl – úvodzovky, středníky, odsazení – a držte se ho v celém projektu. Využijte nástroje, které formátují kód automaticky, a nastavte si lintovací pravidla na začátku projektu. Čistý kód není o dokonalosti, ale o tom, aby se v něm dalo snadno hledat chyby a přidávat nové funkce bez rizika rozbití stávajícího chování.

Vyvarujte se také hlubokému vnořování. Pokud máte tři úrovně if-else nebo for smyček, je to signál k refaktoringu. Použijte early return: místo if (condition) { … } else { … } napište if (!condition) return; a pokračujte rovnou. Tím se snižuje mentální zátěž a kód je lineárnější. Stejně tak se vyhněte opakování – pokud se nějaká logika vyskytuje na více místech, vytáhněte ji do sdílené funkce.