JavaScript: úvod, základní syntaxe a funkcionální programování

JavaScript a webové programování
P. Varga
JavaScript: Úvod, základní syntaxe a funkční programování

Proč JavaScript a kde běží

JavaScript je univerzální, dynamicky typovaný jazyk, který běží v prohlížečích, na serveru (Node.js), v desktopových i mobilních aplikacích (Electron, React Native) a v prostředích edge runtimes (Cloudflare Workers, Deno). Vznikl pro interaktivitu webu, dnes však pokrývá celé spektrum vývoje. Standard jazyka udržuje organizace TC39 pod názvem ECMAScript (ES2015+ = moderní JS).

Jak se spouští kód a jak vypadá soubor

  • V prohlížeči: vložte <script type="module" src="/app.js"></script> do HTML. Atribut type="module" aktivuje moduly ES.
  • V Node.js: spusťte node app.js. Chcete-li používat moduly ES, nastavte v package.json hodnotu "type": "module".
  • Přísný režim: začněte soubor direktivou "use strict" (v modulech je aktivní implicitně), která zpřísňuje pravidla a eliminuje tiché chyby.

Proměnné: let, const, var a oblast platnosti

  • const – neměnná vazba (hodnotu nelze znovu přiřadit); ideální výchozí volba.
  • let – proměnná s blokovou oblastí platnosti ({}), vhodná pro měnitelné hodnoty.
  • var – má funkční oblast platnosti, hoisting může vést k chybám; v moderním kódu se nedoporučuje.
  • TDZ (Temporal Dead Zone): přístup k let/const před deklarací vyvolá chybu.

Datové typy a práce s hodnotami

  • Primitivní typy: string, number (včetně NaN a Infinity), boolean, null, undefined, bigint, symbol.
  • Referenční typy: object (včetně Array, Function, Date, Map, Set).
  • Kontrola typu: typeof 42 === "number", Array.isArray([]).
  • Pravdivé/nepravdivé hodnoty: nepravdivé jsou 0, "", null, undefined, false, NaN. V podmínkách dávejte pozor na implicitní konverze.

Operátory: aritmetika, logika a porovnání

  • Aritmetické: +, -, *, /, %, **. Pozor: + slouží také ke zřetězení řetězců.
  • Porovnání: upřednostňujte striktní operátory === a !== před ==/!=, které provádějí volnou konverzi.
  • Logické: &&, ||, ! a ?? (operátor nullish coalescing) pro hodnoty null/undefined.
  • Volitelné řetězení: obj?.prop?.() umožňuje bezpečný přístup k hluboko vnořeným vlastnostem.
  • Destrukturalizace a spread: const {a,b} = obj, const [x,...rest] = arr, const c = {...obj, k:1}.

Řídicí struktury: podmínky a cykly

  • Podmínky: if/else, ternární operátor cond ? A : B, switch pro větvení.
  • Cykly: for, while, do...while. V moderním kódu používejte for...of pro iterovatelné struktury a metody polí forEach, map, filter, reduce.
  • Iterace objektů: Object.keys(), Object.entries() a for...in (s opatrností; pokud nejsou odfiltrovány, zahrnuje i vlastnosti zděděné z prototypů).

Funkce: deklarace, výrazy a šipkové funkce

  • Deklarace: function suma(a, b) { return a + b } – díky hoistingu lze funkci volat ještě před její deklarací.
  • Funkční výraz: const suma = function(a, b) { return a + b } – funkce je přiřazena do proměnné.
  • Šipková funkce: const suma = (a, b) => a + b – má lexikální this a nevytváří vlastní arguments ani prototype.
  • Výchozí a zbytkové parametry: function f(a = 1, ...rest) {}.
  • Čisté funkce: snadněji se testují a nemají vedlejší efekty.

Objekty a prototypy, třídy a dědičnost

  • Objektový literál: const p = { jméno: "Eva", věk: 33 }; zkrácený zápis { jméno, věk } a počítané klíče {[klíč]: hodnota}.
  • Prototypový model: každý objekt má prototyp; metody se sdílejí prostřednictvím prototypového řetězce.
  • Třídy (syntaktický cukr): class Osoba { constructor(jméno){ this.jméno=jméno } pozdrav(){ return `Ahoj, ${this.jméno}` } }.
  • Dědičnost: class Zaměstnanec extends Osoba { constructor(jméno, role){ super(jméno); this.role=role } }.

this, call/apply/bind a běhový kontext

  • Hodnota this: závisí na způsobu volání (metoda, volná funkce, konstruktor, obsluha události). Šipková funkce přebírá this z okolního kontextu a jeho hodnota se dynamicky nemění.
  • Opětovné svázání: funkce.call(ctx, a, b), funkce.apply(ctx, [a, b]), funkce.bind(ctx) pro trvalé svázání.

