Vlastnosti v hranatých závorkách

Vlastnost se dá přečíst ještě jinak: pomocí hranatých závorek, ve kterých je klíč v uvozovkách.

const sklad = {
    jablka: 12,
    citrony: 0,
    broskve: 30
};

console.log(sklad["broskve"]);

30

sklad["broskve"] znamená totéž co sklad.broskve, jen je to delší. Proč to tedy psát? Protože do hranatých závorek můžete dát jakoukoli hodnotu, i proměnnou. Pak klíč nemusíte znát už ve chvíli, kdy program píšete:

const sklad = { jablka: 12, citrony: 0, broskve: 30 };

const ovoce = "jablka";
console.log(sklad[ovoce]);

12

JavaScript se nejdřív podívá do proměnné ovoce, najde v ní text "jablka" a pak přečte vlastnost jablka. Nejvíc se to hodí ve funkcích, kam klíč přijde jako argument:

const sklad = { jablka: 12, citrony: 0, broskve: 30 };

function jeNaSklade(ovoce) {
    return sklad[ovoce] > 0;
}

console.log(jeNaSklade("jablka"));
console.log(jeNaSklade("citrony"));

true
false

Každé volání přečte jinou vlastnost a funkce funguje pro jakékoli ovoce, i pro takové, které do objektu přidáte později.

Typické chyby:

• sklad.ovoce se do proměnné ovoce nepodívá. Hledá vlastnost s klíčem ovoce, a protože žádnou takovou nenajde, dostanete undefined. Stejně dopadne sklad["ovoce"]: v uvozovkách je "ovoce" jen text, ne proměnná.
• sklad[jablka] bez uvozovek hledá proměnnou jablka, která neexistuje: ReferenceError: jablka is not defined.

Takže: když klíč znáte už při psaní kódu, použijte tečku. Když je klíč v proměnné, použijte hranaté závorky, a to bez uvozovek. Hranaté závorky fungují i při změně hodnoty: sklad[ovoce] = 5;.