03.11 Globální Scope

Výuka

Proč globální scope?

Dosud jsi viděl vnořené scope - scope uvnitř funkcí a bloků. Ale kde končí scope chain? Co je nejzevnější scope?

const appName = "Moje Aplikace";  // Kde tohle patří?

function showWelcome() {
  console.log("Vítejte v " + appName);
}

showWelcome();
// → Vítejte v Moje Aplikace

Globální scope (global scope) je nejzevnější scope - ten, který obsahuje všechny ostatní scope. Je to společný prostor, kde jsou proměnné viditelné všude v programu.

Proč je to užitečné?

• Built-ins - JavaScript zde ukládá vestavěné funkce (console, Math, Date atd.)
• Sdílení mezi soubory - pokud máš více .js souborů, globální scope je spojuje
• Konstanty aplikace - API URL, názvy aplikace, konfigurace

Představ si to jako: Veřejná nástěnka v bytovém domě. Každý byt (funkce) má své soukromé věci, ale všichni můžou číst nástěnku. Co tam napíšeš, je viditelné všude.

Jak to funguje?

Globální scope = nejzevnější úroveň tvého kódu:

1. Proměnné deklarované MIMO funkce/bloky jsou globální
2. Jsou viditelné VŠUDE v programu
3. Vytvářejí konec scope chain (není kam dál hledat)
4. V prohlížeči jsou dostupné jako vlastnosti window objektu

Důležité:

• Globální proměnné jsou mocné, ale nebezpečné - každý je může změnit
• Minimalizuj použití globálního scope - může způsobit konflikty
• Používej ho pro skutečně sdílené věci, ne pro každou proměnnou

Klíčové koncepty

• Globální scope - nejzevnější scope, viditelný všude
• Globální proměnná - proměnná deklarovaná v globálním scope
• Built-ins - vestavěné funkce/objekty JavaScriptu (console, Math, Date...)
• window objekt - v prohlížeči reprezentuje globální scope
• Namespace pollution - příliš mnoho globálních proměnných = chaos

JavaScript

Příklad 1: Co je globální scope

// ✅ GLOBÁLNÍ SCOPE - mimo funkce
const globalVar = "Jsem globální";

function test() {
  // ❌ LOKÁLNÍ SCOPE - uvnitř funkce
  const localVar = "Jsem lokální";

  console.log(globalVar);  // ✅ Vidí globální
  console.log(localVar);   // ✅ Vidí lokální
}

test();

console.log(globalVar);  // ✅ Vidí globální
console.log(localVar);   // ❌ Error: localVar is not defined

Co se stalo?

• globalVar je mimo všechny funkce → je v globálním scope
• localVar je uvnitř funkce → je v lokálním scope
• Funkce vidí ven do globálního scope
• Globální scope nevidí dovnitř funkcí

Příklad 2: Globální scope je viditelný všude

const appName = "Moje Todo App";
const version = "1.0";

function showHeader() {
  console.log(appName + " v" + version);
}

function showFooter() {
  console.log("© 2025 " + appName);
}

showHeader();  // → Moje Todo App v1.0
showFooter();  // → © 2025 Moje Todo App

Co se stalo?

• appName a version jsou globální
• Obě funkce je vidí - nemusíš je předávat jako parametry
• To je užitečné pro konfig a konstanty používané všude

Příklad 3: Vestavěné globální objekty (built-ins)

// Vestavěné globální objekty - dostupné VŽDY

console.log(Math.PI);          // → 3.141592653589793
console.log(Math.max(1, 5));   // → 5

const now = new Date();
console.log(now);              // → aktuální datum/čas

console.log("Hello");          // console je globální objekt

Co se stalo?

• Math, Date, console jsou vestavěné globální objekty
• JavaScript je automaticky dává do globálního scope
• Nemusíš je importovat nebo deklarovat - prostě jsou tam!

Příklad 4: Globální scope v prohlížeči - window objekt

var name = "Alice";  // Globální s var

console.log(name);         // → "Alice"
console.log(window.name);  // → "Alice" (v prohlížeči!)

// window je globální objekt v prohlížeči
console.log(window.Math);      // → Math objekt
console.log(window.console);   // → console objekt

Co se stalo?

• V prohlížeči je globální scope reprezentován objektem window
• Globální proměnné vytvořené s var jsou vlastnosti window
• Vestavěné objekty (Math, console) jsou také na window

Poznámka: let a const v globálním scope nejsou vlastnosti window:

