Nyílfüggvények Javascriptben

A nyílfüggvények – más néven “kövér nyíl” függvények – viszonylag új módja a tömör függvények írásának JavaScriptben. Az ECMAScript 6 specifikációja vezette be őket, és azóta az ES6 legnépszerűbb funkciójává váltak. A nyílfüggvények lehetővé teszik, hogy a kövér nyíl => operátor segítségével gyorsan definiáljunk JavaScript függvényeket, paraméterekkel vagy anélkül. Egy új JavaScript-funkció létrehozásakor elhagyhatjuk a csavart zárójeleket, valamint a function és return kulcsszavakat, így rövidebb függvényszintaxist írhatunk. Ezek nemcsak időt takarítanak meg, hanem tiszta és olvashatóbb függvényeket is eredményeznek.

Ebben a cikkben nézzünk meg néhány valós forgatókönyvet a nyílfüggvények létrehozására – az ES6 és a régebbi ECMAScript 5 jelölés használatával, hogy lássuk, hogyan viszonyul egymáshoz a két szintaxis.

A legegyszerűbb nyílfüggvény-szintaxis az, amikor a függvénynek nincsenek paraméterei. Az alábbi példában az ECMAScript 5 szintaxis egy függvénykifejezést deklarál, és hozzárendeli a születésnap változóhoz. Egy egyszerű szöveges karakterláncot ad ki a konzolra “Boldog születésnapot!” szöveggel:

A nyílfüggvény szintaxisban eltűnnek a szögletes zárójelek és a function és return kulcsszavak. Most már az egész függvény egyetlen sort vesz igénybe. Az üres zárójelek azt jelzik, hogy a függvénynek nincsenek paraméterei, a kövér nyíl pedig a függvénytestet a (jelenleg nem létező) paraméterekhez köti:

Egy paraméter

Bővítsük az előző példát egy paraméterrel, konkrétan névvel. A régi ES5 szintaxis egy paramétert vesz fel, és annak értékét a visszaadandó karakterlánchoz csatolja:

A nyílfüggvény szintaxis lényegében ugyanezt teszi. A név paramétert a kövér nyíl előtt zárójelbe kell zárnunk, és a függvényblokkban a return kulcsszót el kell hagynunk:

Két paraméterrel

Ahány paraméterrel használhatunk nyílfüggvényeket. Itt van például ugyanez a példa két paraméterrel, az életkorral és a névvel. Most a birthday() függvénynek két bemenetre van szüksége ahhoz, hogy visszaadja a karakterláncot. Először is, használjuk az ECMAScript 5-t:

És itt ugyanaz a kód az új ES6 jelöléssel:

Object Literals

A nyílfüggvény szintaxist használhatjuk a setter függvények deklarálására is, amelyekkel a felhasználók beállíthatják az objektum literálok értékét. Az alábbi setBirthday() függvény lehetővé teszi a felhasználók számára, hogy beállítsák a születésnapos személy nevét és életkorát:

A nyílfüggvény jelölés alkalmazásával csak egy sorba kerül ugyanennek a setter függvénynek a definiálása:

Tömbmanipuláció

Nyílfüggvényeket használhatunk a JavaScript tömbök manipulálására is. Nézzük meg például a persons tömböt, amely három objektumliterált tartalmaz, mindegyiknek van egy neve és egy kora tulajdonsága:

A JavaScript beépített map() metódusa lehetővé teszi, hogy a tömb minden elemén ugyanazt a függvényt hívjuk meg. A hagyományos ES5 jelölést használva a következőképpen adhatjuk vissza minden egyes személy név tulajdonságát:

A nyílfüggvény jelöléssel ugyanezt a feladatot egy sorban is elvégezhetjük:

Mikor ne használjunk nyílfüggvényeket

Noha a nyílfüggvényeknek számos felhasználási esetük van, néhány korlátozással is járnak. Van néhány olyan forgatókönyv, amikor nem használhatjuk vagy nem kellene használnunk a nyílfüggvény szintaxist.

A legfontosabb, hogy nem hozhatunk létre konstruktorokat nyílfüggvényekkel. Ha a new kulcsszót a kövér nyíl szintaxissal együtt használjuk, a konzol hibát fog dobni. Ez azért történik, mert a JavaScript ugyanúgy kezeli a nyílfüggvényeket, mint az objektum metódusokat. Ennek következtében nem rendelkezhetnek saját metódusokkal, ami a JavaScript objektumok alapvető tulajdonsága lenne. Emellett nem használhatjuk az ES6 szintaxisát a this kulcsszót használó metódusokat tartalmazó objektum literálok és callback függvények deklarálására, mivel a nyílfüggvények ezt másképp kezelik.

Következtetés

A nyílfüggvények hasznos rövidítést nyújtanak a fejlesztőknek a függvénykifejezések írásához JavaScriptben. A kövér nyíl szintaxisnak számos felhasználási területe van, ezért gyorsan a JavaScript közösség kedvenc ES6 funkciójává vált. Ha következetesen használják, az új kompakt jelölés sok időt és sávszélességet takaríthat meg, és javíthatja a kód olvashatóságát.

Köszönjük az olvasást.