ES6#4 Arrow functions czyli funkcje strzałkowe

W poprzednich częściach serii dotyczącej standardu ECMASCRIPT6 języka JavaScript poznaliśmy słowo kluczowe class, dowiedzieliśmy się czym jest let i const oraz spread i rest przy okazji omawiania destrukturyzacji. Tym razem zajmiemy się chyba najbardziej rozpoznawalną funkcjonalnością ES6, czyli funkcjami strzałkowymi. Arrow Functions pozwalają na skrócenie i zwiększenie czytelności naszego kodu, co jest bardzo pożądanym zjawiskiem przez wszystkich programistów. Zachaczymy też trochę o podstawy programowania funkcyjnego, ponieważ to właśnie przy okazji pisania takiego kodu najbardziej są przydatne te funkcje. Zaczynajmy!

Jeśli nie czytałeś jeszcze wcześniejszych części, to rzuć okiem na http://www.idaszak.com/article/2017/04/05/es6-2-var-let-const,
ponieważ w poniższym kodzie będziemy korzystać z let oraz const. Zapraszam także do zapoznania się z klasami w ES6:
http://www.idaszak.com/article/2017/04/02/czy-javascript-jest-obiektowy

# Czym są arrow functions?

Funkcje strzałkowe, czyli arrow functions zastępują nam funkcje anonimowe, oferując znacznie krótszą składnie.

Aby je zastosować używamy znaku =>, czyli grubej strzałki, której składnia wzięła się z CoffeScripta, czyli języka kompilowanego do JavaScriptu. Jeśli znasz taki język jak Haskell, to pewnie już spotkałeś się z takimi funkcjami.

Zacznijmy od prostego przykładu, który zobrazuje różnice między funkcjami.

 
const a = 2;

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

console.log(multiply(2)); //4

Tak wygląda zwykła funkcja, przyjmująca jeden argument, która posiada przypisaną aktualną wartość this, czyli this z momentu deklaracji, zamiast tego z momentu wywołania. Użycie bind w tym przykładzie jest bardzo istotne, ponieważ właśnie w taki sposób działają funkcje strzałkowe. Zobaczmy teraz jak można taką funkcję skrócić:

 
const a = 2;

const multiply = number => number * a;

console.log(multiply(2)); //4

W tym przypasku nie musieliśmy już pisać słowa kluczowego function ani return. Po lewej stronie strzałki znajdują się argumenty, które przyjmuje funkcja, a po prawej wartość, bądź wyrażenie, które zostanie zwrócone.

# Zastosowanie arrow functions - funkcja filter

 
const characters = [
	{name: Butch , role: Boxer},
	{name: Vincent, role: Hitman},
	{name: Winston, role: Problem solver},
	{name: Jules, role: Hitman},
]

Stworzyliśmy właśnie listę obiektów, składających się z wyszkolonych osób do wynajęcia, jednak w naszym przypadku lista nie jest satysfakcjonująca, ponieważ do naszego zadania potrzebujemy tylko płatnych zabójców! W takim przypadku możemy użyć funkcji filter, aby stworzyć listę osób, które mają rolę Hitman.

 
const HitMan = characters.filter(function(ev){
   return ev.role == 'Hitman';
});

console.log(HitMan); //[{name: "Vincent", role: "Hitman"}, {name: "Jules", role: "Hitman"}]

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

 
var HitMan = characters.filter(ev => ev.role == 'Hitman');
console.log(HitMan); //[{name: "Vincent", role: "Hitman"}, {name: "Jules", role: "Hitman"}]

A co w przypadku jeśli funkcja przyjmuje więcej niż jeden argument lub nie przyjmuje żadnych argumentów?

W przypadku wielu argumentów, musimy pamiętać, żeby zamknąć nasze argumenty w nawiasie okrągłym:

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

W powyższym przykładzie użyliśmy skróconej formy warunku if, gdzie naszym warunkiem jest a > b, wartością zwróconą w przypadku prawdy jest pierwszy argument po znaku zapytania, czyli a, a w przypadku fałszu jest to b znajdujące się po dwukropku.

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

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

foo(); //72
blog comments powered by Disqus