Czym jest funkcja strzałkowa w JavaScript?

By /

JavaScript

Funkcje strzałkowe, wprowadzone w ES6 (ECMAScript 2015), stanowią zwięzłą składnię do tworzenia funkcji w JavaScript. Są one nie tylko krótsze, ale również zmieniają sposób, w jaki this jest wiązane, co czyni je szczególnie przydatnymi w pewnych sytuacjach.

Składnia funkcji strzałkowych

Podstawowa składnia funkcji strzałkowej wygląda następująco:

// pseudokod
const functionName = (param1, param2, ..., paramN) => {
    // instrukcje
}

Jeśli funkcja przyjmuje tylko jeden argument, nawiasy są opcjonalne:

const functionName = param => {
    // instrukcje
}

A jeśli ciało funkcji zawiera tylko jedną instrukcję, która zwraca wartość, można pominąć klamry i słowo kluczowe return:

const functionName = param => param * 2;

this w funkcjach strzałkowych

Jedną z głównych zalet funkcji strzałkowych jest ich zachowanie w odniesieniu do słowa kluczowego this. W funkcjach strzałkowych this jest wiązane leksykalnie, co oznacza, że używa this z otaczającego zakresu kodu, w którym funkcja została zdefiniowana. To różni się od tradycyjnych funkcji, gdzie this może zmieniać swoje wiązanie w zależności od kontekstu wywołania.

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++; // `this` odnosi się leksykalnie do obiektu Person
    }, 1000);
}

Gdzie nie używać funkcji strzałkowych

Chociaż funkcje strzałkowe są bardzo przydatne, istnieją przypadki, w których ich użycie nie jest zalecane:

  • Jako metody w obiektach, gdy zależy nam na wiązaniu this z obiektem.
  • W definicjach prototypów.
  • W przypadku obsługi zdarzeń, gdzie this powinno odnosić się do elementu, na którym zdarzenie zostało wywołane.

Przykłady użycia

Funkcje strzałkowe świetnie sprawdzają się w operacjach na tablicach, takich jak mapowanie, filtrowanie czy inne operacje callback:

let numbers = [1, 2, 3, 4];
let doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8]

Podsumowanie

Funkcje strzałkowe w JavaScript oferują zwięzłą składnię i leksykalne wiązanie this, co sprawia, że są one użyteczne w wielu scenariuszach programistycznych. Ich zrozumienie i właściwe stosowanie pozwala na pisanie bardziej czytelnego i funkcjonalnego kodu, szczególnie w przypadkach, gdzie wymagane jest zachowanie kontekstu wywołania.

Jeżeli chcesz przyśpieszyć swoją naukę chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego koncepcji.

 

Powiązane artykuły

Scroll to Top