Zagadnienia z ES6, które warto znać cz. 1

zagadnienia z ES6

Zaczynamy cykl techniczny na blogu! Na pierwszy ogień idą zagadnienia z ES6, które warto znać. Czyli gratka dla wszystkich, którzy mają do czynienia z JavaScriptem. Zarówno początkujących, jak i tych już trochę znających JS.

W tej serii mam zamiar dzielić się z Wami tematami z ES6. Artykuł powstał na podstawie lektury książki Nowoczesny JavaScript autorstwa Nicolasa Bevacqua (dzieliłam się już kilkoma spostrzeżeniami o samej książce w grudniowym wpisie o polecanych lekturach). Przykłady, które zawarłam w artykule są moje, bazują jednak na tym, co Bevacqua podaje u siebie.

Od razu chcę uprzedzić pytania początkujących – tak, znajdziecie we wpisie coś dla siebie. Jest wiele zagadnień z ES6, które można wdrażać w swój kod właściwie od początku nauki. ES6 jest obecnie bardzo popularnym i powszechnie używanym standardem. Pewnie, niektóre rzeczy będą wymagały zrozumienia bardziej złożonych zagadnień. Ale niech Was to nie zatrzymuje. Nawet jak teraz nie użyjecie danej rzeczy, możliwe, że przyda Wam się ona w przyszłości.

Zdaję sobie sprawę, że na początku ES6 może być trochę przytłaczające. W końcu dopiero opanowujecie albo opanowaliście podstawy JavaScriptu, a tu już jakieś nowości. Nie dajcie się zwieść pozorom – te nowości są naprawdę przydatne i ułatwiają pracę z kodem (choć na samym początku możecie tego nie widzieć). Poznanie zagadnień z ES6 przyda się też dlatego, że dzięki temu będziecie mogli czytać kod innych osób i jak traficie na coś z ES6, nie wyda Wam się to super dziwne. Nawet jak nie będziecie do końca pamiętali, co dana rzecz robi, skojarzycie, co to i będziecie mogli poszukać w dokumentacji czy wrócić do tego wpisu.

Nie przedłużając – dziś bierzemy się za tematy związane ze zwięzłą deklaracją właściwości obiektu oraz zagadnienia z destrukturyzacji obiektów i tablic. Brzmi enigmatycznie? Czytajcie dalej! A jak najpierw chcecie poczytać więcej o tym, czym w ogóle jest ES6, odsyłam Was do tego artykułu.

Zwięzła deklaracja właściwości obiektu

Gdy zajmujemy się JavaScriptem, prędzej czy później trafimy na obiekty. Obiekt (w uproszczeniu) rozpoznajemy po tym, że deklarujemy go używając nawiasu klamrowego. Obiekt ma też właściwości oraz przypisane do nich wartości. Dzięki obiektom możemy np. przechowywać dane związane z danym elementem w jednym miejscu. Załóżmy, że mamy obiekt o nazwie Jane, który przechowuje informacje o jakiejś osobie.

Dzięki zwięzłemu przypisaniu możemy przypisać od razu wartość zmiennej interests do właściwości o takiej samej nazwie w obiekcie Jane. To pozwala nam zaoszczędzić czas, nie pisać dwa razy tego samego i ułatwia czytelność. Nie musimy pisać: interests: interests przy deklaracji obiektu Jane. Nasz kod wyglądałby więc tak:

var interests = ["books", "travels", "coding"];

var Jane = {
  age: 26,
  eyes: green,
  occupation: programmer,
  interests
}

Jak wykorzystać to zagadnienie ES6 w praktyce? Bardzo często np. przy pobieraniu jakiś danych będziemy sobie chcieli je najpierw jakoś przygotować. Często tworzy się zmienne, gdzie najpierw zbieramy odpowiednie dane, a potem dopiero przypisujemy je jako wartość własności danego obiektu. Za każdym razem, gdy zauważamy, że to, co przypisujemy do obiektu ma taką samą nazwę jak nasza zmienna, warto skorzystać ze zwięzłej deklaracji. Powtórzenia w kodzie nie są dobre, a pisanie obok siebie dokładnie takiej samej nazwy to zwyczajnie strata czasu.

