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이 화면에 출력될 것입니다. 이것은 정보적으로 그다지 유용하지 않습니다.

즉, 필요한 속성이 누락되는 경우에 대비해야 합니다. 이 문제를 해결하는 데는 두 가지 방법이 있습니다. 첫 번째 방법은 이 상황을 정상적인 동작으로 간주하고 필요한 속성의 존재 여부를 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 등을 반환합니다.
	}
}

두 번째 옵션은 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 함수가 두 가지 유형의 예외를 발생시키도록 하세요: 가격이 누락된 경우와 수량이 누락된 경우입니다. 이러한 예외들의 이름을 잘 생각해 보세요. catch 블록에서 서로 다른 유형의 예외에 대해 서로 다른 오류 메시지를 출력하세요.