JavaScriptにおけるdata属性を使った例外の例

ページの読み込み時に、サーバーが商品名、価格、購入数量を格納したHTMLコードを生成するとします:

<div id="product" data-product="りんご" data-price="1000" data-amount="5"></div>

商品の要素への参照を受け取り、商品の合計金額（価格 × 数量）を計算する関数を作ってみましょう:

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

私たちの商品の合計金額を求めてみます:

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

alert(cost);

ここで、次のような状況を想定してみます: サーバー側の何らかの障害により、価格や数量（またはその両方）が欠落した商品情報が送信されてきた場合です。例を示します:

<div id="product" data-product="りんご" data-price="1000"></div>

この状態で商品の合計金額を計算しようとすると、結果として画面に NaN が表示されます。これはあまり有益な情報ではないことに同意できるでしょう。

つまり、必要な属性が存在しない状況から保護する必要があります。これには2つの方法があります。 1つ目の方法は、これを正常な動作と見なし、単純に必要な属性の有無をif文でチェックする方法です:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		return 0; // 何か（0やnull、falseなど）を返す
	}
}

2つ目の方法は、属性 data-price または data-amount の欠落を例外的な状況と見なすことです。この場合、例外をスローします:

function getCost(elem) {
	if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
		return elem.dataset.price * elem.dataset.amount;
	} else {
		throw {
			name: 'ProductCostError',
			message: '商品の価格または数量が存在しません'
		};
	}
}

ここでどちらの方法を適用するのが適切かは、プログラマの判断に委ねられます。問題をスクリプトの正常な動作の一部と見なすか、それとも例外的な状況と見なすかによって決まります。

状況が例外的であると判断したとします。その場合、商品の合計金額を取得するコードは以下のようになります:

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

try {
	let cost = getCost(product);
	alert(cost);
} catch (error) {
	// 例外に対して何らかの対応を行う
}

私のコードを、関数 getCost が 2種類の例外（価格が欠落している場合と数量が欠落している場合）をスローするように書き換えてください。これらの例外の名前をよく考えて決めてください。 catch ブロック内で、異なる種類の例外に対して異なるエラーメッセージを表示するようにしてください。