0

Arrow functions – JavaScript

Czym są arrow functions?

Arrow functions ( zwane również pod nazwą fat arrow functions ) zostały wprowadzone w ES6 jako nowa składnia zapisu  funkcji,  dokładniej function expression. Są funkcjami anonimowymi oraz posiadają leksykalne this. Ponadto przyśpieszają pisanie funkcji ( mniejsza ilość znaków, mogą być inline ) oraz zwiększają czytelność kodu.

 

Składnia

Prosta funkcja strzałkowa wygląda tak:

// ES5 function expression

var multiplyFunctionExpression = function( x, y ) 
{
   return x * y;
}


//ES6 Arrow function

var multiplyArrowFunction = ( x, y ) => { return x * y; };

Jak widać, pozbyliśmy się wielu znaków z kodu, oraz udało się zapisać tą prostą funkcję w jednej linijce.  Możemy ten zapis jeszcze bardziej skrócić.

Ciało funkcji jest jedną linijką:

// ES6 arrow function

var multiply = ( x, y ) => x * 3;

W przypadku tylko jednej ekspresji nawiasy klamrowe nie są wymagane, ponadto wartość ta jest zwracana.

Gdy funkcja przyjmuje tylko jeden argument, możemy…

Jeśli nasza funkcja przyjmuje tylko jeden parametr możemy pominąć nawias, oto przykład:

var square = a => a*a;

 

Manipulacja tablicami

Bardzo częstym przypadkiem użycia arrow function są manipulacje związane z tablicami. Fat arrow nadaję się do tego idealnie.

Mamy tablicę obiektów książek. Książki posiadają swój id, tytuł, cenę oraz autora:

var books = [
              { id: 1, title: "Harry Potter and the Sorcerer's Stone", "J. K. Rowling.", 56.65 },  
              { id: 1, title: "Clean Code : A Handbook of Agile Software Craftsmanship", "Martin Robert", 154.55 },
              { id: 1, title: " Intro to Modeling Neural Networks C", "Pierre Peretto", 646.20 },
              { id: 1, title: "Grey: Fifty Shades of Grey ", "E. L. James", 25.10 },
              { id: 1, title: "Complete Sherlock Holmes", "Conan Doyle", 142.25 },
            ];

Naszym zadaniem jest zdobycie obiektów których cena jest większa od 100, zobaczmy:

// ES5 function

book.filter( function( book ) {
  return book.price > 100;
} );

//ES6 Arrow function
book.filter( book => book > 100; );

W tym przykładzie dobitnie widać korzyści płynąc z używania fat arrow, piszemy dużo mniej kodu. A nasz zapis jest dużo krótszy oraz bardziej zrozumiały na pierwszy rzut oka. (oczywiście jeśli wiesz jak działają funkcje strzałkowe).

 

Zwracanie obiektu

Załóżmy że chcemy zwrócić obiekt Book, za pomocą funkcji ECMA5 zapis wygląda tak:

var book = function( title )
           {
             return {
                       title: 'title',
                    };
           }

Spójrzmy teraz na zapis z wykorzystaniem arrow function, jak mogłoby się wydawać powinien wyglądać on tak:

let book = title => { title: title };

Niestety to nie przejdzie, interpreter javascript natrafiając na { } zaraz po fat arrow, spodziewa się ciała funkcji, a nie obiektu. Przez co parser znajduje i identyfikuje w ciele funkcji label. A wartością zwracaną jest undefinded.

Istnieje jednak prosty trik:

Aby parser javascript interpretował ten kawałek kodu według naszych potrzeb, musimy otoczyć obiekt nawiasem:

let book = title => ( { title: title } );


//We can use even shorter syntax:

let book = title => ( { title } );

Trik działa dlatego że block statament nie może zostać otoczony ( ). A więc parser, bierze kod ze ze środka nawiasów, a tam znajduję s obiekt, który zwraca. W ten prosty sposób możemy zwracać obiekty za pomocą arrow function.

To nie wszystko

To tylko część korzyści płynących z funkcji strzałkowych, między innymi posiadają leksykalne this. Dzięki nim konkretnie zwiększamy skracamy ilość znaków potrzebnych do zapisu funkcji. Wpływa to bardzo pozytywnie na czytelność. Nie może dziwić fakt że są najpopularniejszym featurem ES6.

 

admin