Základy JavaScriptu

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 edge runtimes (Cloudflare Workers, Deno). Vznikl pro interaktivitu webu, dnes 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 ES moduly.
• V Node.js: spusťte node app.js. Pro ES moduly použijte "type": "module" v package.json.
• Strict mode: začněte soubor direktivou "use strict" (u modulů 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á v blokovém scope ({}), vhodná pro změnitelné hodnoty.
• var – funkční scope, 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

• Primitiva: 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([]).
• Truthy/falsy: falsy je 0, "", null, undefined, false, NaN. V podmínkách dávejte pozor na implicitní konverze.

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

• Aritmetické: +, -, *, /, %, **. Pozor: + je i zřetězení řetězců.
• Porovnání: preferujte === a !== (strict) před ==/!= (volná konverze).
• Logické: &&, ||, !, a ?? (nullish coalescing) pro null/undefined.
• Volitelné řetězení: obj?.prop?.() bezpečně přistupuje k hluboký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ínka: if/else, ternární cond ? A : B, switch pro větvení.
• Cyklus: for, while, do...while. Moderněji použijte for...of pro iterovatelné struktury a metody pole forEach, map, filter, reduce.
• Iterace objektů: Object.keys(), Object.entries() a for...in (s opatrností, enumeruje i prototypy, pokud nebyly odfiltrovány).

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

• Deklarace: function suma(a, b) { return a + b } – hoisting umožní volání nad deklarací.
• Funkční výraz: const suma = function(a, b) { return a + b } – nese se v proměnné.
• Arrow: const suma = (a, b) => a + b – lexikální this, nevytváří vlastní arguments ani prototype.
• Výchozí a rest parametry: function f(a = 1, ...rest) {}.
• Čisté funkce: snadněji testovatelné, bez vedlejších efektů.

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

• Objektový literál: const p = { jméno: "Eva", věk: 33 }; zkratky { jméno, věk } a počítané klíče {[klíč]: hodnota}.
• Prototypový model: každý objekt má prototyp; metody jsou sdílené přes prototypový řetězec.
• 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, event handler). Arrow funkce nedynamicky váže this z okolí.
• Rebinding: funkce.call(ctx, a, b), funkce.apply(ctx, [a, b]), funkce.bind(ctx) pro trvalé svázání.

Moduly: import a export

• Export pojmenovaný: export const PI = 3.14, export function kruh().
• Export default: export default function hlavní(){}.
• Import: import hlavní, { PI } from "./modul.js". Moduly jsou asynchronní a vyhodnocují se jednou.

Asynchronní JavaScript: callbacky, Promise a async/await

• Promise: reprezentuje budoucí hodnotu; fetch("/data").then(r => r.json()).
• async/await: syntaktický cukr nad Promise; const data = await fetch(url).then(r => r.json()). Vždy obalte chybami pomocí try...catch.
• Paralelizace: const [a,b] = await Promise.all([pa(), pb()]) pro souběh.
• Event loop a mikro/makro úlohy: Promise callbacky (mikro) mají přednost před setTimeout (makro).

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() }). Delegace přes rodiče s testem e.target.matches().
• Dostupnost: vždy uvažujte tab index, focus management a ARIA role.

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"); u asynchronních funkcí kombinujte s await.
• Obohacení kontextem: přidejte cause nebo 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 konzistentní styl; integrace do CI.
• Konvence: camelCase pro proměnné, PascalCase pro třídy, UPPER_CASE pro konstanty.

Časté pasti a jak se jim vyhnout

• Volná rovnost: == provádí nečekané konverze (např. "" == 0 je true); používejte ===.
• Mutace objektů/ polí: preferujte imutabilní přístup – kopie přes spread {...o}, [...a].
• Hoisting var: vyhněte se var, používejte let/const.
• Nezvládnuté Promise: vždy vraťte nebo await Promise; přidejte zachycení chyb.
• Globální úniky: deklarace bez let/const vytváří globální proměnné (ve strict módu chyba).

Mini-kuchařka: drobné idiomy a vzory

• Bezpečný přístup: const město = uživatel?.adresa?.město ?? "neznámé".
• Default 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).

Performance a dobré praktiky

• Debounce/throttle pro události scroll/resize/input, abyste snížili počet handlerů.
• Batching změn DOM – preferujte jedno vložení většího fragmentu před mnoha drobnými operacemi.
• Memoizace pro nákladné výpočty; v UI knihovnách využívejte specializované nástroje.

Jak se učit dál: standard, nástroje a ekosystém

• ECMAScript návrhy: sledujte fáze TC39, abyste rozuměli novinkám (records/tuples, pattern matching apod.).
• Nástroje: Node.js + npm/pnpm, bundlery (Vite, esbuild), testování (Jest, Vitest), typování (TypeScript) – i když není součástí JS, velmi pomáhá.
• Prohlížečové API: Fetch, Web Storage, Web Components, Canvas, Web Workers – rozšiřují možnosti runtime.

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 přísného porovnávání, používejte let/const, vyhýbejte se zbytečným mutacím a pište testovatelný, čitelný kód. S těmito principy budete schopni bezpečně stavět na bohatém ekosystému moderního JavaScriptu.