JavaScript ES12 – Przewodnik po nowych funkcjach i przykładach!

JavaScript to jeden z najpopularniejszych języków programowania na świecie. Co chwilę pojawiają się nowe wersje, a każda z nich wnosi coś nowego, co sprawia, że praca z tym językiem staje się jeszcze bardziej przyjemna i efektywna. Dziś przyjrzymy się wersji ES12 (czyli ECMAScript 2021), która wprowadza szereg nowych funkcji i ulepszeń. Czy jesteś gotowy na poznanie nowych możliwości, które poprawią Twój kod? Zaczynamy!

1. Co to jest JavaScript ES12?

JavaScript ES12, czyli ECMAScript 2021, to kolejna wersja popularnego standardu ECMAScript, który określa specyfikacje i funkcje dostępne w języku JavaScript. Wersja ES12 została opublikowana w czerwcu 2021 roku i wprowadza szereg nowych funkcji oraz udoskonaleń, które mają na celu poprawę wydajności, bezpieczeństwa i wygody programowania w JavaScript.

Każda nowa wersja ECMAScript jest oczekiwana z wielkim entuzjazmem przez programistów na całym świecie. ES12 to wersja, która skupia się na poprawkach, które są bardzo pomocne w codziennym programowaniu, i to w różnych środowiskach. Co zatem zmienia się w ES12? Przyjrzyjmy się niektórym nowościom!

2. Nowości w JavaScript ES12 – Co warto wiedzieć?

Jakie zmiany wprowadza ES12? Choć zmiany nie są aż tak spektakularne jak te w poprzednich wersjach, wciąż pojawia się sporo nowych funkcji, które znacząco poprawiają komfort pracy. Oto niektóre z najważniejszych nowości:

• Operator nullish coalescing (??): Dzięki temu operatorowi możemy obsługiwać wartości null i undefined w sposób bardziej elegancki.
• Logical assignment operators (&&=, ||=, ??=): Nowe skróty operatorów logicznych, które upraszczają kod.
• Promise.any(): Nowa metoda dla obiektów Promise, która pozwala na zwrócenie pierwszego zakończonego pomyślnie promise'a.
• WeakRefs: Nowa funkcja pozwalająca na tworzenie odwołań do obiektów bez zapobiegania ich usunięciu przez garbage collector.
• Numeric Separators: Możliwość dodawania separatorów w liczbach, co poprawia czytelność dużych liczb.

To tylko kilka z wielu nowych funkcji, które pojawiły się w ES12. Teraz przyjrzymy się dokładniej, jak te funkcje działają w praktyce, i pokażemy Ci konkretne przykłady!

3. Operator nullish coalescing (??) – Zastosowanie i przykłady

Nullish coalescing (??) to operator, który pozwala na lepszą obsługę wartości null oraz undefined. W wielu przypadkach, gdy chcemy ustawić domyślną wartość dla zmiennej, która może być null lub undefined, dotychczas używaliśmy operatora ||. Jednak jest to rozwiązanie, które może sprawić problemy, gdy zmienna ma wartość, którą uznajemy za „fałszywą”, np. 0, pusty string czy false. Operator ?? pozwala na precyzyjniejsze podejście.

let name = null;
let defaultName = "Guest";
let userName = name ?? defaultName;  // 'Guest' – ponieważ name jest null

W powyższym przykładzie zmienna userName przyjmuje wartość "Guest", ponieważ zmienna name jest null. Operator ?? sprawdza wyłącznie wartości null i undefined, co pozwala uniknąć problemów z fałszywymi wartościami.

4. Logical assignment operators (&&=, ||=, ??=)

JavaScript ES12 wprowadza trzy nowe operatory przypisania logicznego: &&=, ||= oraz ??=. Są to skrócone wersje tradycyjnych operacji przypisania, które są bardziej wygodne i umożliwiają szybsze pisanie kodu. Przyjrzyjmy się każdemu z nich:

