Esimerkki poikkeuksista data-attribuuteissa JavaScriptissä

Kun sivu latautuu, palvelin luo HTML-koodin, joka sisältää tuotteen nimen, hinnan ja ostetun määrän:

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

Tehdään funktio, joka ottaa vastaan viittauksen tuoteelementtiin ja laskee tuotteen kokonaishinnan (hinta kerrottuna määrällä):

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

Lasketaan tuotteemme hinta:

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

alert(cost);

Oletetaan nyt seuraava tilanne: palvelimella tapahtuu häiriö ja se lähettää meille tuotteen, josta puuttuu hinta tai määrä (tai molemmat), esimerkiksi näin:

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

Jos nyt yritetään laskea tuotteen hinta, tulokseksi näytetään NaN. Oletetaan, ettei se ole kovin informatiivista.

Näin ollen meidän on suojauduttava siltä, että tarvitsemiamme attribuutteja ei ole. Tämä voidaan tehdä kahdella tavalla. Ensimmäinen tapa on sanoa, että tämä on normaalia käyttäytymistä ja yksinkertaisesti tarkistaa if-lauseilla tarvittavien attribuuttien olemassaolo:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // palautetaan jotain, esimerkiksi 0 tai null tai false
	}
}

Toinen vaihtoehto on sanoa, että attribuutin data-price tai data-amount puuttuminen - on poikkeuksellinen tilanne. Tässä tapauksessa heitämme poikkeuksen:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'tuotteelta puuttuu hinta tai määrä'
		};
	}
}

Kumpi näistä kahdesta vaihtoehdosta on tässä sopivampi - on ohjelmoijan valinta. Hän voi pitää ongelmaa skriptin normaalina toimintana tai poikkeuksellisena tilanteena.

Oletetaan, että päätimme, että tilanne on poikkeuksellinen. Silloin tuotteen hinnan saamisen koodi näyttää tältä:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// reagoidaan jotenkin poikkeukseen
}

Muokkaa koodiani siten, että funktio getCost heittää kahden tyyppisiä poikkeuksia: jos hinta puuttuu ja jos määrä puuttuu. Mieti hyvin näiden poikkeusten nimiä. Lohkossa catch näytä erilaisia virheilmoituksia eri tyyppisistä poikkeuksista.