1.4 Proměnné: var, let, const

Výuka

V JavaScriptu máme 3 způsoby deklarace proměnných:

Klíčové koncepty

Scope (rozsah):

• var - platí v celé funkci (function scope)
• let/const - platí jen v bloku {} (block scope)

Hoisting (povýšení):

• var - deklarace se "vytáhne" nahoru, inicializace zůstane
• let/const - temporal dead zone (TDZ) - nelze použít před deklarací

Re-assignment (přepsání):

• const - nelze přepsat referenci (ale obsah objektu/pole lze měnit!)

JavaScript

// var - funkční scope, hoisting
var legacy = 1;
function test() {
  var x = 10;
  if (true) {
    var x = 20;  // ⚠️ Přepíše x z funkce!
  }
  console.log(x);  // 20
}

// let - blokový scope
let counter = 0;
if (true) {
  let counter = 10;  // ✅ Jiná proměnná
  console.log(counter);  // 10
}
console.log(counter);  // 0

// const - nelze přepsat referenci
const PI = 3.14159;
// PI = 3.14;  // ❌ Error: Assignment to constant

// Ale obsah objektu/pole lze měnit!
const user = { name: 'Jan' };
user.name = 'Petr';  // ✅ OK
user.age = 25;       // ✅ OK
// user = {};        // ❌ Error

const arr = [1, 2, 3];
arr.push(4);         // ✅ OK
// arr = [];         // ❌ Error

TypeScript

// V TS stejně používáš let/const, ale s typovými anotacemi
var legacy: number = 1;      // ⚠️ Nepoužívat
let counter: number = 0;     // ✅ Proměnná
const PI: number = 3.14159;  // ✅ Konstanta

// TS často odvodí typ sám (inference)
let count = 0;          // number (odvozeno)
const name = 'Jan';     // 'Jan' (literal type)

// Explicitní typování
let age: number;
age = 25;               // ✅ OK
// age = '25';          // ❌ Error

// Const s objekty
const user: { name: string; age: number } = {
  name: 'Jan',
  age: 25
};
user.age = 26;          // ✅ OK (property lze měnit)
// user = {};           // ❌ Error (referenci nelze změnit)

Rozdíl JS vs TS

JavaScript:

• Typy se kontrolují za běhu
• Proměnná může měnit typ: let x = 5; x = 'hi'; ✅

TypeScript:

• Typy se deklarují a kontrolují při kompilaci
• Proměnná má pevný typ: let x: number = 5; x = 'hi'; ❌

Stejné v obou:

• var/let/const fungují stejně
• Scope pravidla jsou identická
• Hoisting a TDZ fungují stejně

Tip

💡 Best practices:

// ❌ Špatně
var data = [];  // Nepoužívej var

// ✅ Dobře
const data = [];     // Default: použij const
let counter = 0;     // Jen když potřebuješ měnit hodnotu

💡 Temporal Dead Zone (TDZ):

console.log(x);  // ❌ ReferenceError
let x = 5;

// vs.

console.log(y);  // undefined (hoisting)
var y = 5;

💡 Const neznamená immutable:

const obj = { a: 1 };
obj.a = 2;           // ✅ OK - měníš property
obj.b = 3;           // ✅ OK - přidáváš property
// obj = { a: 2 };   // ❌ Error - měníš referenci