Dekonstrukce (Destructuring)

Dekonstrukce^1 (destructuring, unpacking) je technika, která umožňuje jednodušeji vytvářet jednotlivé proměnné z objektů či polí. Ze složitější struktury exportujeme jednotlivé klíče a tím dostáváme jednodušší struktury.

Je užitečná, když potřebujeme přistupovat k jednotlivým prvkům objektu nebo pole, aniž bychom museli používat klíče nebo indexy.

Jde o velmi užitečnou syntaxi, která nám zjednodušuje kód a zrychluje vývoj. Tato možnost je podobná funkcím jazyků, jako jsou Perl a Python. Syntaxe nám umožňuje elegantně na jednom řádku přiřadit více proměnných najednou.

Dekonstrukce objektu

Umožňuje nám vytáhnout z objektu konkrétní atributy. Ukažme si tomto objektu ukážeme příklady kódu

var dog = {
    name: "Amálka",
    age: 2,
    breed: "Border Colie",
};

V prvotních verzích JS jsme mohli získat jednotlivé hodnoty klíčů pouze přes tečkový zápis nebo závorky. Tedy

var name = dog.name;
var age = dog['age'];

Nyní pomocí destructuringu objektu můžeme psát kratší zápis. Složené závorky na levé straně sdělují JavaScriptu, aby prozkoumal objekt dog pro vlastnost name a přiřadil její hodnotu nové proměnné se stejným názvem.

var { name, age } = dog;

Příklad destructuring pole

Destrukturing se týká i polí. V tomto případě se používají hranaté závorky a elementy se mapují podle pořadí indexu, nikoliv podle názvu klíče. Tedy první element se přiřadí k prvnímu identifikátoru, druhý element k druhému identifikátoru atd.

function swap(a, b) {
	[a, b] = [b, a];
	return [a, b];
}

Pokud chceme, můžeme i nějaký index přeskočit.

const [firstColor, , thirdColor] = barvy;

Dekonstrukce funkce

Funkce mohou také používat dekonstrukci, když přijímají objekty nebo pole jako argumenty. Například, pokud máme funkci, která přijímá objekt se jménem a telefonním číslem, můžeme ji napsat takto:

function printContact({name, phone}) {
  console.log(`Jméno: ${name}, Telefon: ${phone}`);
}

const contact = { name: 'John Doe', phone: '555-555-5555' };
printContact(contact); 

V tomto případě dekonstruujeme objekt contact při volání funkce printContact a ukládáme jeho jméno a telefonní číslo do proměnných name a phone. Je důležité mít na paměti, že dekonstrukce musí mít stejné jméno jako klíč objektu.

Další ukázky

Snadná vyměna hodnot dvou proměnných pomocí, u které nepotřebujeme třetí dočasnou proměnnou.

[x, y] = [y, x];

Zkrácení parametrů funkce

// ES3
function remove(options) {}
// ES6
function remove({ url, line, column, force }) {}

Importování jen část modulu

const { textarea } from "React.DOM"

Bindování a přiřazení

Můžete také použít destructuring k extrakci pouze požadovaných hodnot z objektu nebo pole a přiřadit je k novým proměnným s jinými názvy:

// destructuring objektu "dog" a přiřazení hodnot k novým proměnným
const { name: jmeno, age: vek } = dog;

console.log(jmeno);  // "Amálka"
console.log(vek);  // “2”

Podpora

Syntaxe byla do JavaScriptu přidána ve verzi ECMAScript 2015 (ES6). Nyní je plně podporován ve všech moderních prohlížečích a verzích Node.js a může být nyní používána v kódu bez transpileru.