Javascript yield: Co to jest i jak wykorzystać w praktyce?

JavaScript to język, który od lat jest jednym z najważniejszych narzędzi w rękach programistów webowych. Codziennie używamy go do tworzenia dynamicznych stron internetowych i aplikacji. Jednym z mniej znanych, ale niezwykle potężnych elementów JavaScript, który może znacznie ułatwić pracę, jest yield. Ale czym właściwie jest "yield" w JavaScript? Jak działa? I kiedy warto go używać? Na te pytania odpowiemy w tym artykule!

Co to jest javascript yield?

W najprostszych słowach, yield to specjalne słowo kluczowe w JavaScript, które jest używane w funkcjach generatorach. Funkcje generatory to funkcje, które mogą zatrzymywać swoje działanie w jednym punkcie, a następnie wznowić je w innym, bez konieczności przerywania całego procesu wykonania kodu. Dzięki temu kod jest bardziej wydajny, a programista ma większą kontrolę nad przepływem programu.

Warto dodać, że yield nie jest czymś, co spotykamy w standardowych funkcjach. Jest to zarezerwowane dla funkcji typu generator. Generator to funkcja, która zwraca obiekt iteratora i pozwala na wykonywanie operacji w sposób, który pozwala na "zatrzymanie" funkcji w określonym momencie. Kiedy używamy yield, funkcja zatrzymuje swoje działanie, ale pozostaje w pamięci, co pozwala na późniejsze wznowienie jej pracy.

Jak działa yield w praktyce?

Aby lepiej zrozumieć działanie yield, przyjrzyjmy się poniższemu przykładowi:

function* liczby() {
  yield 1;
  yield 2;
  yield 3;
}

const generator = liczby();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }

W tym przykładzie funkcja liczby() jest funkcją generatorem, która używa yield do zwrócenia kolejnych liczb. Za każdym razem, gdy wywołujemy metodę next() na obiekcie generatora, funkcja zatrzymuje się w punkcie, w którym znajduje się yield, a następnie wznowi działanie, zwracając kolejną wartość.

Dlaczego warto używać yield w JavaScript?

Główne zalety używania yield w JavaScript to:

• Wydajność – Dzięki generatorom i yield, możemy wykonywać operacje asynchronicznie i zarządzać dużymi zbiorami danych bez blokowania głównego wątku aplikacji.
• Kontrola nad przepływem – yield daje pełną kontrolę nad tym, kiedy funkcja ma zatrzymać swoje działanie i kiedy ma być wznowiona, co pozwala na bardziej precyzyjne zarządzanie kodem.
• Łatwość w zarządzaniu pamięcią – Funkcje generatory zużywają pamięć tylko wtedy, kiedy są wywoływane, co zmniejsza zużycie zasobów w porównaniu do tradycyjnych funkcji.
• Łatwość w implementacji asynchronicznych operacji – Generator jest idealny do operacji asynchronicznych, ponieważ nie blokuje głównego wątku, umożliwiając dalsze przetwarzanie danych, dopóki nie uzyskamy wyniku z operacji.

Przykład: Asynchroniczne operacje z yield

Załóżmy, że musimy wykonać operację, która zajmuje trochę czasu, jak np. pobieranie danych z API. Normalnie musielibyśmy użyć funkcji async i await, ale zamiast tego możemy użyć generatorów i yield, aby uzyskać podobny efekt:

function* fetchData() {
  const response = yield fetch('https://jsonplaceholder.typicode.com/posts');
  const data = yield response.json();
  console.log(data);
}

const generator = fetchData();
generator.next().value
  .then(response => generator.next(response).value)
  .then(data => generator.next(data))
  .catch(err => console.log(err));

W tym przykładzie generator działa podobnie jak funkcja asynchroniczna, gdzie wywołanie next() zatrzymuje funkcję, aż operacja pobierania danych z API zostanie zakończona. Dopiero wtedy funkcja zostanie wznowiona, a wynik operacji przetworzony.

Generator vs. funkcje asynchroniczne

Wielu programistów może się zastanawiać, czy warto używać generatorów z yield, skoro JavaScript oferuje funkcje async/await, które również pozwalają na asynchroniczne przetwarzanie kodu. Odpowiedź na to pytanie nie jest jednoznaczna i zależy od konkretnego przypadku.

Funkcje generatorów są bardziej elastyczne w zarządzaniu stanem aplikacji, ponieważ dają pełną kontrolę nad przepływem i mogą być wznowione w dowolnym momencie. Możemy je także łatwiej dostosować do operacji synchronicznych i asynchronicznych w jednym kontekście.

function* generujLiczby() {
  while (true) {
    yield Math.floor(Math.random() * 100);
  }
}

const generator = generujLiczby();
console.log(generator.next().value); // Losowa liczba
console.log(generator.next().value); // Kolejna losowa liczba