Funkcje strzałkowe

Funkcje strzałkowe pozwalają na bardziej zwięzły i czytelny zapis kodu, co ułatwia jego późniejszą edycję i utrzymanie. Krótko mówiąc, są jedną z najciekawszych rzeczy wprowadzonych w ES6.

Nauka

React

JavaScript

Sprawdź również moje inne projekty :)

Spis treści:

- Funkcje strzałkowe

12 kwietnia 2023

Cześć, na wstępie pragnę przeprosić za dwu tygodniową przerwę, ale mam za sobą kilka rozmów oraz zadań rekrutacyjnych :)
Po krótkiej przerwie zaczniemy od funkcji strzałkowych, które zdecydowanie są jednym z najcieplej przyjętych dodatków wprowadzonych wraz z wejściem standardu ES6.

Funkcje strzałkowe

Funkcja strzałkowa definiowana jest za pomocą strzałki "=>" oraz może mieć krótszą składnię w porównaniu do tradycyjnej funkcji. Główną cechą funkcji strzałkowych jest to, że nie posiadają swojego kontekstu "this", co oznacza, że wartość "this" w funkcji strzałkowej jest dziedziczona z kontekstu otaczającego, a nie jest tworzona w momencie wywołania funkcji.

Przykład zapisu funkcji strzałkowej:

const add = (a, b) => {
  return a + b;
}

W powyższym przykładzie funkcja strzałkowa "add" przyjmuje dwa argumenty "a" i "b", a następnie zwraca ich sumę. Skrócona wersja tej samej funkcji mogłaby wyglądać tak:

const add = (a, b) => a + b;

W tej wersji nie trzeba używać słowa kluczowego "return", a zapis funkcji jest jeszcze bardziej zwięzły.

kluczowego "this". W przypadku tradycyjnych funkcji, wartość "this" jest określana na podstawie kontekstu, w którym funkcja jest wywoływana, co może prowadzić do niejasności i błędów. Funkcje strzałkowe, z drugiej strony, wiążą wartość "this" z wartością "this" kontekstu, w którym są one definiowane.

const obiekt = {
  name: 'John',
  greet: function() {
    setTimeout(function() {
      console.log('Witaj, ' + this.name);
    }, 1000);
  }
};

obiekt.greet(); // zwróci 'Witaj, undefined'

W powyższym przykładzie, funkcja wywołana przez setTimeout traci kontekst obiektu i zwraca undefined jako wartość name. Można to jednak łatwo naprawić za pomocą funkcji strzałkowych:

const obiekt = {
  name: 'John',
  greet: function() {
    setTimeout(() => {
      console.log('Witaj, ' + this.name);
    }, 1000);
  }
};

obiekt.greet(); // zwróci 'Witaj, John'

Funkcje strzałkowe są również użyteczne przy iterowaniu po tablicach i obiektach. Przykładowo, można użyć funkcji strzałkowej w metodzie map(), aby przekształcić tablicę:

const tablica = [1, 2, 3];

const podwojonaTablica = tablica.map((liczba) => liczba * 2);

console.log(podwojonaTablica); // zwróci [2, 4, 6]

Ogólnie rzecz biorąc, funkcje strzałkowe są jednym z najważniejszych narzędzi w języku JavaScript, które pozwalają na zwięzły i wyraźny zapis kodu oraz eliminują problemy związane z kontekstem "this".

...powrót