Proměnné v JavaScriptu

Programovat se teoreticky dá i bez nich, prakticky jsou nepostradatelné. Řeč je o proměnných. Zde je stručný (ale ne krátký) aktuální souhrn toho nejdůležitějšího o proměnných v JavaScriptu včetně příkladů a s přihlédnutím ke konstantám.

Pravidla pro psaní proměnných

Název proměnné musí začínat písmenem, dolarem ($), nebo podtržítkem (_). Nesmí začínat číslicí, což je sice někdy škoda, ale na druhou stranu toto omezení počítačům usnadňuje rozlišování čísel a identifikátorů (tj. názvů proměnných, funkcí apod.). Co se týče písmen, je dovoleno používat české znaky (písmena s diakritikou), doporučuje se však, a je to i běžnou praxí, používat výhradně písmena anglické abecedy. Sice to komplikuje psaní českých názvů proměnných (je například docela rozdíl mezi šířka a sirka), ale aspoň nehrozí nějaké špatné zpracování.

Ve zbytku názvu proměnné už mohou být i číslice. Rozhodně tam však nepatří spojovník (-) ani žádné jiné znaky, které jsou v JavaScriptu interpretovány jako operátory. A samozřejmě názvem proměnné nesmí být žádné ze slov, která jsou součástí syntaxe JavaScriptu, tedy klíčová slova (

break, do, in, typeof, case, else, instanceof, var, catch, export, new, void, class, extends, return, while, const, finally, super, with, continue, for, switch, yield, debugger, function, this, default, if, throw, delete, import, try, await)

, hodnoty true, false, null. Kromě těchto ještě existují klíčová slova vyhrazená pro zvažované uplatnění v dalších verzích JavaScriptu enum, implements, interface, package, private, protected,public.

Délka názvu proměnné je libovolná, je tedy možné ji pojmenovat pouze jedním písmenem. Ve většině případů je však lepší volit delší názvy, které dobře vystihují význam dané proměnné, klidně i víceslovné. V názvu proměnné sice nejsou povoleny mezery, ale lze si pomoci jinak, například slova začínat velkými písmeny nebo jako oddělovač použít podtržítko. Nejlepší je držet se zavedené konvence, podle které každé další slovo v proměnné začíná velkým písmenem (příklad: currentElementPositionX nebo zkráceně curElPosX). V případě konstant platí stejná pravidla, ale jiná konvence – je zvykem používat výhradně velká písmena a podtržítka. Na velká a malá písmena je potřeba si dát pozor, protože JavaScript je rozlišuje.

Nad pojmenováváním proměnných se vyplatí chvilku popřemýšlet, neboť nepřesný nebo neurčitý název proměnné při pozdějších úpravách kódu nikomu nic nenapoví. Volba správného jména je velice důležitá, protože, když se na váš kód podíváte pozorně, zjistíte, že jde v podstatě o variace neustále se opakujících konstrukcí a význam jim dodávají právě jména, vysvětluje Aleš Roubíček, proč volit výstižné názvy.

Deklarace proměnných

V JavaScriptu existují tři druhy proměnných (plus ještě konstanty), které se liší oborem platnosti (scope):

• globální proměnné
• lokální proměnné
• proměnné s působností v rozsahu bloku (block-scoped)

Globální i lokální proměnné se deklarují klíčovým slovem var (toto slovo do JavaScriptu proniklo z jazyka Perl). Obvykle se při deklaraci proměnné rovnou přiřadí nějaká hodnota, pokud ne, je výchozí hodnotou undefined. Není nutné každou proměnnou deklarovat zvlášť, pohodlnější je hromadná deklarace.

var x = null, y, z; //deklarace proměnných x, y a z

Pokud je proměnná deklarována mimo funkci, jedná se o globální proměnnou, která platí v celém skriptu. Je-li deklarována uvnitř funkce, jedná se o lokální proměnnou, k níž existuje přístup pouze uvnitř této funkce nebo uvnitř funkcí deklarovaných v této funkci (vnitřní funkce, tzv. closures, si totiž ukládají odkazy na lokální proměnné své mateřské funkce).