Przypisać do właściwości oczywiście możemy wszystko, nie tylko tablicę, jak w poprzednim przykładzie. Spójrzmy na jeszcze jeden przykład, który tworzy nam obiekt o nazwie greetingMechanism. Właściwości tego obiektu deklarowane są przy użyciu stworzonych wcześniej zmiennych. Do jednej z nich mamy przypisany ciąg tekstowy, do drugiej funkcję.

var greeting = "hello";

function sayHello(greeting) {
  console.log(greeting);
};

var greetingMechanism = { greeting, sayHello };

Warto też zwrócić uwagę, że greetingMechanism to obiekt (sugerują to nawiasy klamrowe), mimo że nie mamy klasycznego przypisania wartości do właściwości (z dwukropkiem). Dla początkujących to może być trochę mylące, dlatego też warto zapoznawać się z ES6, żeby właśnie taki kod nas nie zaskoczył. Nie znając zwięzłego przypisania, nie wiedzielibyśmy, skąd biorą się wartości w obiekcie. Ale teraz już to wiemy 🙂

Destrukturyzacja obiektów

Pozostańmy jeszcze na chwilę w temacie obiektów. Załóżmy, że mamy obiekt z zagnieżdżonymi właściwościami. Wygląda on następująco:

var user = {
    id: 8978787898,
    email: "jon.smith@gmail.com",
    personalInfo: {
        name: "Jon",
        surname: "Smith"
    }
}

Jeśli chcielibyśmy stworzyć kolejną zmienną, która przechowywałaby email użytkownika z powyższego obiektu, musielibyśmy zrobić tak:

var email = user.email;

Nie wygląda to jakoś super źle, ale gdy chcemy stworzyć kilka zmiennych, za każdym razem musielibyśmy zapisywać user., a potem podawać właściwość, do której chcemy się odnieść. Dzięki wykorzystaniu destrukturyzacji obiektu, które oferuje ES6, możemy stworzyć zmienną, która ma taką wartość jak właściwość email z obiektu user w następujący sposób:

var { email } = user;

Powyższy zapis oznacza, że chcemy stworzyć zmienną o nazwie email, która będzie miała taką wartość jak właściwość email obiektu user. Jeśli nasz obiekt user ma taką właściwość, zostanie ona przypisana do nowostworzonej zmiennej. Działa to także dla bardziej zagnieżdżonych właściwości, czyli możemy stworzyć zmienną z wartością równej user.personalInfo.name w następujący sposób:

var { name } = user.personalInfo;

Możemy także stworzyć od razu więcej niż jedną zmienną. Jest to bardzo przydatne gdy chcemy wykorzystać potem te zmienne nie pisząc za każdym razem user. Szczególnie przydaje się to, gdy korzystamy z Reacta i w komponencie mamy przekazany obiekt props. Żeby za każdym razem nie pisać props. możemy stworzyć zmienne z potrzebnymi informacjami. Żeby to zilustrować, załóżmy, że chcemy stworzyć od razu dwie zmienne, jedna ma zawierać mail, druga id użytkownika. Zrobilibyśmy to w następujący sposób:

var { email, id } = user;

Teraz mamy dostęp do obu zmiennych i wywołanie w consoli email lub id pozwoli nam zobaczyć wartości, które są równe właściwościom obiektu user.

Nie zawsze chcemy, aby nowa zmienna miała dokładnie taką samą nazwę jak właściwość w danym obiekcie. Możemy zmienić nazwę zmiennej korzystając z aliasów. Bowiem zmienna o nazwie email może nie mówić nam wystarcząco o tym, co w niej przechowujemy. Załóżmy, że chcemy, aby nasza zmienna nazywała się userEmail i miała taką wartość jak właściwość email w obiekcie user. Aby do tego doszło, zapisać musimy następujący kod:

var { email: userEmail } = user;

Nazwę, którą nadajemy zmiennej podajemy po dwukropku, jest to tzw. alias.

Destrukturyzacja tablic

