Nowy Standard JavaScript
10 godz. 43 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperNa początku dowiesz się jakie nowości pojawiły się w języku, jeśli chodzi o tworzenie zmiennych i stałych. Poznasz dwa nowe słowa let i const, a także dokładnie omówimy ich różnice, względem znanego nam do tej pory słowa var. Następnie poruszymy temat obiektów. Zobaczysz jak nowy zapis pozwoli znaczenie ułatwić nam pracę i sprawić, by kod był bardziej czytelny. W kolejnym rozdziale porozmawiamy o zmianach w funkcjach. Poznasz tzw. arrow functions wraz z poradami, kiedy z nich korzystać, a także z konsekwencjami ich użycia. Zobaczysz również, jak korzystać z domyślnych parametrów. Następną nowością będą operatory rest i spread, które znacząco uproszczą pisanie kodu dla funkcji i tablic. Chwilę później rzucimy okiem na bardzo ciekawy temat, mianowicie na tzw. destructuring. To nowa funkcja języka, która pozwala w łatwy sposób wyciągnąć odpowiednie dane z tablic i obiektów, nawet jeżeli te posiadają kilkupoziomową, zagnieżdżoną strukturę. Zmian doczekały się również ciągi znaków. Poznasz nowy zapis, tzw. template string, a także możliwość wykorzystania funkcji tagujących.
ES6 wprowadza do języka JavaScript zapis klas. I choć na początku wydaje się, że to duży krok w stronę klasycznych obiektowych języków programowania, to jak się przekonasz, jest to w dużej mierze tzw. syntactic sugar, a więc zupełnie nowy, prostszy zapis, a prawie identyczne jak wcześniej działanie, oparte na dziedziczeniu prototypowym. W kursie poruszymy również temat Symboli oraz tego jak z nimi pracować, a chwilę później poznasz iteratory. To konstrukcje ułatwiające iterację, które znacząco upraszczają pracę z kolekcjami danych. Wraz z iteratorami poznasz również generatory, które ułatwiają z kolei tworzenie tych iteratorów. Istotną nowością w ES6 są również natywne Promise. To sposób na rozwiązanie problemu asynchroniczności, który znamy od bardzo dawna w postaci różnych bibliotek. Od teraz jednak Promisy znajdują się bezpośrednio w języku. Nowymi konstrukcjami, które pozwalają pracować z kolekcjami danych, są Map i Set. Dowiesz się jak z nich korzystać, a także do czego są przydatne. W jednym z rozdziałów rzucimy też okiem na tzw. Proxy API. To mechanizm języka, który pozwala na dość niskopoziomowy dostęp do różnych operacji. I choć być może nie jest to coś, z czego będziesz korzystał nad wyraz często, to warto wiedzieć, jakie są nowe możliwości tego API.
Jedną z najlepszych nowości, która zawitała do języka JavaScript wraz z ES6 są moduły. To możliwość dzielenia kodu na wiele plików, z których można pewne wartości wyeksportować, a następnie zaimportować je w innych modułach. Tutaj dowiesz się wszystkiego, co z modułami związane. Zobaczysz wiele sposobów na eksport i import, a także jak pracować z modułami w przeglądarkach internetowych. Kurs skupia się na omówieniu wszystkich najważniejszych nowości w ES6, dzieląc je na rozdziały. Jeden z nich natomiast, poświęcony został omówieniu mniejszych zmian, które znalazły się w specyfikacji. Poznasz w nim np. nowe metody tablic czy ulepszoną współpracę z Unicode.
Specyfikacja EcmaScript 2015 wprowadziła naprawdę bardzo wiele zmian, ale jej twórcy założyli, że od tego czasu każda kolejna wersja specyfikacji będzie pojawiać się co roku. Oznacza to przede wszystkim, że nie będziemy na raz bombardowani aż tak wieloma zmianami, jak w 2015 roku. W tym kursie nie zabrakło zatem omówienia nowości ze specyfikacji ES2016 oraz 2017, gdzie poznasz np. nowe metody dla stringów czy funkcje asynchroniczne.
Kiedy będziesz już uzbrojony w solidną wiedzę z zakresu nowości w ES6, dowiesz się jak w praktyce pracuje się dzisiaj z tym standardem. W jednym z rozdziałów omówimy nowoczesny workflow z użyciem npm i wykorzystamy popularne narzędzie webpack, do pracy z modułami, a także do transpilowania kodu ES6 do wersji ES5. Dzięki temu nowoczesny kod, który napiszemy, będzie mógł być uruchamiany również w starszych przeglądarkach, które nie wspierają najnowszego standardu. Dowiesz się na co zwrócić uwagę, by wszystko działało bez zarzutu.
Zwieńczeniem tego kursu będzie praktyczny projekt, w którym od podstaw wykonamy swoją własną bibliotekę do pracy z Obiektowym Modelem Dokumentu. Będzie ona w działaniu nieco podobna do znanej chyba wszystkim biblioteki jQuery. Na tym przykładzie postaramy się wykorzystać jak najwięcej wiedzy z zakresu ES6 zdobytej wcześniej. Stworzymy metody do pracy z drzewem dokumentu, a więc do wyszukiwania elementów, do tworzenia nowych, do przypisywania im klas, atrybutów czy styli CSS. Nie zabraknie również modułu odpowiedzialnego za współpracę z Ajax. Cały kod utworzymy oczywiście w sposób modułowy, aby bibliotekę można było łatwo rozwijać w przyszłości. Na koniec projekt ten przetranspilujemy do kodu ES5 z użyciem Babel i przetestujemy w starszej przeglądarce Internet Explorer 11, aby upewnić się, że nasza biblioteka działa poprawnie.
Kurs ten jest dla wszystkich osób, które znają już język JavaScript i czują się w pracy z nim swobodnie. Jeśli zatem chciałbyś pracować z nowoczesnym kodem JavaScript, to ten kurs jest zdecydowanie dla Ciebie. A może masz zamiar poznać framework Angular lub bibliotekę React? Tam również wykorzystywany jest najnowszy zapis ES6, więc wiedza ta będzie naprawdę pomocna. Z solidną wiedzą z zakresu EcmaScript 6, bez trudu pozostaniesz na bieżąco z każdą kolejną edycją tej specyfikacji.
W tej lekcji pokażę ci, jak możemy zakończyć działanie iteratora. W ten sposób,
że on później już nie będzie zwracał kolejnych wartości. Być może nie jest to aż tak często wykorzystywane,
ale warto wiedzieć, że taka metoda istnieje. Oprócz metody next, którą widziałeś, throw,
którą też widziałeś w poprzedniej lekcji. Mamy jeszcze metodę return, o której powiem za
moment. Zauważ, że na początku chciałbym sobie otworzyć funkcję generatora, która
się nazywa getRandom i ją wywołać, co zwróci mi iterator. To
już wiesz i teraz, co w niej się będzie działo. Otóż utworze sobie pętle while z warunkiem
true. Wydaje się to znowu szalone, bo taka pętla zawiesza nam zawsze
przeglądarkę dlatego, że wykonuje się w nieskończoność, ale pamiętaj, że jesteśmy w generatorze,
który potrafi się pauzować, więc w tym miejscu chciałbym robić yield i generować
losową liczbę od 1 do 100. To jest kod do generowania losowych
liczb od 1 do 100, więc za każdym użyciem tutaj iterator
kropka next, będziemy mieli kolejną losową liczbę i tak będzie w nieskończoność
dlatego, że ta pętla ma wartość true, ale pamiętaj, że ona się nie wykonuje, dopóki
nie napiszemy sobie iterator next. Później znowu next, znowu next, więc jak
napiszemy 100 razy, to ona 100 razy tylko się wykona, więc to true tutaj niczego
nie zmieni, po prostu ten iterator, tak naprawdę nigdy nie zwróci nam obiektów,
w którym done będzie miało wartość true, bo on nigdy nie będzie skończony, bo
nie ma tutaj żadnego warunku, tej pętli i tych yield'ów może być nieskończenie wiele. Dodatkowo
utworzyłem sobie tablice randomNumbers i teraz chciałbym pętlą for
of napisać number of iterator.
No i teraz wiemy, że gdybym zrobił sobie console.log number, to niestety zawiesimy
przeglądarkę, bo będziemy wykonywać tutaj ten iterator w nieskończoność przez ten warunek. Dlatego
będę chciał w którymś momencie zakończyć ten iterator i zaraz ci powiem jak. Oczywiście
pętle można zakańczać też poprzez break, ale ja chciałbym ci pokazać, jak działa return na
konkretnie iteratorze. Więc będę chciał sobie do tablicy
randomNumbers za każdym razem metodą push dodawać
jeden losowy numer, losową liczbę, która została mi zwrócona
z tego iteratora. Następnie chciałbym jednak sprawdzić, muszę mieć tu jakiś
warunek czy randomNumbers length równa się 10, czyli kiedy już 10
takich liczb sobie do tej tablicy dodam, to chciałbym zakończyć tą pętlę, ale
tak naprawdę zakończyć ją poprzez zakończenie iteratora, bo kiedy
jego zakończymy, to wtedy ta pętla wie, że już nie musi dalej iterować dlatego,
że zostanie zwrócony obiekt gdzie done będzie miał wartość true. Napiszemy
sobie zatem iterator return, czyli pokazałem ci wcześniej metodę next,
metodą throw i jest jeszcze metoda return, która zakańcza taki iterator. Co
ciekawe jej można przekazać tutaj jakąś wartość, tak jak do next czy do throw i ta
wartość będzie podstawiona w miejscu yield. Tutaj nam to nic nie zmieni, ale
w tych poprzednich przypadkach, gdzie widziałeś, że pod yield można jakby coś podstawić, to
taka wartość mogłaby być tam podstawiona i później i teraz jeszcze zwrócona, gdzie mielibyśmy
już obiekt, gdzie value, to byłoby to jeden i done
byłoby to true, czyli taki obiekt i tak byłby zignorowany, na przykład w pętli
for of, bo ona jak zobaczy ten true, to już to ignoruje. Niemniej jednak
nie jest to aż tak bardzo istotne. Pamiętaj tylko, że return pozwala nam zakończyć taki
iterator, mimo tego, że on w środku tutaj w tym generatorze, jak widzisz mógłby
działać w nieskończoność, więc teraz sobie to zobaczmy i na końcu wyświetlimy jeszcze randomNumbers,
okej. No i widzimy, że mamy 10
losowych liczb i nic nam się nie zawiesiło i zobaczmy, co nam teraz wrócił
iterator, next. Zwróci
nam już obiekt, w którym value to jest undefined i done jest to true czyli za pomocą return
możemy zakończyć działanie takiego iteratora i teraz już nie będzie możliwe ponowne
jego użycie, bo on za każdym razem będzie zwracał już obiekt, w którym done jest to wartość
true.