Příklad výjimky s data- atributy v JavaScriptu

Nechť při načtení stránky server vytvoří HTML kód, ve kterém je uložen název, cena a množství zakoupeného produktu:

<div id="product" data-product="jablko" data-price="1000" data-amount="5"></div>

Vytvořme funkci, která bude přijímat odkaz na element s produktem a zjistí celkovou cenu zboží (cena vynásobená množstvím):

function getCost(elem) {
	return elem.dataset.price * elem.dataset.amount;
}

Pojďme zjistit cenu našeho produktu:

let product = document.querySelector('#product');
let cost = getCost(product);

alert(cost);

Předpokládejme nyní následující situaci: kvůli nějaké poruše na serveru nám poslal zboží, ve kterém chybí cena nebo množství (nebo obojí najednou), například takto:

<div id="product" data-product="jablko" data-price="1000"></div>

Pokud nyní zkusíme spočítat cenu zboží, výsledek na obrazovce zobrazí NaN. Přiznejte, ne příliš informativní.

Ukazuje se, že se musíme nějak pojistit proti tomu, že budou chybět potřebné atributy. To lze udělat dvěma způsoby. První způsob je říci, že toto je normální chování a jednoduše kontrolovat pomocí ifů přítomnost potřebných atributů:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // vrátíme něco, například 0 nebo null nebo false
	}
}

Druhá možnost - je říci, že absence atributu data-price nebo data-amount - je výjimečná situace. V tomto případě budeme vyhazovat výjimku:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'chybí cena nebo množství u produktu'
		};
	}
}

Kterou z těchto dvou variant je zde vhodnější použít - je na volbě programátora. Může považovat problém za normální chování skriptu nebo za výjimečnou situaci.

Předpokládejme, že jsme se rozhodli, že situace je výjimečná. Pak bude kód pro získání ceny zboží vypadat takto:

let product = document.querySelector('#product');

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// nějak reagujeme na výjimku
}

Upravte můj kód tak, aby funkce getCost vyhazovala dva typy výjimek: pokud chybí cena a pokud chybí množství. Dobře promyslete názvy těchto výjimek. V bloku catch zobrazte různé zprávy o chybě pro výjimky různých typů.