Moduly: import a export

  • Pojmenovaný export: export const PI = 3.14, export function kruh().
  • Výchozí export: export default function hlavní(){}.
  • Import: import hlavní, { PI } from "./modul.js". Moduly se načítají asynchronně a vyhodnocují se pouze jednou.

Asynchronní JavaScript: callbacky, Promise a async/await

  • Promise: představuje budoucí hodnotu; fetch("/data").then(r => r.json()).
  • async/await: syntaktický cukr nad Promise; const data = await fetch(url).then(r => r.json()). Chyby vždy zachytávejte pomocí try...catch.
  • Paralelní zpracování: const [a,b] = await Promise.all([pa(), pb()]) umožňuje souběžné provedení.
  • Event loop a mikroúlohy/makroúlohy: callbacky Promise (mikroúlohy) mají přednost před setTimeout (makroúlohou).

Základy práce s DOM a událostmi

  • Selektory: document.querySelector("#btn"), document.querySelectorAll(".item").
  • Manipulace: el.textContent = "Ahoj", el.classList.add("active"), el.setAttribute("role","button").
  • Události: el.addEventListener("click", (e) => { e.preventDefault() }). Delegaci lze řešit prostřednictvím rodičovského prvku a kontroly pomocí e.target.matches().
  • Přístupnost: vždy zohledněte pořadí při procházení klávesou Tab, správu fokusu a role ARIA.

Chyby a výjimky: try...catch, throw, Error

  • Zachycení: try { risk() } catch (err) { console.error(err.message) } finally { cleanup() }.
  • Vlastní chyby: throw new Error("Neplatný vstup"); v asynchronních funkcích kombinujte s await.
  • Doplnění kontextu: přidejte cause nebo použijte vlastní typy chyb.

Čistý kód: linting, formátování a konvence

  • Linting: ESLint s pravidly (no-undef, eqeqeq, no-var, prefer-const).
  • Formátování: Prettier pro jednotný styl; integrujte jej do CI.
  • Konvence: camelCase pro proměnné, PascalCase pro třídy, UPPER_CASE pro konstanty.

Časté nástrahy a jak se jim vyhnout

  • Volná rovnost: == provádí nečekané konverze (např. "" == 0 je true); používejte ===.
  • Mutace objektů/polí: upřednostňujte neměnný přístup – vytvářejte kopie pomocí spreadu {...o}, [...a].
  • Hoisting var: vyhýbejte se var, používejte let/const.
  • Neošetřené Promise: Promise vždy vraťte nebo použijte await; nezapomeňte zachytit chyby.
  • Úniky do globálního prostoru: deklarace bez let/const vytváří globální proměnné (v přísném režimu vyvolá chybu).

Mini kuchařka: drobné idiomy a vzory

  • Bezpečný přístup: const město = uživatel?.adresa?.město ?? "neznámé".
  • Výchozí parametry: function greet(jméno = "host") { return `Ahoj, ${jméno}` }.
  • Destrukturalizace parametrů: function render({id, title}) {} zvyšuje čitelnost.
  • Mapování a filtrování: const aktivní = items.filter(i => i.enabled).map(i => i.name).

Výkon a osvědčené postupy

  • Debounce/throttle u událostí scroll/resize/input, abyste snížili počet volání obslužných rutin.
  • Dávkové změny DOM – upřednostňujte jedno vložení většího fragmentu před mnoha drobnými operacemi.
  • Memoizace pro nákladné výpočty; v knihovnách pro UI používejte specializované nástroje.

Jak pokračovat v učení: standard, nástroje a ekosystém

  • Návrhy ECMAScriptu: sledujte fáze procesu TC39, abyste se vyznali v novinkách (records/tuples, pattern matching apod.).
  • Nástroje: Node.js + npm/pnpm, nástroje pro sestavování (Vite, esbuild), testování (Jest, Vitest), typování (TypeScript) – přestože není součástí JS, velmi pomáhá.
  • Rozhraní API prohlížeče: Fetch, Web Storage, Web Components, Canvas, Web Workers – rozšiřují možnosti běhového prostředí.

Závěr: pevné základy pro moderní vývoj

Ovládnutí základní syntaxe JavaScriptu – proměnných, typů, funkcí, objektů, modulů a asynchronního modelu – je předpokladem pro práci s jakýmkoli frameworkem či platformou. Držte se striktního porovnávání, používejte let/const, vyhýbejte se zbytečným mutacím a pište testovatelný, čitelný kód. Díky těmto principům budete moci bezpečně využívat bohatý ekosystém moderního JavaScriptu.