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 zerkniemy z kolei na to co jest nowego dla konstruktora number
czyli jakie statyczne metody na nim się pojawiły przejdźmy od razu do kody
i będę chciał ci to pokazać do tej pory być może wiesz że istniały takie
funkcje jak parse int i druga
to była parse float one pozwalały ze stringów wyciągnąć kolejne liczby
całkowite lub liczby zmiennoprzecinkowe i teraz jest takie dążenie
do tego aby było jak najmniej globalnych funkcji w języku JavaScript dlatego
te dwie metody zostały zawarte w number czyli jeśli się odwołamy
do number to będziemy mogli pracować na dokładnie takich samych metodach
czyli teraz jakby twórcy specyfikacji zachęcają nas aby korzystać z numbers parse int
bo być może kiedyś sama funkcja parse int globalna i bardzo float również
zostaną usunięte dlatego zalecane jest aby z nich korzystać
i ja może dla przykładu wrzucę tutaj 2 takie console logi tak
one działały na przykład 20 zł mogliśmy wyciągnąć czy 20 50 zobaczymy
no mamy tutaj już typ number wyciągnięty z tych stingów więc
od teraz pamiętaj że najlepiej byłoby korzystać z tych metod poprzez właśnie metody
statyczne na obiekcie number kolejną z metod która została przeniesiona
na number jest metoda is nan czyli mieliśmy taką metodę jak is num
a teraz mamy number is nan natomiast ona się teraz troszeczkę
różni dlatego że jeżeli byśmy tutaj napisali undefined to
zobaczmy otrzymamy false natomiast w normalnej metodzie is nan gdybyśmy
ją tutaj skopiowali undfined zwróci nam true czyli według
tej metody gdzie pytamy is not a number czyli czyta wartość nie
jest liczbą to zwraca nam tak naprawdę true czyli wydawałoby się że ma to
sens natomiast teraz to zostało poprawione i argumentacja jest taka że
żeby jakaś wartość była nan czyli not a number to musi być
po prostu nan czyli musielibyśmy tutaj wpisać nan
i wtedy zostanie zwrócone true w tym console logu albo coś co nam
ewoluuje do nan czyli na przykład gdybyśmy 0 podzielić przez 0 to też będzie
nan zobaczmy też będziemy mieć wartość true a w tej funkcji globalnej
is nan jeżeli wstawiliśmy sobie jakiś string czy powiedzmy undefined
też zwracało nam true dlatego ona się tym różni teraz wyłącznie
nan jeżeli tutaj będzie to zostanie zwrócony true dla
referencji zostawię to w ten sposób żebyśmy widzieli różnice kolejna
z metod która już wcześniej istniała ale została też przeniesiona na number jest
to is finite i to nam
mówi czy liczba jest skończone czy nie woiszmy sobie 20 i zobaczymy
co nam tutaj zostanie zwrócone mamy false co ciekawe a gdybyśmy
wykonali tą samą globalną metodę która istniała od dawna i podali
tutaj string 20 to otrzymamy true czyli
czym te metody się różnią otóż te stara globalna metoda jeżeli otrzymała tutaj coś innego
niż number w tym przypadku string to castuje to sobie na number czyli próbuje to
zamienić na liczbę i dopiero wtedy wykonuje jakby porównanie czy to jest liczba
skończone czy nie natomiast number is finite tutaj tak naprawdę musi
otrzymać typ number jeżeli otrzyma string to od razu zwróci false
kolejna metoda tym razem już zupełnie nowa dla ecmascript 6
chociaż te pamiętaj też są nowe bo one w es5 nie były dostępne na
number lub na przykład is nan działa teraz inaczej ale taka której nie mieliśmy jest
to metoda która pozwoli nam określić czy dana wartość jest
liczbą całkowitą czyli is integer i możemy
tutaj podać jakąś wartość podajmy sobie 20 i zobaczymy co zostanie zwrócone mamy
true natomiast gdybyśmy podali string zobaczmy mamy
wartość false czyli tutaj również oczekiwany jest typ number ale zobacz co jest
ciekawe jeżeli podamy zmiennoprzecinkową taką również
otrzymamy true bo tak naprawdę jest to całkowita liczba skoro
mamy tutaj zera ale gdybym tutaj napisał coś takiego to już będę miał false
bo jest to liczba o typie tak naprawdę float chociaż w javascripcie mamy
tylko jeden typ number ale mamy takie jakby rozróżnienie na te typy szczególnie
teraz że możemy to sprawdzić za pomocą is integer i mamy
jeszcze jedną ciekawą nową metodę number jest to number is
safe integer to jest metoda która pozwoli nam
określić czy wartość podane tutaj jest jakby bezpiecznym integerem
czyli czy możemy na niej wykonywać bezpieczne operacje a więc takie które będą zwracać
poprawne wyniki powyżej pewnego zakresu już javascripcie nie będą to poprawne
wyniki w takich działaniach matematycznych więc jeśli bym tutaj wpisał na przykład 20 jak
najbardziej mamy true natomiast mamy dwie stałe które pozwolą nam określić
maksymalny maksymalną i minimalną wartość jakby
tych bezpiecznych liczb całkowitych i to jest dostępne na number więc jeśli
bym napisał number mamy taką samą jak max safe integer
to jest też właśnie od es6 dostępne czyli max safe
integer zwróci nam true natomiast gdybyśmy do tej liczby swoją
drogą możesz ją podejrzeć w konsoli dopisali 1 jest to już za duży zakres otrzymamy
false bo jest to liczba przekraczająca właśnie maksymalną
wartość dla bezpiecznych liczb całkowitych podobną rzecz moglibyśmy
zrobić jeżeli chodzi o min pamiętaj że taka stała w razie czego też istnieje
jeżeli od niej byśmy sobie objęli jeden bo też będziemy mieli zbyt mały zakres też
otrzymamy false no i ostatnią rzeczą w zasadzie taką stałą która
została dodana do number jest epsilon zobaczmy
i jest to taka liczba która w matematyce może być wykorzystywana więc jeżeli potrzebowałbyś
tego do jakiejś działań to pamiętaj że taka stała teraz się pojawiła no
i jeżeli chodzi o number to wszystko jak widzisz mamy parę nowych metod no i twórcy specyfikacji
zachęcają żebyśmy korzystali z tych dostępny na number zamiast tych globalnych
dodatkowo pojawiły się nowe takie jak na przykład is integer czy is
safe integer z których warto czasami skorzystać jeżeli na przykład tutaj chcemy określić czy mamy
do czynienia z liczba zmiennoprzecinkową czy z liczbą całkowitą