Przykład wyjątku z atrybutami data- w JavaScript

Niech przy ładowaniu strony serwer tworzy kod HTML, w którym przechowywana jest nazwa, cena i ilość zakupionego produktu:

html<div id="product" data-product="jabłko" data-price="1000" data-amount="5"></div>

Stwórzmy funkcję, która będzie przyjmować odnośnik do elementu z produktem i znajdować pełny koszt towaru (cenę pomnożoną przez ilość):

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

Znajdźmy koszt naszego produktu:

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

alert(cost);

Załóżmy teraz następującą sytuację: z powodu jakiejś awarii na serwerze wysłał on nam towar, w którym brakuje ceny lub ilości (lub obu na raz), na przykład tak:

html<div id="product" data-product="jabłko" data-price="1000"></div>

Jeśli teraz spróbować obliczyć koszt towaru, to wynik wyświetlony na ekranie będzie NaN. Zgadzicie się, nie zbyt informatywnie.

Okazuje się, że musimy się w jakiś sposób zabezpieczyć przed tym, że będą brakować potrzebnych nam atrybutów. Można to zrobić na dwa sposoby. Pierwszy sposób - to powiedzieć, że to normalne zachowanie i po prostu sprawdzać ifami obecność potrzebnych nam atrybutów:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    return 0; // zwróćmy coś, na przykład, 0 lub null lub false
  }
}

Drugi wariant - to powiedzieć, że brak atrybutu data-price lub data-amount - to sytuacja wyjątkowa. W tym przypadku będziemy rzucać wyjątek:

javascriptfunction getCost(elem) {
  if (elem.dataset.price !== undefined && elem.dataset.amount !== undefined) {
    return elem.dataset.price * elem.dataset.amount;
  } else {
    throw {
      name: 'ProductCostError',
      message: 'brak ceny lub ilości produktu'
    };
  }
}

Który z dwóch wariantów jest tutaj właściwszy do zastosowania - to wybór programisty. Może on uważać problem za normalną pracę skryptu lub za wyjątkową sytuację.

Załóżmy, że zdecydowaliśmy, że sytuacja jest wyjątkowa. Wtedy kod otrzymywania kosztu towaru będzie wyglądać tak:

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

try {
  let cost = getCost(product);
  alert(cost);
} catch (error) {
  // w jakiś sposób reagujemy na wyjątek
}