JavaScript ES13 – te funkcje zmienią Twój kod na zawsze!

Czy jesteś gotów na kolejną rewolucję w świecie JavaScriptu? Jeśli tak, to rozsiądź się wygodnie, bo nadchodzi JavaScript ES13 – wersja ECMAScript 2022, która przynosi świeżą porcję funkcji, ułatwień i niespodzianek! Dla wielu programistów każda nowa edycja ECMAScript to jak święta – bo daje nowe możliwości, zwiększa czytelność kodu i sprawia, że programowanie staje się przyjemniejsze niż kiedykolwiek. W tym artykule przyjrzymy się dokładnie, co przynosi nam javascript es13, oraz pokażemy konkretne javascript es13 przykłady do natychmiastowego użycia.

ECMAScript 2022 – czyli JavaScript ES13 w pełnej krasie

Standard ECMAScript jest rozwijany corocznie, a jego wersje noszą oznaczenia ES + numer rocznika. ES13 to nic innego jak wersja ECMAScript 2022, która została oficjalnie zatwierdzona przez TC39 w połowie 2022 roku. Co ciekawe, mimo że wiele przeglądarek zaczęło wspierać te funkcje dość szybko, wiele osób nadal nie zna w pełni ich możliwości. Czas to zmienić!

Top 6 nowości w JavaScript ES13

Przejdźmy do konkretów. Oto najważniejsze nowości, które warto znać w JavaScript ES13:

• Top-level await – użycie await poza funkcją async
• At() method – łatwiejszy dostęp do elementów tablicy
• Error Cause – przekazywanie przyczyny błędu
• Object.hasOwn() – bezpieczna alternatywa dla hasOwnProperty
• RegExp Match Indices – dokładniejsze dopasowania
• Class Fields & Static Initializers – nowe możliwości dla klas

Top-level await – prosto, czysto i bez async()

Do tej pory użycie await było możliwe tylko wewnątrz funkcji oznaczonych jako async. Dzięki ES13 możesz teraz używać await bez konieczności owijania wszystkiego w funkcję!

// Przed ES13:
async function start() {
  const response = await fetch('/data.json');
}
start();

// Teraz w ES13:
const response = await fetch('/data.json');

To ogromna wygoda np. w plikach modułowych, gdzie wcześniej trzeba było pisać dodatkowe funkcje tylko po to, by użyć await. Teraz – działa od ręki!

Metoda .at() – koniec z negatywnymi indeksami?

Ile razy pisałeś array[array.length - 1], żeby dostać ostatni element? Teraz wystarczy .at(-1)! Ta metoda działa zarówno z tablicami, jak i łańcuchami znaków.

const letters = ['a', 'b', 'c', 'd'];
console.log(letters.at(-1)); // 'd'

To nie tylko bardziej czytelne, ale i bezpieczniejsze – unikniesz literówek typu lenght czy niepotrzebnych obliczeń.

Przekazywanie przyczyny błędu – Error cause

Czasem jeden błąd wynika z innego – np. problem z API może być efektem błędu sieci. W ES13 możesz przekazać „przyczynę” błędu w bardzo elegancki sposób:

try {
  throw new Error("Błąd sieci");
} catch (err) {
  throw new Error("Nie udało się pobrać danych", { cause: err });
}

Dzięki temu, gdy błąd zostanie złapany, mamy dostęp do jego cause:

console.error(err.message); // "Nie udało się pobrać danych"
console.error(err.cause);   // "Błąd sieci"

To ogromny krok naprzód w debugowaniu i lepszym opisywaniu błędów.

Object.hasOwn() – prostsze niż hasOwnProperty

Znasz ten klasyczny sposób:

if (obj.hasOwnProperty('klucz')) { ... }

Od teraz możesz napisać to krócej i bezpieczniej:

if (Object.hasOwn(obj, 'klucz')) { ... }

Nie musisz się martwić, czy ktoś nie nadpisał hasOwnProperty. Nowa metoda to czysta radość – i większe bezpieczeństwo kodu.

RegExp Match Indices – dokładne dopasowanie pozycji

Jeśli używasz wyrażeń regularnych, pokochasz flagę d, która dodaje indeksy dopasowań:

const regex = /(a)(b)/d;
const result = regex.exec('abc');
console.log(result.indices); // [ [ 0, 2 ], [ 0, 1 ], [ 1, 2 ] ]

Teraz możesz dokładnie wiedzieć, gdzie w ciągu znaków pojawia się dopasowanie – idealne dla edytorów tekstu, analizatorów składni i debuggerów.

Class fields i static initialization blocks

W ES13 klasy zyskały więcej mocy. Możesz teraz tworzyć właściwości instancji i statyczne bloki inicjalizacyjne:

class MyClass {
  name = 'Anonim';

  static {
    console.log('Klasa została załadowana!');
  }
}

To otwiera drogę do bardziej eleganckiego kodu obiektowego bez konieczności pisania constructorów dla każdej drobnostki.

Podsumowanie zmian – javascript es13 przykłady w pigułce

• Top-level await: bez funkcji async, prościej
• at(): dostęp do elementów z końca tablicy
• Error cause: pełna historia błędów
• Object.hasOwn(): bezpieczne sprawdzanie własnych pól
• RegExp indices: dopasowania z lokalizacją
• Class fields: krócej, czytelniej, lepiej!

Dla kogo jest JavaScript ES13?

Dla każdego, kto pisze w JavaScript! Niezależnie czy jesteś frontendowcem tworzącym aplikacje w React, czy backendowcem w Node.js – nowe funkcje ES13 przydadzą się w codziennej pracy. To także świetna okazja, by uczynić swój kod nowocześniejszym i bardziej przyszłościowym.

Warto również pamiętać, że większość nowych funkcji jest wspierana w przeglądarkach typu Chrome, Firefox, Edge czy Safari oraz w Node.js od wersji 16+. Dzięki temu możesz zacząć ich używać już dziś!

Co dalej? Czy będzie ES14?

Oczywiście! TC39 już pracuje nad kolejnymi funkcjami – m.in. pipe operator, pattern matching czy nowe sposoby pracy z kolekcjami. Ale o tym napiszemy następnym razem 😊

Na razie warto skupić się na wykorzystaniu tego, co już daje JavaScript ES13. Jak pokazaliśmy w naszych javascript es13 przykładach, nowe funkcje mogą uczynić Twój kod nie tylko krótszym, ale też bardziej czytelnym, bezpiecznym i eleganckim.

Spróbuj ich już dziś, a nie będziesz chciał wracać do starszych wersji ECMAScript. Programowanie może być jeszcze przyjemniejsze – a ES13 to najlepszy dowód!