Voorbeeld van uitzonderingen met data-attributen in JavaScript

Stel dat bij het laden van de pagina de server HTML-code aanmaakt waarin de naam, prijs en hoeveelheid van het gekochte product zijn opgeslagen:

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

Laten we een functie maken die een referentie naar het productelement accepteert en de totale kosten van het product vindt (prijs vermenigvuldigen met hoeveelheid):

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

Laten we de kosten van ons product vinden:

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

alert(cost);

Stel nu de volgende situatie: door een storing op de server heeft deze een product naar ons gestuurd waarin de prijs of hoeveelheid ontbreekt (of beide), bijvoorbeeld zo:

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

Als je nu probeert de kosten van het product te berekenen, zal het resultaat op het scherm NaN zijn. Je zult het ermee eens zijn, niet erg informatief.

Het blijkt dat we ons op de een of andere manier moeten beschermen tegen het ontbreken van de attributen die we nodig hebben. Dit kan op twee manieren. De eerste manier is om te zeggen dat dit normaal gedrag is en simpelweg met if-controles de aanwezigheid van de benodigde attributen controleren:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // return iets, bijvoorbeeld 0 of null of false
	}
}

De tweede optie is om te zeggen dat de afwezigheid van het attribuut data-price of data-amount een uitzonderlijke situatie is. In dat geval werpen we een uitzondering op:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'prijs of hoeveelheid ontbreekt voor product'
		};
	}
}

Welke van de twee opties hier meer gepast is - dat is een keuze van de programmeur. Hij kan het probleem beschouwen als normaal gedrag van het script of als een uitzonderlijke situatie.

Stel dat we hebben besloten dat de situatie uitzonderlijk is. Dan zal de code voor het verkrijgen van de productkosten er zo uitzien:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// reageer op de een of andere manier op de uitzondering
}

Pas mijn code aan zodat de functie getCost twee soorten uitzonderingen opwerpt: als de prijs ontbreekt en als de hoeveelheid ontbreekt. Denk goed na over de namen van deze uitzonderingen. In het blok catch geef je verschillende foutmeldingen voor uitzonderingen van verschillende types.