Proměnné (let, const, var)

Co je proměnná?

Proměnnou si představ jako označenou krabici. Dáš do ní hodnotu a pojmenuješ ji. Kdykoli chceš hodnotu použít, stačí zavolat jméno krabice:

let jmeno = 'Zdeněk';
console.log(jmeno);   // Vypíše: Zdeněk

Proměnná má:

• Jméno – identifikátor, přes který k ní přistupuješ. Nesmí začínat číslicí, nesmí obsahovat mezery ani speciální znaky (kromě _ a $).
• Hodnotu – co v ní je uloženo. Může to být číslo, text, pravda/nepravda, objekt nebo pole.

let – proměnlivá hodnota

let slouží pro proměnné, jejichž hodnota se může měnit. Deklaruješ ji jednou, ale přiřadit novou hodnotu můžeš kdykoli:

let pocet = 0;
pocet = pocet + 1;
console.log(pocet);   // 1

pocet = 10;
console.log(pocet);   // 10

let je platná v bloku kódu (v páru složených závorek {}), kde byla deklarována.

const – neměnná hodnota

const (z anglického constant) slouží pro proměnné, jejichž hodnota se po přiřazení nemění. Pokud se pokusíš hodnotu přepsat, JavaScript vyhodí chybu:

const web = 'crazy-mac.cz';
console.log(web);   // crazy-mac.cz

web = 'jiný-web.cz';   // Chyba! const nelze přepsat

Kdy použít const: vždy, když víš, že hodnota se měnit nebude – název webu, odkaz na HTML prvek, konfigurační hodnota. Obecné pravidlo: používej const jako výchozí volbu, let pouze pokud potřebuješ hodnotu měnit.

var – starý způsob

var je původní způsob deklarace proměnných z počátků JavaScriptu. Má odlišné chování oproti let a const – je platná v celé funkci (nikoli jen v bloku) a podléhá hoistingu (proměnná existuje i před řádkem, kde je deklarována).

var zprava = 'Ahoj';
console.log(zprava);   // Ahoj

Dnes se var téměř nepoužívá. Může způsobovat záhadné chyby kvůli svému chování. V nově psaném kódu vždy preferuj const nebo let.

Typy hodnot

JavaScript je dynamicky typovaný jazyk – proměnná nemusí mít pevně daný typ. Nejčastější typy hodnot:

• String (řetězec) – text v uvozovkách: 'Ahoj', "světe", nebo zpětných uvozovkách: `Ahoj, ${jmeno}`
• Number (číslo) – celá čísla i desetinná: 42, 3.14
• Boolean (logická hodnota) – true nebo false
• null – záměrně prázdná hodnota
• undefined – proměnná existuje, ale ještě nemá hodnotu
• Array (pole) – seznam hodnot: [1, 2, 3], ['a', 'b', 'c']
• Object (objekt) – slovník párů klíč: hodnota: { jmeno: 'Zdeněk', web: 'crazy-mac.cz' }

Základní operátory

S proměnnými se pracuje pomocí operátorů. Nejčastěji používané:

Aritmetické operátory

let a = 10;
let b = 3;

console.log(a + b);  // 13 (sčítání)
console.log(a - b);  // 7  (odčítání)
console.log(a * b);  // 30 (násobení)
console.log(a / b);  // 3.33... (dělení)
console.log(a % b);  // 1  (zbytek po dělení – modulo)

Porovnávací operátory

Vracejí hodnotu true nebo false – používají se v podmínkách:

5 === 5   // true  – rovná se (hodnota i typ)
5 !== 3   // true  – nerovná se
5 > 3     // true  – větší než
5 < 3     // false – menší než
5 >= 5    // true  – větší nebo rovno

Pozor: vždy používej trojitý rovník (===) místo dvojitého (==). Dvojitý rovník porovnává jen hodnotu a může vést k překvapivým výsledkům ("5" == 5 je true); trojitý rovník porovnává i datový typ ("5" === 5 je false).

Spojování řetězců

let jmeno = "Zdeněk";
let pozdrav = "Ahoj, " + jmeno + "!";
console.log(pozdrav); // Ahoj, Zdeněk!

// Moderní způsob – šablonové literály (template literals):
let pozdrav2 = `Ahoj, ${jmeno}!`;
console.log(pozdrav2); // Ahoj, Zdeněk!

Tip od Zdeňka

Zdeněk radí: Jednoduché pravidlo: začni s const. Pokud ti interpret začne hlásit chybu, protože potřebuješ hodnotu měnit, přepni na let. Na var zapomeň – není potřeba. A pro jména proměnných používej popisná anglická slova: yearElement říká víc než x nebo elem1. Tvůj kód budeš číst za půl roku a popisná jména ti ušetří spoustu přemýšlení.