Příklad výjimky s data- atributy v JavaScriptu

Nechť při načtení stránky server vytvoří HTML kód, ve kterém je uložen název, cena a množství zakoupeného produktu:

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

Vytvořme funkci, která bude přijímat odkaz na element s produktem a zjistí celkovou cenu zboží (cena vynásobená množstvím):

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

Pojďme zjistit cenu našeho produktu:

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

alert(cost);

Předpokládejme nyní následující situaci: kvůli nějaké poruše na serveru nám poslal zboží, ve kterém chybí cena nebo množství (nebo obojí najednou), například takto:

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

Pokud nyní zkusíme spočítat cenu zboží, výsledek na obrazovce zobrazí NaN. Přiznejte, ne příliš informativní.

Ukazuje se, že se musíme nějak pojistit proti tomu, že budou chybět potřebné atributy. To lze udělat dvěma způsoby. První způsob je říci, že toto je normální chování a jednoduše kontrolovat pomocí ifů přítomnost potřebných atributů:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    return 0; // vrátíme něco, například 0 nebo null nebo false
  }
}

Druhá možnost - je říci, že absence atributu data-price nebo data-amount - je výjimečná situace. V tomto případě budeme vyhazovat výjimku:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    throw {
      name: 'ProductCostError',
      message: 'chybí cena nebo množství u produktu'
    };
  }
}

Kterou z těchto dvou variant je zde vhodnější použít - je na volbě programátora. Může považovat problém za normální chování skriptu nebo za výjimečnou situaci.

Předpokládejme, že jsme se rozhodli, že situace je výjimečná. Pak bude kód pro získání ceny zboží vypadat takto:

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

try {
  let cost = getCost(product);
  alert(cost);
} catch (error) {
  // nějak reagujeme na výjimku
}