Destrukturyzacji możemy także używać przy tablicach. Nie jest to może aż tak częste, jak przy obiektach (przynajmniej ja mam takie odczucia), natomiast ES6 umożliwia nam też bardzo fajne funkcjonalności, jeśli chodzi właśnie o destrukturyzację tablic.

Możemy użyć jej na przykład, gdy mamy tablicę i z jej elementów chcemy utworzyć zmienne, tj. nasze zmienne mają mieć takie wartości jak kolejne elementy tablicy. Żeby nie musieć odnosić się bezpośrednio do poszczególnych indeksów, wystarczy, że skorzystamy z destrukturyzacji. Będziemy tu umieszczać nazwy zmiennych w nawiasie kwadratowym, bo mamy do czynienia z tablicami. Nasza przykładowa tablica wygląda tak:

var numbers = [1, 2, 3];

Mamy w niej trzy elementy, każdy z nich jest cyfrą. Jeśli normalnie chciałabym stworzyć zmienną a i przypisać do niej pierwszy element z tablicy numbers, zrobiłabym to w następujący sposób:

var a = numbers[0];

Powyższy kod jest poprawny i wygląda ok, nie mam w nim tak naprawdę nic podejrzanego 😉 Co jednak zrobić, gdy chcemy stworzyć trzy zmienne i do każdej z nich przypisać wartości z tablicy? Musielibyśmy za każdym razem pisać nazwę tablicy i podawać indeks danego elementu. Destrukturyzacja z ES6 umożliwia nam o wiele szybszy zapis, który wygląda tak:

var [ a, b, c ] = numbers;

Krócej, nieprawdaż? Stworzyliśmy w ten sposób trzy zmienne, a każda z nich ma przypisaną wartość z tablicy o nazwie numbers.

Bardzo fajna jest też opcja pomijania elementów tablicy, których nie potrzebujemy. Jeśli chcemy stworzyć tylko dwie zmienne d i e, gdzie d ma mieć wartość pierwszego elementu tablicy numbers, natomiast e jego trzeciego elementu, wystarczy, że zostawimy puste miejsce tam, gdzie jest element numer dwa. W praktyce wygląda to tak:

var [ d, , e ] = numbers;

Tworzymy teraz dwie zmienne, które mają przypisane wartości pierwszego i trzeciego elementu tablicy numbers.

Domyślne ustawienie parametrów funkcji

Jak już jesteśmy w temacie destrukturyzacji, wspomnijmy sobie o możliwości domyślnego przypisania wartości parametrów funkcji. Funkcje w JS mogą przyjmować argumenty. Gdy nie podamy argumentu przy wywołaniu, funkcja nie wykona się prawidłowo. Może zdarzyć się, że chcemy wywoływać funkcję z domyślnymi wartościami, gdy inne nie zostaną przekazane. Poniżej mamy prostą funkcję, która dodaje dwie liczby, przyjmuje więc dwa argumenty.

function sum(a, b) {
     return a + b;
};

Gdy wywołamy powyższą funkcję podając tylko jeden argument, jako wynik dostaniemy NaN, ponieważ JS nie widzi drugiego argumentu i uznaje go za NaN (not a number). Żeby zapobiec tego typu sytuacjom, wystarczy, że podamy jaka ma być domyślna wartość drugiego argumentu. Deklaracja funkcji wygląda wtedy tak:

function sum(a, b = 0) {
     return a + b;
};

Teraz, gdy nie podamy drugiego argumentu przy wywołaniu, czyli napiszemy tylko sum(5), jako wynik uzyskamy 5, ponieważ do drugiego argumentu domyślnie przypisane jest 0, tak jak wskazaliśmy przy deklaracji funkcji. Domyślne wartości możemy podać do każdego argumentu funkcji, nie tylko do drugiego. Jest to naprawdę bardzo przydatna rzecz, szczególnie, gdy nasza funkcja przyjmuje wiele argumentów i nie jesteśmy pewni, czy wszystkie z nich dostaniemy, a chcemy, by funkcja wykonała się bez błędu. Oczywiście należy wziąć pod uwagę to, że domyślne wartości mogą wprowadzić zamieszanie w kodzie, dlatego warto dobrze przemyśleć ich zastosowanie dla każdego przypadku.