• &&= (AND assignment operator): Wykonuje operację AND, a wynik przypisuje do zmiennej, jeśli wyrażenie po lewej stronie jest prawdziwe.
• ||= (OR assignment operator): Wykonuje operację OR, a wynik przypisuje do zmiennej, jeśli wyrażenie po lewej stronie jest fałszywe.
• ??= (nullish coalescing assignment operator): Przypisuje wartość do zmiennej, tylko jeśli ta zmienna jest null lub undefined.

let userScore = 0;
userScore ||= 10;  // userScore = 10, ponieważ 0 jest fałszywe

let userInfo = null;
userInfo ??= {name: "John", age: 30};  // userInfo = {name: "John", age: 30}, ponieważ userInfo jest null

Te operatory są niezwykle użyteczne, ponieważ umożliwiają skrócenie kodu i poprawiają jego czytelność. Dzięki nim możemy uniknąć zbędnych instrukcji warunkowych i poprawić ogólną efektywność kodu.

5. Promise.any() – Jak działa?

Promise.any() to nowa metoda dostępna w JavaScript ES12, która pozwala na wykonanie zbioru obietnic (Promises) i zwrócenie pierwszej zakończonej pomyślnie. Jeśli żadna z obietnic nie zakończy się sukcesem, Promise.any() zwróci wyjątek (AggregateError).

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 100, "First"));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, "Second"));
const promise3 = new Promise((resolve, reject) => setTimeout(reject, 150, "Failed"));

Promise.any([promise1, promise2, promise3])
    .then(value => console.log(value))  // "First"
    .catch(error => console.log(error));

W tym przypadku Promise.any() zwróci "First", ponieważ jest to pierwsza obietnica, która zakończy się sukcesem. To świetne rozwiązanie, jeśli potrzebujesz szybszej odpowiedzi z kilku obietnic.

6. WeakRefs – Nowa funkcjonalność

WeakRefs to nowa funkcja wprowadza możliwość tworzenia słabych referencji do obiektów. Główna różnica między WeakRef a standardową referencją polega na tym, że obiekt, do którego odwołuje się WeakRef, może zostać usunięty przez garbage collector, nawet jeśli referencja do niego nadal istnieje. To narzędzie jest bardzo przydatne w przypadkach, gdy chcemy przechowywać odniesienia do obiektów, ale nie chcemy zapobiegać ich usunięciu, gdy nie są już potrzebne.

let object = { name: "My Object" };
let weakRef = new WeakRef(object);

console.log(weakRef.deref());  // { name: "My Object" }

WeakRefs są szczególnie przydatne w aplikacjach, które operują na dużych ilościach danych i muszą efektywnie zarządzać pamięcią.

7. Numeric Separators – Ułatwienie pracy z dużymi liczbami

JavaScript ES12 wprowadza również możliwość używania separatorów w liczbach. Jest to funkcjonalność, która ułatwia pracę z dużymi liczbami, zwiększając czytelność kodu. Separator "_" można umieszczać w dowolnym miejscu w liczbie, z wyjątkiem miejsc przed cyfrą lub po kropce dziesiętnej.

let billion = 1_000_000_000;
let pi = 3.141_592_653_589_793;

console.log(billion);  // 1000000000
console.log(pi);  // 3.141592653589793

To naprawdę pomaga w codziennej pracy, zwłaszcza w przypadku dużych liczb, które mogą być trudne do odczytania bez separatorów.

8. Zakończenie

JavaScript ES12 przynosi wiele przydatnych funkcji, które sprawiają, że programowanie staje się jeszcze łatwiejsze i bardziej efektywne. Dzięki nowym operatorom, metodom oraz ulepszonym funkcjom, nasza codzienna praca z kodem staje się bardziej wydajna i przyjemna. Jeśli jeszcze nie masz okazji wypróbować tych nowych funkcji, czas na aktualizację Twojego środowiska pracy! Warto korzystać z najnowszych rozwiązań, które JavaScript ma do zaoferowania!