JavaScript'te data- Öznitelikleri ile İstisna Örneği

Sayfa yüklendiğinde sunucunun, satın alınan ürünün adını, fiyatını ve miktarını sakladığı HTML kodunu oluşturduğunu varsayalım:

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

Şimdi, ürün içeren bir elementin referansını alan ve ürünün toplam maliyetini (fiyat * miktar) hesaplayan bir fonksiyon yapalım:

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

Şimdi ürünümüzün maliyetini bulalım:

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

alert(cost);

Şimdi şu durumu varsayalım: Sunucuda yaşanan bir arıkadan dolayı, fiyat veya miktar bilgisi (veya her ikisi birden) eksik olan bir ürün gönderildi, örneğin şu şekilde:

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

Şimdi ürün maliyetini hesaplamaya çalışırsak, sonuç olarak ekrana NaN yazılacak. Kabul edin, pek bilgilendirici değil.

Demek ki, ihtiyacımız olan özniteliklerin eksik olması durumuna karşı kendimizi bir şekilde korumalıyız. Bu iki yolla yapılabilir. İlk yol, bunun normal bir davranış olduğunu söyleyip sadece ihtiyacımız olan özniteliklerin varlığını if koşulları ile kontrol etmektir:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // bir şey döndürelim, örneğin 0, null veya false
	}
}

İkinci seçenek ise, data-price veya data-amount özniteliğinin eksik olmasının istisnai bir durum olduğunu söylemektir. Bu durumda bir istisna fırlatacağız:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: 'üründe fiyat veya miktar bilgisi eksik'
		};
	}
}

Burada iki seçenekten hangisinin daha uygun olduğu - programcının tercihidir. Programcı, sorunu betiğin normal çalışmasının bir parçası veya istisnai bir durum olarak değerlendirebilir.

Diyelim ki durumun istisnai olduğuna karar verdik. O zaman ürün maliyetini alma kodu şu şekilde görünecektir:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// istisnaya bir şekilde tepki veriyoruz
}

Kodumu, getCost fonksiyonunun iki tip istisna fırlatacak şekilde değiştirin: eğer fiyat eksikse ve eğer miktar eksikse. Bu istisnaların isimleri üzerine iyice düşünün. catch bloğunda, farklı tip istisnalar için farklı hata mesajları gösterin.