To by było na tyle! Część pierwsza skończona! W kolejnych artykułach zapoznam Was między innymi z funkcjami strzałkowymi i wytłumaczę, co takiego robi let i const. Ten wpis jest jednocześnie moim debiutem w świecie bardziej technicznych artykułów, dlatego będę bardzo wdzięczna za wszelkie uwagi i sugestie. Piszcie w komentarzach albo mailem do mnie na joanna@wakeupandcode.pl. Czekam na feedback 🙂

8 Replies to “Zagadnienia z ES6, które warto znać cz. 1”

  1. Jak dla mnie wpis z kategorii “strzał w dziesiątkę”. 🙂 Świetnie tłumaczysz. 😉

    1. Dziękuję! Cieszę się, że się podoba 🙂

  2. I mnie również się bardzo podoba. Polece każdemu kto się uczy i bedzie szukał informacji o destrukturyzacji obiektów i tablic 🙂 dzięki !

    1. Dziękuję! 🙂

  3. Szkoda ze w przykładach nie stosujesz skladni es6, czyli const, let oraz funkcji że strzałkami. Tak to git

    1. Nigdzie nie ma zasady, ze jak się używa ES6, to trzeba użyć wszystkich znanych z niego zagadnień 😉 A na serio – z założenia to jest wpis dla początkujących, który ma wyjaśniać destrukturyzację. Założyłam więc, że to jest jeden nowy element, który wprowadzam, żeby za bardzo nie przytłoczyć osób, które ES6 nie znają. W przygotowaniu mam wpisy z kolejnymi zagadnieniami. Kiedy będę mogła do nich podlinkować i wyjaśnić np. czym jest const, zmienię kod tutaj 🙂

  4. Bardzo przystępny materiał dla początkujących. Miałbym tylko jeden komentarz/apel/prośbę /pytanie 🙂 … Czemu nazywamy ES6 nowością? Standard ten został przyjęty w 2015 roku. Obecnym standardem Ecma Script jest ES9…a w połowie tego roku (2019) zostanie opublikowany ES10. Wiadomo – największy przeskok był właśnie z ES5 na ES6 bo wtedy nie wydawano nowej wersji co rok (tak jak to ma miejsce obecnie).

    Myślę, że jako autorzy treści edukacyjnych powinniśmy powoli przejść na to, że ES6 nie jest “nowością” tylko standardem. Ucząc np. “jak tworzyć zmienne” to omawiamy od razu 3 sposoby `var` `let` i `const`. Tak samo “destructuring” czy “shorthand notation” powinny być omawiane zaraz kiedy uczymy się obiektów i tablic.

    Niestety nie spotkałem jeszcze kursu/tutoriala/bootcampu, który by tak uczył. Raczej ES6 traktowany jest jako właśnie “nowość”, a jego nowe funkcje omawiane są jako osobny rozdział/moduł…szkoda. Mam nadzieję, że to się zmieni.

    Poza tym :thumbsup: 🙂

    1. Dzięki za komentarz i miłe słowa! 🙂 No właśnie napisałam “nowość”, bo większość kursów jednak używa nadal np. “var”. I potem ktoś początkujący widzi zdefiniowaną zmienną przez “const’ i nie wie, o co chodzi, dla jego to jest nowość.

      Zgodzę się jednak, że powinniśmy przejść do porządku dziennego z ES6 i zacząć uznawać go za obecnie wykorzystywany już standard, a nie coś nowego. Jak piszesz, przecież mamy już kolejne, o wiele nowsze wersje.

      Ja też nie trafiłam na kursy dla początkujących, które by od razu wdrażały zagadnienia z ES6. Choć ja się starałam to robić na warsztatach, które prowadziłam, bo to super pokazuje początkującym, jakie JS ma możliwości. I nie wprowadza zamieszania potem. Dla mnie osobiście ES6 był na początku “czarną magią”, jak zobaczyłam strzałki i kropki i inne takie 😉

Dodaj komentarz