Szczegóły

W ES6 poświęcono wiele uwagi skracaniu składni dla często używanych konstrukcji. Wspominałem już o "Arrow functions", czy domyślnych parametrach funkcji, ale to nie wszystko, co otrzymaliśmy do dyspozycji.

Destructuring

Pod tym złowieszczo brzmiącym słowem, które niektórzy lubią tłumaczyć jako "destrukturyzację" kryje się jedna z najpraktyczniejszych funkcjonalności dodanych w EcmaScript 6. Zobaczmy na czym polega na przykładzie:

const temperature = {
  min: 17,
  max: 25,
  avg: 20
};

const { min, max } = temperature; 

console.log(min); // 17
console.log(max); // 25

Najprościej rzecz ujmując destrukturyzacja pozwala nam więc na wyciąganie zmiennych z istniejących obiektów w bardzo szybki i przystępny sposób. Działa to również w przypadku argumentów funkcji:

const temperature = {
  min: 17,
  max: 25,
  avg: 20
};

function getMax({ max }) {
  return max;
}

console.log(getMax(temperature)); // 25

Powyższy przykład można skrócić stosując Arrow function:

const temperature = {
  min: 17,
  max: 25,
  avg: 20
};

const  getMax = ({ max }) => max;

console.log(getMax(temperature)); // 25

Destructuring działa nie tylko dla obiektów, ale także dla tablic. Sposób użycia jest analogiczny, jak w przypadku obiektów, a więc zamiast nawiasów klamrowych stosujemy prostokątne:

const arr = [1, 2, 3, 4];

const [a, b, c] = arr;

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

Możemy także pominąc dowolną liczbę elementów tablicy stosując odpowiednią ilość przecinków:

const arr = [1, 2, 3, 4];

const [a, , , d] = arr;

console.log(a, d); // 1 4

Skrócona inicjalizacja obiektów

To kolejny prosty i przydatny skrót skrót składniowy. Podczas tworzenia literału obiektu nie musimy podawać już nazwy zmiennej przechowującej wartość jeśli parametr, do którego ją przypisujemy nazywa się tak samo:

const name = "Dżesika Brajanek";
const age = 16;

const person = {
  name,
  age
};

console.log(person); // {name: "Dżesika Brajanek", age: 16}

Skrócona składnia dla deklaracji metod obiektu

Tutaj w zasadzie nie ma co tłumaczyć, przykład mówi sam za siebie.

const person = {
  name: "Dżesika Brajanek",
  age: 16,
  toString() {
    console.log(`Nazywam się ${this.name} i mam ${this.age} lat.`)
  }
};

person.toString(); // Nazywam się Dżesika Brajanek i mam 16 lat.