var withVar = "var";
let withLet = "let";
const withConst = "const";

console.log(window.withVar);    // → "var" ✅
console.log(window.withLet);    // → undefined ❌
console.log(window.withConst);  // → undefined ❌

Příklad 5: Proč minimalizovat globální scope

// ❌ ŠPATNĚ - všechno globální
var count = 0;
var message = "Hello";
var result = 0;

function increment() {
  count++;  // Modifikuje globální
}

function calculate() {
  result = count * 2;  // Používá a modifikuje globální
}

// Co když jiný soubor také používá "count"? KONFLIKT!

// ✅ DOBŘE - lokalizované scope
function createCounter() {
  let count = 0;  // Lokální, izolované

  return {
    increment: () => count++,
    getValue: () => count
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getValue());  // → 1

Co se stalo?

• První příklad má příliš mnoho globálních proměnných - riziko konfliktů
• Druhý příklad používá closure - data jsou zapouzdřená
• Méně globálních = bezpečnější a čitelnější kód

Příklad 6: Konflikty v globálním scope

// soubor1.js
var data = [1, 2, 3];

function processData() {
  console.log("Zpracovávám:", data);
}

// soubor2.js (nahrán POTOM)
var data = "user input";  // 💥 Přepíše data z soubor1.js!

processData();
// → Zpracovávám: user input (očekával jsi pole!)

Co se stalo?

• Oba soubory sdílejí stejný globální scope
• Druhý soubor přepsal data z prvního souboru
• processData teď pracuje s nesprávnými daty!
• Proto minimalizuj globální proměnné!

TypeScript

TypeScript respektuje stejný globální scope jako JavaScript!

// Globální konstanty s typy
const API_URL: string = "https://api.example.com";
const MAX_RETRIES: number = 3;

function fetchData(endpoint: string): void {
  console.log(`Fetching from ${API_URL}/${endpoint}`);
  console.log(`Max retries: ${MAX_RETRIES}`);
}

fetchData("users");
// → Fetching from https://api.example.com/users
// → Max retries: 3

TypeScript pro globální scope:

// TypeScript může definovat typy globálních objektů
declare global {
  interface Window {
    myCustomGlobal: string;
  }
}

// Teď můžeš bezpečně použít
window.myCustomGlobal = "hodnota";

TypeScript přidává:

• ✅ Typová kontrola globálních proměnných - nemůžeš přiřadit špatný typ
• ✅ Deklarace globálních typů - declare global pro vlastní globální objekty
• ✅ IntelliSense - editor ti poradí, co je v globálním scope k dispozici

Rozdíl JS vs TS

JavaScript:

const API_URL = "https://api.example.com";

function getData() {
  console.log(API_URL);      // ✅ Funguje
  console.log(UNKNOWN_VAR);  // 💥 Runtime error: UNKNOWN_VAR is not defined
}

getData();

TypeScript:

const API_URL: string = "https://api.example.com";

function getData(): void {
  console.log(API_URL);      // ✅ Funguje
  console.log(UNKNOWN_VAR);  // ❌ Compile error: Cannot find name 'UNKNOWN_VAR'
}

getData();

Rozdíl:

• JavaScript najde chybu až při spuštění - když scope chain nedojde k proměnné
• TypeScript najde chybu při psaní - ví, co je v globálním scope

Tip

💡 Používej UPPERCASE pro globální konstanty:

// ✅ Dobře - jasně vidíš, že je to globální konstanta
const API_URL = "https://api.example.com";
const MAX_ATTEMPTS = 3;
const DEFAULT_TIMEOUT = 5000;

function connect() {
  console.log(`Connecting to ${API_URL}`);
  console.log(`Max attempts: ${MAX_ATTEMPTS}`);
}

💡 Namespace pattern - seskup globální proměnné:

// ❌ Špatně - znečisťuje globální scope
var appName = "MyApp";
var appVersion = "1.0";
var appAuthor = "Alice";

// ✅ Dobře - jeden globální objekt
const App = {
  name: "MyApp",
  version: "1.0",
  author: "Alice"
};

console.log(App.name);  // → "MyApp"

💡 Vyhni se var v globálním scope - používej const/let:

// ⚠️ var vytváří vlastnost window objektu
var globalWithVar = "problém";
console.log(window.globalWithVar);  // → "problém"

// ✅ const/let NEVYTVÁŘÍ vlastnost window
const globalWithConst = "lepší";
console.log(window.globalWithConst);  // → undefined

// Obojí je globální, ale const je bezpečnější