Proměnné

JavaScriptová aplikace musí většinu času pracovat s informacemi. Uvedeme dva příklady:

1. Online obchod – informace se mohou týkat prodávaného zboží a nákupního vozíku.
2. Chatovací aplikace – informace mohou zahrnovat uživatele, zprávy a mnoho dalšího.

K ukládání těchto informací se používají proměnné.

Proměnná

Proměnná je „pojmenovaný sklad“ dat. Proměnné můžeme používat k ukládání zboží, návštěvníků i jiných dat.

K vytvoření proměnné v JavaScriptu se používá klíčové slovo let.

Níže uvedený příkaz vytvoří (jiným slovem deklaruje) proměnnou s názvem „zpráva“:

let zpráva;

Nyní do ní můžeme uložit nějaká data pomocí operátoru =:

let zpráva;

zpráva = 'Ahoj'; // uložíme řetězec 'Ahoj' do proměnné jménem zpráva

Řetězec se nyní uloží do paměťové oblasti, která je vyhrazena pro tuto proměnnou. Můžeme k ní přistoupit pomocí názvu proměnné:

let zpráva;
zpráva = 'Ahoj!';

alert(zpráva); // zobrazí obsah proměnné

Abychom byli stručnější, můžeme zkombinovat deklaraci proměnné a přiřazení dat do jednoho řádku:

let zpráva = 'Ahoj!'; // definujeme proměnnou a přiřadíme jí hodnotu

alert(zpráva); // Ahoj!

Na jednom řádku můžeme deklarovat i více proměnných:

let uživatel = 'Jan', věk = 25, zpráva = 'Ahoj';

Může se to zdát kratší, ale nedoporučujeme to. Pro účely lepší čitelnosti raději uvádějte každou proměnnou na novém řádku.

Víceřádková varianta je trochu delší, ale snadněji se čte:

let uživatel = 'Jan';
let věk = 25;
let zpráva = 'Ahoj';

Někteří lidé definují více proměnných i tímto víceřádkovým stylem:

let uživatel = 'Jan',
  věk = 25,
  zpráva = 'Ahoj';

…Nebo dokonce tímto stylem „čárka napřed“:

let uživatel = 'Jan'
  , věk = 25
  , zpráva = 'Ahoj';

Technicky všechny tyto varianty dělají totéž, takže je to jen otázkou osobního vkusu a estetiky.

var zpráva = 'Ahoj';

Analogie s reálným životem

Koncept „proměnné“ můžeme snadno pochopit, když si ji představíme jako „krabičku“ na data, na níž je nalepen štítek s unikátním názvem.

Například proměnnou zpráva si můžeme představit jako krabičku se štítkem "zpráva", v níž je hodnota "Ahoj!":

Do krabičky můžeme uložit libovolnou hodnotu.

Můžeme ji také změnit tolikrát, kolikrát chceme:

let zpráva;

zpráva = 'Ahoj!';

zpráva = 'Světe!'; // hodnota se změní

alert(zpráva);

Když se hodnota změní, stará data jsou z proměnné odstraněna:

Můžeme také deklarovat dvě proměnné a zkopírovat data z jedné do druhé.

let ahoj = 'Ahoj světe!';

let zpráva;

// zkopírujeme 'Ahoj světe!' z proměnné ahoj do proměnné zpráva
zpráva = ahoj;

// nyní obě proměnné obsahují stejná data
alert(ahoj); // Ahoj světe!
alert(zpráva); // Ahoj světe!

let zpráva = "Toto";

// opakované 'let' vede k chybě
let zpráva = "Tamto"; // Syntaktická chyba: 'zpráva' již byla deklarována

Názvy proměnných

V JavaScriptu platí pro názvy proměnných dvě omezení:

1. Název musí obsahovat pouze písmena, číslice nebo symboly $ a _.
2. První znak nesmí být číslice.

Příklady platných názvů:

let uživatelskéJméno;
let test123;

Když název obsahuje více slov, obvykle se používá tzv. velbloudí notace. To znamená, že slova následují hned za sebou a každé kromě prvního začíná velkým písmenem: můjVelmiDlouhýNázev.

Zajímavé je, že v názvech je možné používat i znak dolaru '$' a podtržítko '_'. Jsou to obyčejné symboly bez zvláštního významu, podobně jako písmena.

Tyto názvy jsou platné:

let $ = 1; // deklarujeme proměnnou s názvem "$"
let _ = 2; // a nyní proměnnou s názvem "_"

alert($ + _); // 3

Příklady nesprávných názvů proměnných:

let 1a; // nesmí začínat číslicí

let moje-jméno; // spojovník '-' není v názvu povolen

let имя = '...';
let 我 = '...';

let let = 5; // proměnnou nelze pojmenovat "let", chyba!
let return = 5; // nelze ji ani pojmenovat "return", chyba!

// poznámka: v tomto příkladu není "use strict"

čslo = 5; // pokud proměnná "čslo" ještě neexistuje, je vytvořena

alert(čslo); // 5

"use strict";

čslo = 5; // chyba: proměnná čslo není definována

