Co wprowadziło ES6 do JavaScript cz. 3

To już trzeci wpis o nowościach jakie zostały wprowadzone w ES2015. Jeżeli jeszcze nie widzieliście poprzednich wpisów, zachęcam Was do zapoznania się z nimi: Co wprowadziło ES6 do JavaScript cz. 1 oraz Co wprowadziło ES6 do JavaScript cz. 2. W tym poście przedstawię Wam kilka rozwiązań, które sprawią, że Wasz kod będzie czytelniejszy.

Spread properties

Spread możemy wykorzystywać podczas operacji wykonywanych na tablicach. Zapisujemy go za pomocą przedrostka …. Jego głównym zadaniem jest rozbicie tablicy na listę jej elementów. Spread properties ma bardzo wiele zastosowań, poniżej przedstawiam niektóre z nich.

Kopiowanie tablic

const fruits1 = ['apple', 'banana'];
const fruits2 = [...fruits1]

Za pomocą spread properties możemy kopiować tablice. Być może zastanawiacie się, dlaczego nie możemy użyć operatora przypisania. Odpowiedź jest bardzo prosta. W przypadku tablic, operator przypisania przypisałby referencje, a nie wartość. Kiedy tablica array1 uległaby zmianie, automatycznie zmiana ta zostałaby odwzorowana w tablicy array2, ponieważ array2 wskazuje na to samo miejsce w pamięci.

Warto pamiętać, że spread properties jest jednopoziomowy. Oznacza to, że w przypadku tablic zawierających w sobie inne tablice lub obiekty, zostaną skopiowane jako referencje. Aby uniknąć tego problemu, należy zastosować rekurencję lub użyć zewnętrznej biblioteki.

Łączenie tablic

Spread properties umożliwia także łączenie tablic. Poniżej przedstawiam przykład.

const fruits1 = ['apple', 'banana'];
const fruits2 = ['orange', 'melon', ...fruits1, 'blackberry'];

Jak możemy zobaczyć powyżej, tablica fruits2 zawiera w sobie elementy tablicy fruits1. Po wyświetleniu nowej tablicy w konsoli, wszystkie jej elementy znajdują się na tym samym poziomie.

Usuwanie duplikatów

Spread properties umożliwia także utworzenie tablicy, z której usuwane są wszystkie duplikaty. Do osiągnięcia tego wykorzystamy nową strukturę danych – Set, która została udostępniona wraz ze standardem ES2015. Set to struktura tworzona na podstawie przekazanej w konstruktorze tablicy. W celu uzyskania tablicy bez powtórzeń, musimy wykorzystać spread properties, a zwrócone elementy zapisać w tablicy. Poniżej znajduje się przykładowy kod.

const fruits4 = [...fruits1, ...fruits2];
const noDupes = [...new Set(fruits4)];

Rest operator

Przed pojawieniem się standardu ES6, programiści chcący obsłużyć nieokreśloną liczbę argumentów w funkcji, zmuszeni byli do korzystania z ograniczonego obiektu arguments. Do argumentów odwołujemy się w podobny sposób jak w przypadku tablicy. 

arguments[0]
arguments[1]
arguments[2]

Można z niego korzystać wewnątrz każdej funkcji nie będącej funkcją strzałkową. Obiekt ten swoją strukturą przypomina tablicę, jednak nie jest nią. Nie posiada metod wykorzystywanych podczas pracy z tablicami, np. map(), forEach(). Poniżej przedstawiam przykładowe wykorzystanie obiektu arguments.

function sum(data) {
  return arguments[0] + arguments[1];
}

Jak już pewnie się domyślacie, rest operator upraszcza pracę z nieokreśloną liczbą argumentów.

Rest operator zapisywany jest w podobny sposób jak spread properties. Jego zadaniem jest zebranie wszystkich pozostałych argumentów, które nie zostały wymienione wcześniej do tablicy o określonej nazwie. Poniżej znajduję się przykład.

function k1 (firstName, lastName, ...details) {
  return { firstName, lastName, details }
}

Jak możemy zobaczyć powyżej, imię i nazwisko zostały wyświetlone jako stringi. Natomiast miejsce zamieszkania oraz wiek są elementami tablicy details.

Pokażę Wam jeszcze jeden przykład wykorzystania rest operatora.

function hello (greeting, firstName, details) {
  return `${greeting} ${firstName} ${details}`
}

function sayHello (firstName, ...details) {
  return hello('Cześć', firstName, ...details)
}

W tym przypadku mamy funkcję hello(), która ma za zadanie przywitać użytkownika. Przyjmuje 3 parametr: przywitanie, imię oraz dodatkowe informacje. W naszym przypadku dodatkowe informacje będą odpowiadały nazwisku. Następnie mamy funkcję sayHello(), która przyjmuje jako parametry imię oraz dodatkowe informacje. Teraz po wywołaniu funkcji sayHello() otrzymamy komunikat w konsoli Cześć Adam Kowalski.

Podczas pracy nad aplikacjami webowymi, zaleca się korzystanie z rest operatora, ponieważ obiekt arguments został wycofany i może być nieobsługiwany przez przeglądarki.

Destrukturyzacja

Polega na wyciąganiu danych z istniejącego obiektu. Działa to zarówno podczas tworzenia zmiennych jak również podczas podawania argumentów funkcji.

const person = {
  firstName: 'Adam',
  lastName: 'Kowalski',
  age: 25
};

const { firstName, lastName } = person;

Mamy także możliwość korzystania z destrukturyzacji dla tablic. Różnica polega na tym, że w przypadku tablic zamiast nawiasów klamrowych podajemy nawiasy kwadratowe.

const fruits1 = ['apple', 'banana'];
const [a, b, c] = fruits2;

W przypadku tablic możemy pominąć dowolną liczbę jej elementów.

const fruits1 = ['apple', 'banana'];
const [a, , , d] = fruits2;

Skrócona inicjalizacja obiektów i metod

To kolejne uproszczenie jakie zostało wprowadzone w standardzie ES2015. Polega na tym, że podczas tworzenia obiektu nie musimy podawać nazwy zmiennej przechowującej wartość jeżeli zmienna ta jest takiej samej nazwy jak pole, które chcemy utworzyć.

const firstName = "Adam";
const lastName = "Kowalski";

const person = {
  firstName,
  lastName
};

Skrócona składnia dla deklaracji metod obiektu

Wcześniej deklaracja metody w obiekcie sprowadzała się do dodania pola, któremu przypisana była funkcja anonimowa. Poniżej przedstawiam przykład.

const person = {
  firstName: "Adam",
  lastName: "Kowalski",
  fullName: function() {
    return `${this.firstName} ${this.lastName}`;
  }
}

Po pojawieniu się nowego standardu w 2015 roku, dostaliśmy również możliwość deklaracji metod w skrócony sposób. Nowy sposób jest zdecydowanie bardziej intuicyjny. Poniżej znajduję się kod z przykładem.

const firstName = "Adam";
const lastName = "Kowalski";
const person = {
  firstName,
  lastName,
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
};

Podsumowanie

W tym wpisie mogliście zobaczyć jak bardzo zmienił się JS po wprowadzeniu standardu ES6. Omówione powyżej rozwiązania są często spotykanymi praktykami i warto się z nimi zaprzyjaźnić, ponieważ bardzo ułatwiają pisanie kodu. Sam na co dzień wykorzystuję je bardzo często i zachęcam Was do pisania kodów zgodnych z najnowszymi standardami.