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 🙂 .