Konstanty

Chceme-li deklarovat konstantní (neměnící se) proměnnou, použijeme const místo let:

const mojeDatumNarození = '18.04.1982';

Proměnné deklarované pomocí const se nazývají „konstanty“ a není možné jim přiřadit jinou hodnotu. Pokus o to by ohlásil chybu:

const mojeDatumNarození = '18.04.1982';

mojeDatumNarození = '01.01.2001'; // chyba, nelze změnit konstantu!

Když má programátor jistotu, že hodnota proměnné se nikdy nezmění, může ji deklarovat pomocí const, aby tuto skutečnost pojistil a všem jasně sdělil.

Konstanty velkými písmeny

Je široce rozšířenou praktikou používat konstanty jako názvy obtížně zapamatovatelných hodnot, které jsou známy ještě před spuštěním programu.

Názvy takových konstant se uvádějí velkými písmeny a s podtržítky.

Například vytvoříme konstanty pro barvy v tzv. „webovém“ (hexadecimálním) formátu:

const BARVA_ČERVENÁ = "#F00";
const BARVA_ZELENÁ = "#0F0";
const BARVA_MODRÁ = "#00F";
const BARVA_ORANŽOVÁ = "#FF7F00";

// ...když si máme zvolit barvu
let barva = BARVA_ORANŽOVÁ;
alert(barva); // #FF7F00

Výhody:

• BARVA_ORANŽOVÁ se pamatuje mnohem lépe než "#FF7F00".
• Je mnohem snadnější špatně napsat "#FF7F00" než BARVA_ORANŽOVÁ.
• Při čtení kódu dává BARVA_ORANŽOVÁ mnohem větší smysl než #FF7F00.

Kdy bychom měli používat pro konstantu velká písmena a kdy bychom ji měli pojmenovat obvyklým způsobem? Ujasníme si to.

Být „konstanta“ znamená prostě to, že hodnota proměnné se nikdy nezmění. Některé konstanty jsou však známy již před spuštěním programu (například hexadecimální hodnota červené barvy) a pak jsou konstanty, které se vypočítají až za běhu programu, ale jejich vypočtená hodnota se nikdy nezmění.

Příklad:

const dobaNačítáníStránky = /* doba, kterou trvá načíst webovou stránku */;

Hodnota proměnné dobaNačítáníStránky není známa dříve, než se stránka načte, proto je pojmenována obvyklým způsobem. Je to však konstanta, protože se po přiřazení již nezmění.

Jinými slovy, názvy konstant zapsané velkými písmeny se používají jen pro pojmenování „natvrdo uvedených“ hodnot.

Pojmenovávejte věci správně

Když už mluvíme o proměnných, je tady jedna velice důležitá věc.

Název proměnné by měl mít jasný a jednoznačný význam a měl by popisovat data, která jsou v proměnné uložena.

Pojmenovávání proměnných je jednou z nejdůležitějších a nejsložitějších dovedností v programování. Rychlý pohled na názvy proměnných nám může prozradit, zda kód psal začátečník nebo zkušený vývojář.

V reálných projektech většinu času nezabere psaní něčeho úplně nového od základů, ale úprava a rozšiřování již existujícího kódu. Když se vrátíme k nějakému kódu poté, co jsme nějakou dobu dělali něco jiného, je mnohem jednodušší najít potřebné informace, když jsou vhodně pojmenovány. Nebo, jinými slovy, když proměnné mají vhodné názvy.

Než deklarujete proměnnou, dobře si promyslete její název. Bohatě se vám to vyplatí.

Některá pravidla, která je vhodné dodržovat, jsou:

• Používejte názvy čitelné člověkem, například uživatelskéJméno nebo nákupníVozík.
• Zdržte se zkratek nebo krátkých názvů typu a, b, c, leda že byste opravdu dobře věděli, co děláte.
• Volte názvy co nejpopisnější a nejstručnější. Příklady špatných názvů jsou data nebo hodnota. Takové názvy nic neříkají. Je vhodné je používat jen tehdy, když je z kontextu kódu naprosto zřejmé, jaká data nebo hodnota se v proměnné nachází.
• Dohodněte se na pojmech se svým týmem a promyslete si je. Jestliže se návštěvník stránky nazývá „uživatel“, pak byste příslušné proměnné měli pojmenovat aktuálníUživatel nebo novýUživatel, a ne aktuálníNávštěvník nebo novýPánVeMěstě.

Zní to jednoduše? Bezpochyby ano, ale vytvářet popisné a stručné názvy proměnných v praxi jednoduché není.

Shrnutí

Deklarovat proměnné pro ukládání dat můžeme pomocí klíčových slov var, let nebo const.

• let – je moderní deklarace proměnné.
• var – je deklarace proměnné ze staré školy. Obvykle ji vůbec nepoužíváme, ale v kapitole Starý příkaz „var“ probereme drobné rozdíly oproti let pro případ, že byste je potřebovali znát.
• const – je jako let, ale hodnota proměnné se nesmí měnit.

Proměnné by měly být pojmenovány tak, abychom snadno pochopili, co obsahují.