Operátor volitelného řetězení

V tomto článku vám představím velmi užitečný operátor zvaný operátor volitelného řetězení. Abych vám vysvětlil, proč je tak užitečný, dovolte mi nejprve poskytnout trochu upozaděných informací.

Na rozdíl od některých jiných programovacích jazyků je JavaScript poměrně shovívavý, pokud se pokusíte přistupovat k členu objektu, který nebyl definován. Například následující příklad nezpůsobí žádné chyby:

let user = { };

alert(user.name);

Jak vidíte, vytvořím nový objekt uživatele, bez vlastností, a poté se pokusím přistupovat k vlastnosti nazvané "jméno". Tato vlastnost samozřejmě neexistuje, ale místo vyhození chyby a/nebo zastavení provádění, JavaScript jednoduše vrátí "undefined", což je také to, co řekne funkce alert().

Nicméně JavaScript nebude tak shovívavý, pokud se pokusíte přistupovat k objektu, který nebyl definován. Pokud bychom tedy vynechali první řádek předchozího příkladu a pokusili se přistupovat k objektu uživatele, který nyní samozřejmě neexistuje, bude vyhozena chyba:

// Error: Uncaught ReferenceError: user is not defined
alert(user);

Jak vidíte, je vyhozena chyba a provedení skriptu je zastaveno. Samozřejmě situace, kdy se pokoušíte přistupovat k objektu, který nebyl definován, by se neměla stávat často, a pokud ano, je to jasně chyba, která by měla být opravena.

Při práci s komplexními, vnořenými objekty, zejména pokud je obdržíte z externího zdroje, například jako JSON objekty (o těch později), je méně jasné, co bylo definováno a co ne. Takže zvažte následující příklad, kde jsme náš objekt uživatele trochu rozšířili:

let user = 
{
	name:
	{
		firstName: "John",
		lastName: "Doe"
	}
};

alert(user.name.firstName);

Tento příklad bude fungovat správně - přistupujeme pouze k vlastnostem, které byly definovány. Vlastnost name objektu uživatele je nyní také objekt, skládající se ze dvou vlastností, firstName a lastName.

To však také znamená, že pokud bychom se pokusili přistupovat k těmto vnořeným vlastnostem (firstName/lastName) bez toho, aby byl definován nadřazený objekt (name), JavaScript by nebyl tak shovívavý, jak jsme viděli v prvním příkladu:

let user = 
{
	/*name:
	{
		firstName: "John",
		lastName: "Doe"
	}*/
};

// undefined (no error)
alert(user.name);

// Error: Uncaught TypeError: Cannot read properties of undefined (reading 'firstName')
alert(user.name.firstName);

Všimněte si, jak první alert() nezpůsobí chybu, ale druhý ano - můžeme přistupovat k vlastnosti, která nebyla definována (name), ale nemůžeme přistupovat k vlastnosti (firstName) objektu, který nebyl definován (name).

Použití operátoru volitelného řetězení

S tím na paměti jsme konečně dorazili k účelu tohoto článku. Někdy nechcete, aby váš kód vyhazoval chyby, pokud se pokoušíte přistupovat k různým vnořeným vlastnostem. Důvodem často bude, že pracujete se složitými objekty, které dostáváte z externího zdroje, a ty mohou, ale nemusí mít vlastnosti, které byste očekávali. Zde můžeme použít operátor volitelného řetězení:

let user = 
{
	/*name:
	{
		firstName: "John",
		lastName: "Doe"
	}*/
};

// undefined (no error)
alert(user.name);

// undefined (no error)
alert(user.name?.firstName);

Všimněte si velmi malého rozdílu v tomto příkladu, který je na samém konci. Po vlastnosti name jsem přidal otazník, který v tomto kontextu bude fungovat jako operátor podmíněného řetězení (řetězec jsou vnořené vlastnosti).

Použitím tohoto operátoru v podstatě říkám JavaScriptu: "Hej, chtěl bych přistupovat k vlastnosti firstName na objektu name, ale nejsem si úplně jistý, že byl objekt name definován, takže v případě, že nebyl, jsem ochoten přijmout "undefined" jako výsledek - nemusíš vyhazovat žádné chyby!".

Pro více částí

A můžete ho použít pro tolik částí "řetězce", kolik je potřeba, takto:

let user = 
{
};

// undefined (no error)
alert(user.name?.firstName?.firstChar?.secondChar);

Pro metody

Při pokusu o volání metody na objektu musí být metoda definována - v opačném případě bude vyhozena chyba a provádění bude zastaveno:

let user = 
{
};

// Error: Uncaught TypeError: user.getName is not a function"
alert(user.getName());

Pokud ale toto chování nechceme, můžeme použít operátor volitelného řetězení, protože funguje i pro metody. Zde je příklad:

let user = 
{
};

// undefined (no error)
alert(user.getName?.());

Funguje to i v případě, že očekáváte, že tato metoda vrátí objekt, na kterém byste chtěli přistupovat k vlastnosti:

let user = 
{
};

// undefined (no error)
alert(user.getName?.().firstName);

Shrnutí

Při práci s objekty, zejména s komplexními, vnořenými objekty, a obzvláště pokud pocházejí z externích zdrojů, je operátor volitelného řetězení velmi užitečný pro předcházení neočekávaným chybám. Umožní vám pokusit se přistupovat k nedefinovaným objektům/vlastnostem/metodám, aniž by to způsobilo zastavení provádění vašeho kódu.