Globální i lokální proměnné mohou vznikat i bez explicitní deklarace. Nedeklarované proměnné se v JavaScriptu, není-li přepnut na striktní režim, automaticky interpretují jako globální. To je však spíš nevýhoda, protože případný překlep v názvu proměnné je brán jako nová proměnná, a tedy nezpůsobí ukončení skriptu a chybovou hlášku, takže skript běží dál, ovšem jinak, než jeho autor původně zamýšlel. Za lokální proměnné jsou zase považovány tzv. argumenty, pojmenované parametry funkce, které představují vstupní data.

Kromě těchto proměnných se do JavaScriptu později dostaly ještě proměnné a konstanty, jejichž obor platnosti je v kódu vymezen složenými závorkami ({}). Deklarují se klíčovými slovy let a const. Hodnoty konstant pochopitelně nelze přepisovat, z toho také vyplývá, že hodnota musí být konstantě přidělena hned při její deklaraci.

const PERSON_NAME = "Jan Moravec";

Konstanty byly do JavaScriptu zavedeny kvůli bezpečnosti, aby programátoři měli možnost definovat výchozí hodnoty, které by nemohly být přepsány cizím externím skriptem. Proto není dovoleno je znovu deklarovat. Také není povoleno deklarovat ve stejném oboru proměnnou nebo funkci, která by měla s konstantou společné jméno.

const x = true; 
var x = false; //Chyba!

Obory platnosti: Proč a nač

K čemu vlastně tolik druhů proměnných? Jde o kontext. Často bývá výhodné, nebo dokonce potřebné, aby proměnná platila jen pro danou funkci nebo jen nějaký cyklus či podmínku. Takto je možné deklarovat množství stejnojmenných proměnných, z nichž každá bude platná jen v daném kontextu. Lze si toho mimochodem všimnout i na následujícím příkladu, který ukazuje rozdíl mezi proměnnými deklarovanými klíčovým slovem var a proměnnými deklarovanými klíčovým slovem let.

var x = true;
let y = true; 
{ 
  var x = false;
  let y = false;
  } 
console.log(x); //vypíše false
console.log(y); //vypíše true

Při shodě jména globální a lokální proměnné, dojde uvnitř funkce k uplatnění lokální proměnné, a to dokonce i tehdy, jak dokazuje další příklad, když je proměnná v algoritmu použita ještě před deklarací lokální proměnné.

var x = true;
(function (){
  console.log(x); //nevypíše true, ale undefined
  var x = false;
  })();

Lokální proměnné sice mají prioritu, ale ke globálním proměnným se lze ještě dostat přes globální objekt window. V příkladu tedy stačí jako argument zadat window.x a na konzolu se vypíše hodnota globální proměnné. Složitěji by se to ale řešilo v případě, kdyby proměnná x z nadřazeného kontextu nebyla globální. Nicméně i tak má vytváření proměnných s kolizními názvy smysl. Proměnné, které mají stejný význam, jen v jiném kontextu, by asi bylo poněkud matoucí pojmenovat odlišně. Typickým příkladem je proměnná i, která se obvykle používá pro index.

Alias

Pokud je v JavaScriptu proměnné přiřazen objekt nebo funkce, tak hodnotou té proměnné není přímo daný objekt či funkce, ale právě reference na ně. Naopak v případě jednoduchých datových typů jako jsou čísla, řetězce a logické hodnoty nelze takové reference (tzv. aliasy) vytvářet. Obejít se to dá použitím objektu:

var object = {x: 1};
var aliasToObject = object;
aliasToObject.x++;
console.log(object.x); // vypíše 2

Co dodat?

Práce s proměnnými patří při programování k tomu nejzákladnějšímu. Tím úplně nejzákladnějším je však osvojení si určitých zásad jako je např. deklarování i globálních proměnných, výstižné pojmenovávání proměnných, nenadužívání globalních proměnných, využívání širší palety přiřazovacích operátorů (ne pouze =) atd. Vzhledem k tomu, že programování je činnost hodně náročná na soustředění, může být každá zdánlivě jen nepatrně výhodná praktika efektivní.

Zdroj: ECMAScript 2017 Language Specification