destructuring

Destructuring jest kolejną nowością, którą wprowadza standard ECMAScript 2015. Konstrukcja pozwala wykorzystać dopasowanie wzorca (pattern matching) w operowaniu na tablicach i obiektach.

Zobacz całą serię: Let-s talk about ECMAScript 2015

arrays

Dzisiaj często możemy spotkać kod podobny do:

// ES5
var point = [1, 2];
var xVal = point[0],
    yVal = point[1];
 
console.log(xVal); // 1
console.log(yVal); // 2

Jednak ES6 daje nam dostęp do nowych możliwości. Konstrukcja pozwalająca na dopasowanie wzorca umożliwia nam pisanie kodu w bardziej intuicyjny i przejrzysty sposób. Spójrzmy na przykład:

// ES6
let point = [1, 2];
let [xVal, yVal] = point;
 
console.log(xVal); // 1
console.log(yVal); // 2
// .. and reverse!
[xVal, yVal] = [yVal, xVal];
 
console.log(xVal); // 2
console.log(yVal); // 1

Dopasowanie wzorca pozwala nam na przypisywanie wartości poszczególnych elementów tablicy do zmiennych, bez odwoływania się bezpośrednio do ich indeksów.

Kolejny przykład pokazuje, że możemy także pomijać poszczególne elementy:

let threeD = [1, 2, 3];
let [a, , c] = threeD;
console.log(a); // 1
console.log(c); // 3

.. lub sięgać po zagnieżdżone elementy tablic:

let nested = [1, [2, 3], 4];
let [a, [b], d] = nested;
console.log(a); // 1
console.log(b); // 2
console.log(d); // 4

objects

Podobnie jak w przypadku tablic, ES6 daje nam możliwość wyciągania z obiektów konkretnych wartości. Składnia jest bardzo podobna jak w powyższych przykładach. Tym razem musimy jednak użyć literału obiektu:

let point = {
  x: 1,
  y: 2
};
let { x: a, y: b } = point;
console.log(a); // 1
console.log(b); // 2

I również podobnie jak w tablicach, możemy sięgać po zagnieżdżone obiekty:

let point = {
  x: 1,
  y: 2,
  z: {
    one: 3,
    two: 4
  }
};
let { x: a, y: b, z: { one: c, two: d } } = point;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4

mixed

Nic nie stoi również na przeszkodzie by mieszać tablice oraz obiekty w naszych strukturach danych i jednocześnie korzystać z dopasowania wzorca:

let mixed = {
  one: 1,
  two: 2,
  values: [3, 4, 5]
};

let { one: a, two: b, values: ['c, , e'] } = mixed;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(e); // 5

Jednak według mnie, najciekawszą formą użycia dopasowania wzorca jest wykorzystanie funkcji. Spójrzmy na przykład kodu:

function mixed () {
  return {
    one: 1,
    two: 2,
    values: [3, 4, 5]
  };
}
let { one: a, two: b, values: ['c, , e'] } = mixed();

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(e); // 5

Rezultat dokładnie ten sam, a możliwości jakby więcej.

uwaga!

1. Jeżeli obiekt lub tablica nie posiadają wartości w ramach użycia wzorca dopasowania, zwrócona zostanie wartość undefined:

let point = {
  x: 1
};
let { x: a, y: b } = point;
console.log(a); // 1
console.log(b); // undefined

2. Jeżeli ominiemy var, let lub const z lewej strony naszego wyrażenia, to zwrócony zostanie wyjątek:

let point = {
  x: 1
};
{ x: a } = point; // throws error

.. jest jednak proste obejście tego problemu. Wystarczy, że do całego wyrażenia dostawimy nawiasy i stanie się ono zupełnie poprawne:

let point = {
  x: 1
};
({ x: a } = point);
console.log(a); // 1