35. Funkcje strzałkowe

Wprowadzenie do funkcji strzałkowych

Funkcje strzałkowe (ang. arrow functions) to skrócona składnia definiowania funkcji w JavaScript, wprowadzona w standardzie ES6 (ECMAScript 2015). Są one szczególnie przydatne do pisania krótkich, zwięzłych funkcji. Funkcje strzałkowe mają kilka istotnych różnic w porównaniu z tradycyjnymi funkcjami, które warto znać.

Składnia funkcji strzałkowych

Funkcje strzałkowe mają kilka wariantów składni, w zależności od liczby parametrów i złożoności funkcji.

1. Funkcja bez parametrów
const powitanie = () => {
  return "Witaj!";
};
2. Funkcja z jednym parametrem
const kwadrat = x => {
  return x * x;
};
3. Funkcja z wieloma parametrami
const suma = (a, b) => {
  return a + b;
};
4. Skrócona składnia dla pojedynczej instrukcji
const kwadrat = x => x * x;
Różnice między funkcjami strzałkowymi a tradycyjnymi

Funkcje strzałkowe różnią się od tradycyjnych funkcji w kilku kluczowych aspektach:

  • Brak własnego kontekstu this: Funkcje strzałkowe nie tworzą własnego kontekstu this. Zamiast tego, dziedziczą this z otaczającego kontekstu.
  • Brak argumentów arguments: Funkcje strzałkowe nie mają obiektu arguments. Zamiast tego, można użyć parametru rest ....
  • Nie mogą być używane jako konstruktory: Nie można używać funkcji strzałkowych z operatorem new.
  • Brak własnej właściwości prototype: Funkcje strzałkowe nie mają właściwości prototype.
Zastosowanie funkcji strzałkowych

Funkcje strzałkowe są szczególnie przydatne w następujących przypadkach:

  • Krótkie funkcje zwrotne (ang. callback functions).
  • Funkcje, które nie wymagają własnego kontekstu this.
  • Funkcje, które mają być zwięzłe i czytelne.
Przykład: Funkcja zwrotna
const liczby = [1, 2, 3, 4, 5];
const kwadraty = liczby.map(x => x * x);
console.log(kwadraty); // [1, 4, 9, 16, 25]
Przykład: Użycie w metodach tablicowych
const liczby = [1, 2, 3, 4, 5];
const parzyste = liczby.filter(x => x % 2 === 0);
console.log(parzyste); // [2, 4]
Kontekst this w funkcjach strzałkowych

Jedną z najważniejszych cech funkcji strzałkowych jest to, że nie tworzą one własnego kontekstu this. Zamiast tego, dziedziczą this z otaczającego kontekstu. Jest to szczególnie przydatne w funkcjach zwrotnych, gdzie chcemy zachować kontekst obiektu.

Przykład: Kontekst this w obiektach
const osoba = {
  imie: "Tadeusz",
  powitanie: function() {
    setTimeout(() => {
      console.log(`Witaj, ${this.imie}!`);
    }, 1000);
  }
};

osoba.powitanie(); // Witaj, Tadeusz!

W powyższym przykładzie, funkcja strzałkowa użyta w setTimeout dziedziczy kontekst this z metody powitanie, dzięki czemu ma dostęp do właściwości imie.

Parametry rest i domknięcia

Funkcje strzałkowe mogą korzystać z parametrów rest oraz domknięć (ang. closures), podobnie jak tradycyjne funkcje.

Przykład: Parametry rest
const suma = (...args) => args.reduce((a, b) => a + b, 0);
console.log(suma(1, 2, 3)); // 6
Przykład: Domknięcia
const tworzLicznik = () => {
  let licznik = 0;
  return () => ++licznik;
};

const licznik = tworzLicznik();
console.log(licznik()); // 1
console.log(licznik()); // 2
Podsumowanie

Funkcje strzałkowe to potężne narzędzie w JavaScript, które pozwala na pisanie krótszego, bardziej zwięzłego i czytelnego kodu. Są szczególnie przydatne w funkcjach zwrotnych oraz w przypadkach, gdzie chcemy zachować kontekst this z otaczającego zakresu.

Pamiętaj, że funkcje strzałkowe nie są odpowiednie w każdej sytuacji. Nie używaj ich jako konstruktorów ani w przypadkach, gdzie potrzebujesz własnego kontekstu this lub obiektu arguments.