Dzisiejszy 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, najpierw standardowy zapis:

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:)