Destrukturování

Když z objektu potřebujete několik vlastností, často pro každou píšete samostatný řádek:

const leo = { jmeno: "Leo", druh: "lev", vek: 6 };
const jmeno = leo.jmeno;
const vek = leo.vek;

Destrukturování (anglicky destructuring) udělá totéž na jednom řádku:

const leo = { jmeno: "Leo", druh: "lev", vek: 6 };
const { jmeno, vek } = leo;
console.log(`${jmeno} má ${vek} let.`);

Leo má 6 let.

Vlevo od = jsou ve složených závorkách vlastnosti, které chcete z objektu vytáhnout. JavaScript pro každou z nich vytvoří proměnnou se stejným názvem a s její hodnotou. Na pořadí v závorkách nezáleží: { vek, jmeno } funguje stejně. Objekt zůstane, jak byl, a vlastnosti, které nevyjmenujete, jako tady druh, prostě žádnou proměnnou nedostanou.

Destrukturovat jde i pole, a to pomocí hranatých závorek. Tady rozhoduje pořadí: první proměnná dostane první prvek, druhá proměnná druhý prvek a tak dále:

const veky = [12, 6, 4, 2];
const [prvni, druhy] = veky;
console.log(prvni, druhy);

12 6

To se hodí k řazení. Seřaďte kopii pole a vytáhněte z ní prvky, které jsou na začátku:

const [nejmladsi, druheNejmladsi] = [...zvirata].sort((a, b) => a.vek - b.vek);
console.log(nejmladsi.jmeno, druheNejmladsi.jmeno);

Pepík Žofka

Typické chyby:

• Ve složených závorkách název, který v objektu není klíčem. const { Jmeno } = leo; dá undefined, protože klíč je jmeno s malým j.
• Proměnná, která už existuje. Destrukturování vytváří nové proměnné, takže když už program má const jmeno, skončí const { jmeno } = leo; chybou SyntaxError: Identifier 'jmeno' has already been declared (proměnná už existuje). Starý řádek smažte.