Przykład wyjątku z atrybutami data- w JavaScript

Niech przy ładowaniu strony serwer tworzy kod HTML, w którym przechowywana jest nazwa, cena i ilość zakupionego produktu:

<div id="product" data-product="jabłko" data-price="1000" data-amount="5"></div>

Stwórzmy funkcję, która będzie przyjmować odnośnik do elementu z produktem i znajdować pełny koszt towaru (cenę pomnożoną przez ilość):

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

Znajdźmy koszt naszego produktu:

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

alert(cost);

Załóżmy teraz następującą sytuację: z powodu jakiejś awarii na serwerze wysłał on nam towar, w którym brakuje ceny lub ilości (lub obu na raz), na przykład tak:

<div id="product" data-product="jabłko" data-price="1000"></div>

Jeśli teraz spróbować obliczyć koszt towaru, to wynik wyświetlony na ekranie będzie NaN. Zgadzicie się, nie zbyt informatywnie.

Okazuje się, że musimy się w jakiś sposób zabezpieczyć przed tym, że będą brakować potrzebnych nam atrybutów. Można to zrobić na dwa sposoby. Pierwszy sposób - to powiedzieć, że to normalne zachowanie i po prostu sprawdzać ifami obecność potrzebnych nam atrybutów:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // zwróćmy coś, na przykład, 0 lub null lub false
	}
}

Drugi wariant - to powiedzieć, że brak atrybutu data-price lub data-amount - to sytuacja wyjątkowa. W tym przypadku będziemy rzucać wyjątek:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'brak ceny lub ilości produktu'
		};
	}
}

Który z dwóch wariantów jest tutaj właściwszy do zastosowania - to wybór programisty. Może on uważać problem za normalną pracę skryptu lub za wyjątkową sytuację.

Załóżmy, że zdecydowaliśmy, że sytuacja jest wyjątkowa. Wtedy kod otrzymywania kosztu towaru będzie wyglądać tak:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// w jakiś sposób reagujemy na wyjątek
}

Przerób mój kod tak, aby funkcja getCost rzucała dwa typy wyjątków: jeśli brakuje ceny i jeśli brakuje ilości. Dobrze pomyśl nad nazwami tych wyjątków. W bloku catch wyświetl różne komunikaty o błędzie dla wyjątków różnych typów.