Arrow i map funkcije

U ovom blog postu pričaćemo o tome, zašto su nastale arrow funkcije, kako da ih koristimo unutar map funkcije. I na kraju videćemo kako da naši JSX izrazi budu čitljiviji uz pomoć arrow funkcije.

JavaScript ES6 uvodi arrow funkcije. Postoje dva glavna faktora su uticala na uvođenje arrow funkcija, a to su potreba za kraćim zapisom funkcija i ponašanje objekta this.

// function expression
var x = function(x, y) {
   return x * y;
}
// arrow function expression
const x = (x, y) => x * y;

Razlike između regularnog i arrow izraza funkcije ogledaju se u kraćem zapisu arrow funkcije nego što je to slučaj kod regularne funkcije. Kod arrow funkcije možemo da izostavimo ključnu reč return, i u nekim slučajevima možemo izostaviti zagrade, male zagrade ako imamo samo jedan ulazni parametar, i vitičaste zagrade ako u telu funkcije postoji samo jedan izraz. Dodatno, važno je spomenuti ponašanje objekta this. Obični izraz funkcije definiše svoj objekat this, dok arrow funkcija koristi this objekat iz konteksta u kom je definisana.

Ako želiš da saznaš više i bolje da razumeš objekat this poseti ovaj link.

Osnovna sintaksa arrow funkcije:

Ukoliko u telu funkcije (unutar vitičastih zagrada), imamo samo jedan izraz tada vitičaste zagrade možemo izostaviti, ali ukoliko imamo vise izraza tada su one obavezne.

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

Kada imamo samo jedan parametar, tada su male zagrade opcione, možemo ih pisati, ali i ne moramo:

singlePram => { statements }
(singlePram) => { statements }

U slučaju kada imamo više ulaznih parametara tada su male zagrade obavezne:

(param1, param2) = { ... }

Ovaj slučaj nije dozvoljen: param1, param2 = { … }

Kada nemamo ni jedan ulazni parametar to pisemo na sledeći način:

() => { statements }

Map funkcija i arrow funkcija

Upotrebu arrow funkcije unutar map funkcije najbolje ćemo pokazati na primeru. Prvo ćemo definisati niz kroz koji želimo da iteriramo, a cilj nam je da za svaki element niza izračunamo koliko ima karaktera odnosno da izračunamo dužinu svakog elementa.

let fruits = ['Orange','Bananas', 'Lemon'];

//regularna funkcija
fruits.map(function(item) {
return item.length;
}); // [6, 7, 5]


//arrow funkcija
fruits.map((item) => {
return item.length;
}); // [6, 7, 5]

//kada imamo samo jedan parametar možemo izostaviti male zagrade
fruits.map(item => {
return item.length;
}); // [6, 7, 5]

//kako imamo samo jedan izraz možemo izostaviti naredbu return
//mozemo izostaviti i vitičaste zagrade
fruits.map(item => item.length); // [6, 7, 5]

Kako da tvoj JSX izraz bude još čitljiviji

Imamo listu kao što je to prikazano na slici ispod:

import React, {Component} from 'react';
import './App.css';

class App extends Component {
constructor(props) {
super(props);
this.state = {
list: [{
personId: 0,
firstName: 'Ross',
lastName: 'Geller',
age: 34
},{
personId: 1,
firstName: 'Chandler',
lastName: 'Bing',
age: 34
}]
}
}
render () {
return (
<div className="App">
<div>
...
</div>
</div>
);
}

}

export default App;

Sada želimo da iteriramo kroz lsitu i da ispišemo njen rezultat to možemo uraditi na sledeći način:

{this.state.list.map( item => {
return (
<div key={item.personId}>
<span>{item.firstName}</span>
<span>{item.lastName}</span>
<span>{item.age}</span>
</div>
);
})}

Dodatno, možemo ukloniti vitičaste zagrade, kao i return naredbu.

{this.state.list.map(item =>
<div key={item.personId}>
<span>{item.firstName}</span>
<span>{item.lastName}</span>
<span>{item.age}</span>
</div>
)}

Sada tvoj JSX izraz izgleda mnogo jasnije i čitljivije 🙂 .