Nowoczesny JavaScript z ES6–ES13 (Poradnik JS)

To cię czeka w tym kursie JavaScript ES6.

Javascript ist już dostępny od wielu lat w przeglądarkach. Prawie każda strona internetowa zawiera więcej lub mniej kodu JS. Mimo że pierwsze wersje były dość nieporęczne, dotychczas bardzo dobrze działało się ze standardem ES5, przynajmniej jeśli udało się sprytnie ominąć pułapki i niepewności. Dlaczego więc uczyć się czegoś nowego i nie pozostać przy tym sprawdzonym? W tej lekcji pokażę zalety nowego standardu ES6 i powody, dla których właściwie nie można z niego zrezygnować.

Od ES5 włącznie słowo kluczowe var było jedynym sposobem deklaracji zmiennych, co często powodowało niepożądane zachowanie lub nawet błędy. ES6 wprowadza dwa nowe słowa kluczowe: let i const, które naprawiają niektóre wady var.

Pętla for jest znana każdemu programiście internetowemu. Często również jest stosowana do przechodzenia przez tablice. W ES6 istnieje wariant pętli for, który znacznie skraca i upraszcza ten proces.

Funkcje w JS są istotne i do tej pory były deklarowane i definiowane tylko za pomocą słowa kluczowego function. ES6 wprowadza bardzo elegancki i krótki sposób pisania, który nie tylko sprawia, że kod jest bardziej czytelny, ale także oferuje rozwiązanie dla irytującego problemu z this.

Opcjonalne parametry można zaimplementować nieco kłopotliwie w ES5 i nie są one widoczne dla osoby wywołującej funkcję. W ES6 opcjonalne parametry z ich wartościami domyślnymi mogą być bezpośrednio zapisane w sygnaturze funkcji.

Destrukturyzacja pozwala na wydobywanie elementów z obiektów i tablic w sposób celowy. Przy dokładnym przyjrzeniu się stwarza wiele możliwości zastosowania, które sprawiają, że kod JS staje się bardziej elegancki i bardziej zwarty.

Operowanie zmienną arguments było konieczne do ES6, aby umożliwić zmienną liczbę parametrów w funkcjach. W ES6 jest to znacznie łatwiejsze dzięki tzw. parametrom reszty.

Nie tylko podczas definiowania funkcji operator ... jest używany w parametrach resztkowych, ale również w destrukturyzacji tablic można go użyć, aby przechwycić "resztę" elementów i udostępnić je jako tablicę.

Nie tylko przy tablicach można użyć operatora reszty, można go również wykorzystać przy obiektach do przechwycenia pozostałych właściwości i udostępnienia ich jako obiektu.

Przeciwieństwem operatora reszty jest operator rozprzestrzeniania. Wygląda dokładnie tak samo (…), ale znajduje się po drugiej stronie przypisania i rozbija tablicę na poszczególne elementy.

„Sztuczka” ze Spread Operatorem działa również bardzo dobrze przy obiektach. Pozwala to na „wmieszanie” obiektów w inne obiekty. Jednakże jest tu także bardzo dobra alternatywa w postaci Object.assign().

Funkcje w obiektach dosłownych są bardzo kłopotliwe do napisania za pomocą słowa kluczowego funkcja-. W przypadku ES6 można je jednak zapisać znacznie krócej i zwięźlej.

Nie da się ukryć: Wieloliniowe literały ciągów znaków z zagnieżdżonymi wartościami zmiennych były do czasów ES6 uciążliwe i bardzo nieprzyjemne do czytania. Nowe literały szablonów ES6 są natomiast syntaktycznym błogosławieństwem.

Obiekty zawsze można było wykorzystać jako magazyn kluczy i wartości lub słownik, ale z kilkoma wadami. Nowa struktura danych Map pozbywa się tych wad i oferuje solidną funkcjonalność słownika, jaką znamy z innych języków programowania.

Po obietnicach udało się uniknąć piekła zwanej zwrotką, konstrukcja async/await dodaje kolejną warstwę do syntaktycznego cukru. Bazuje na obietnicachi pozwala programować operacje asynchroniczne niemal jak synchroniczne. Kto raz programował async/await, unika od tego momentu bezpośredniego użycia metody then- obietnic (a tym bardziej użycia zwrotek).

Oprócz statycznego importowania modułów za pomocą słowa kluczowego import, ES6 obsługuje również dynamiczne importowanie za pomocą funkcji import-. Ponieważ wszystko działa asynchronicznie, zwracany jest Promise, na rozwiązanie którego można oczekiwać za pomocą await. Dzięki temu nie ma już przeszkód dla dynamicznego ładowania modułów w trakcie działania programu.

Dziedziczenie w dalszym ciągu opiera się na prototypach, jednak w ES6 z użyciem słowa kluczowego extends jest znacznie prostsze i bardziej przejrzyste. Gdy jest używane, należy wywołać konstruktor klasy bazowej we właściwym momencie za pomocą super. Jak to zrobić, zostanie oczywiście wyjaśnione w tej lekcji.

Teraz można również deklarować pola prywatne, do których na pewno nie da się dostać z zewnątrz. Trochę nietypowe jest ich deklarowanie, które różni się zdecydowanie od innych języków programowania.

Z nowym słowem kluczowym class i powiązanymi funkcjami takimi jak dziedziczenie i enkapsulacja danych (prywatne pola), wszyscy programiści obiektowi powinni być zadowoleni, prawda? Chciałbym w tej lekcji przedstawić alternatywę dla tworzenia obiektów, która obejdzie się bez klas, prototypów i this, zamiast tego umożliwiając bardziej elastyczny rodzaj "dziedziczenia" lub raczej "kompozycji".

Najważniejsze funkcje wersji ES6 i nowszych powinny być teraz omówione. Jednak stale pojawiają się nowe ulepszenia. Niektóre mniej używane funkcje nie zostały jeszcze wymienione. W tym lekcji zostanie wyjaśnione, czego jeszcze można oczekiwać w przyszłości oraz jakie funkcje mogą być interesujące w przypadkach specjalnych.