Funkcje strzałkowe w JavaScript (Arrow functions)

Dzisiejszy krótki wpis jest poświęcony nowości w standardzie ECMASCRIPT6 języka JavaScript jaką są funkcje strzałkowe (po ang. Arrow functions).

Funkcje strzałkowe zastępują nam funkcje anonimowe, ich wykorzystanie pozwala na skrócenie składni funkcji (a więc i naszego kodu JavaScript) oraz znaczne zwiększenie ich czytelności.

Aby zastosować funkcje strzałkowe używamy znaku => czyli tzw. grubej strzałki.

Poniżej prosty przykład wykorzystania:

const a = 3;

const multiply = function (number) {
  return number * a;
}.bind(this);

console.log(multiply(3)); //9

Powyższy przykład to oczywiście zwykła funkcja, przyjmująca jeden argument. Posiada ona przypisaną aktualność wartość this (tą z momentu deklaracji, nie z momentu wywołania). Użycie funkcji bind() w tym przykładzie jest bardzo ważne, ponieważ to w taki sposób działają funkcje strzałkowe.

Poniższy przykład obrazuje jak możemy wykorzystać funkcje strzałkowe i skrócić nasz zapis:

const a = 3;

const multiply = number => number * a;

console.log(multiply(3)); //9

Cała funkcja mieści się w jednej krótkiej linii kodu!

Tutaj nie musimy już pisać słowa kluczowego function ani return. Po lewej stronie strzałki => znajdują się argumenty, które przyjmuje funkcja, a po prawej wartość lub wyrażenie, które zostanie zwrócone.

Poniżej kolejny przykład, który pokaże jak możemy wykorzystać arrow functions w funkcji filter.

Przykładowa lista obiektów:

const cars = [
{name: Scania, type: truck},
{name: Man, type: truck},
{name: Porsche, type: sport},
{name: Rav4, type: SUV},
]

Powyższa lista obiektów składa się z przykładowych modeli samochodów różnego typu. Załóżmy że chcemy z niej wyciągnąć tylko ciężarówki. Do tego celu możemy użyć funkcji filter która stworzy nam listę samochodów z type=truck

const Trucks = cars.filter(function(ev){
  return ev.type == 'truck';
});

console.log(Trucks); //[{name: "Scania", type: "truck"}, {name: "Man", type: "truck"}]

Jednak użyjmy teraz arrow function => i spójrzmy, jak bardzo skróci nasz kod.

var Trucks = characters.filter(ev => ev.type == 'truck');
console.log(Trucks); //[{name: "Scania", type: "truck"}, {name: "Man", type: "truck"}]

Cała funkcja mieści się w jednej linii!

A co jeśli nasza funkcja musi przyjąć więcej niż jeden argument albo nie potrzebuje w ogóle żadnych argumentów?

W przypadku wielu argumentów, musimy zamknąć je w nawiasie okrągłym, np:

let max = (a, b) => a > b ? a : b;

W przypadku kiedy nasza funkcja strzałkowa nie przyjmuje żadnych argumentów, wstawiamy pusty nawias ().

var arg = 45;
var foo = () => arg;

foo(); //45

Mam nadzieję, że dzięki temu krótkiemu postowi rozumiesz już funkcje strzałkowe w JavaScript:)

 

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close