Príklad výnimky s data- atribútmi v JavaScripte

Predpokladajme, že pri načítaní stránky server vytvorí HTML kód, v ktorom je uložený názov, cena a množstvo zakúpeného produktu:

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

Vytvorme funkciu, ktorá bude prijímať odkaz na element s produktom a nájsť celkovú cenu tovaru (cenu vynásobiť množstvom):

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

Nájdime cenu nášho produktu:

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

alert(cost);

Predpokladajme teraz nasledujúcu situáciu: kvôli nejakej poruche na serveri nám poslal tovar, v ktorom chýba cena alebo množstvo (alebo oboje naraz), napríklad takto:

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

Ak sa teraz pokúsime vypočítať cenu tovaru, na obrazovke sa zobrazí výsledok NaN. Súhlasíte, nie je veľmi informatívny.

Ukazuje sa, že sa musíme nejako chrániť pred tým, že budú chýbať potrebné atribúty. To sa dá urobiť dvoma spôsobmi. Prvý spôsob je povedať, že je to normálne správanie a jednoducho skontrolovať pomocou ifov prítomnosť potrebných atribútov:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // vrátime niečo, napríklad 0 alebo null alebo false
	}
}

Druhá možnosť - je povedať, že absencia atribútu data-price alebo data-amount - je výnimková situácia. V tomto prípade budeme vyhodiť výnimku:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'chýba cena alebo množstvo produktu'
		};
	}
}

Ktorá z týchto dvoch možností je tu vhodnejšia - je to voľba programátora. Môže považovať problém za normálnu činnosť skriptu alebo za výnimočnú situáciu.

Predpokladajme, že sme sa rozhodli, že situácia je výnimočná. Potom bude kód na získanie ceny tovaru vyzerať takto:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// nejako reagujeme na výnimku
}

Upravte môj kód tak, aby funkcia getCost vyhadzovala dva typy výnimiek: ak chýba cena a ak chýba množstvo. Dobre premýšľajte nad názvami týchto výnimiek. V bloku catch zobrazte rôzne chybové správy pre výnimky rôznych typov.