7

Komunikace mezi sourozenci

Nejnáročnejší typ komunikace mezi komponentami je předávání informací mezi sourozenci.

Destrukturování

Téměř v každé webové aplikaci pracujeme s nějakými strukturovanými daty. K jednotlivým položkám těchto dat se chceme v JavaScriptu umět dostat co nejrychleji. Uvažte například tuto jednoduchou strukturu pro reprezentaci jízdenky.

const ticket = {
  price: {
    amount: 12,
    currency: 'EUR',
  },
  from: 'Prague',
  destination: 'Vienna',
  stops: ['Kolín', 'Pardubice', 'Brno', 'Břeclav'],
};

Pokud chceme v našem programu dále pracovat například se startovní a cílovou destinací, můžeme si je chtít uložit do proměnných například takto.

const from = ticket.from;
const destination = ticket.destination;

Protože takovýto kód píšeme velmi často a programátoři jsou líní, JavaScript nabízí zkratku, jak zapsat přesně totéž.

const { from, destination } = ticket;

Tomtu zápisu se říká destrukturování destructuring . Český překlad tohoto pojmu prosím berte s rezervou. Používáme jej zde čistě proto, že se v češtině toto slovo lépe skloňuje. Pomocí destrukturování se vytvoří dvě konstantní proměnné, které obsahují odpovídající hodnoty z objektu ticket.

Pomocí destrukturování se můžeme do našeho objektu zanořit i hloubějí. Takto například získáme výší ceny za jízdenku a uložíme ji do proměnné amount.

const { price: { amount } }, destination } = ticket;

Destrukturování polí

Podobně jako dokážeme destukturovat objekty umíme také destrukutorovat pole. Mějme například následující pole měst.

const cities = ['Praha', 'Brno', 'Ostrava', 'Liberec', 'Pardubice', 'Znojmo'];

Kdybychom chtěli do proměnných uložit první dva prvky tohoto pole, napsali bychom

const from = cities[0];
const to = cities[1];

Pomocí destrukturingu to můžeme udělat opět rychleji.

const [from, to] = cities;

Co kdybychom ale chtělí první a třetí prvek? V takovém případě prostě druhý prvek vynecháme.

const [from, , to] = cities;

Destrukturování a komponenty

Destrukturování můžeme s výhodou použít při psaní komponent. Uvažme naši známou komponentu ShoppingItem.

const ShoppingItem = (props) => {
  return (
    <div className="item">
      <span className="item__name">${props.name}</span>
      <span className="item__amount">${props.amount}</span>
      <button class="btn-done">koupeno</button>
    </div>
  );
};

Abychom před každou hodnotu nemuseli psát props., můžeme si objekt props na začátku funkce destrukturovat.

const ShoppingItem = (props) => {
  const { name, amount } = props;
  return (
    <div className="item">
      <span className="item__name">${props.name}</span>
      <span className="item__amount">${props.amount}</span>
      <button class="btn-done">koupeno</button>
    </div>
  );
};

Tento zápis má výhodu v tom, že hned na prvním řádku komponenty vidíme, jaké props komponenta očekává, a nemusíme tak kvůli tomu číst celý její kód. Nešikovné však je, že se nám tímto kód komponenty prodlužuje. Pokud chcete být opravdoví profíci, uděláte destrukturování přimo v parametru funkce.

const ShoppingItem = ({ name, amount }) => {
  return (
    <div className="item">
      <span className="item__name">${props.name}</span>
      <span className="item__amount">${props.amount}</span>
      <button class="btn-done">koupeno</button>
    </div>
  );
};

Diky tomuto triku jsme zároveň zařídili, že komponenta dělá pouze return. Můžeme tedy nakonec použít zkracování.

const ShoppingItem = ({ name, amount }) => (
  <div className="item">
    <span className="item__name">${props.name}</span>
    <span className="item__amount">${props.amount}</span>
    <button class="btn-done">koupeno</button>
  </div>
);

Cvičení: Destrukturování

1

Produkty

pohodička

Vytvořte si JavaScriptový program a vložte do něj následující objekt.

const product = {
  name: 'Toaster',
  brand: 'Tefal',
  inStock: 34,
  price: '$25',
  colors: ['black', 'red', 'silver', 'blue', 'silver'],
};
  1. Pomocí destrukturování získejte z objektu product jeho název a značku. Vypište je do konzole.
  2. Pomocí destrukturování získejte z objektu product pole barev. Uložte si jej do proměnné productColors.
  3. Z pole productColors si pomocí destrukturování vytáhněte první prvek do proměnné firstColor.
  4. Z pole productColors si pomocí destrukturování vytáhněte do nějakých proměnných druhý a čtvrtý prvek.
  5. Zkuste pomocí destrukturingu získat druhou a čtvrtou barvu přímo z objektu product.
2

Čas

zapni hlavu
  1. Napište funkci timeFromMinutes, která v parametru minutes obdrží počet minut od půlnoci a vrátí pole dvou čísel, která budou představovat denní čas v hodinách a minutách. Příklad použití:
    > timeFromMinutes(91)
    [ 1, 31 ]
    > timeFromMinutes(195)
    [ 3, 15
    > timeFromMinutes(536)
    [ 8, 56 ]
    
  2. Použijte ve vašem kódu funkci tak, že si její celý výsledek uložíte do proměnné time. Z této proměnné pak pomocí indexování získejte hodnoty pro hodiny a minuty a uložte je do proměnných hrs a mins. Vypište tyto proměnné do konzole.
  3. Upravte váš kód tak, aby hodnoty do proměnných hrs a mins vytáhnul z pole times pomocí destrukturingu.
  4. Upravte dále váš kód tak, aby vůbec nepoužíval proměnnou time a rovou při volání funkce použil destrukturing.
  5. Upravte dále váš kód tak, aby funkce nevracela pole, nýbrž objekt v tomto formátu.
    {
      hours: 8,
      minutes: 56,
    }
    
    Použije destrukturing k získání hodin a minut z takto vráceného objektu.