Nuolifunktiot Javascriptissä

Nuolifunktiot – joita kutsutaan myös nimellä ”läskinuolifunktiot” – ovat verrattain uusi tapa kirjoittaa ytimekkäitä funktioita JavaScriptissä. Ne on otettu käyttöön ECMAScript 6 -spesifikaatioissa, ja niistä on sittemmin tullut suosituin ES6-ominaisuus. Nuolifunktioiden avulla voimme käyttää paksun nuolen =>-operaattoria JavaScript-funktioiden nopeaan määrittelyyn parametrien kanssa tai ilman niitä. Voimme jättää kiharat sulkeet ja function- ja return-avainsanat pois uutta JavaScript-funktiota luodessamme ja kirjoittaa lyhyemmän funktiosyntaksin. Ne paitsi säästävät aikaa myös tuottavat siistejä ja luettavampia funktioita.

Tässä artikkelissa tarkastellaan joitakin todellisia skenaarioita nuolifunktioiden luomiseksi – käyttäen ES6:n ja vanhemman ECMAScript 5:n merkintätapaa, jotta näemme, miten nämä kaksi syntaksia vertautuvat toisiinsa.

Yksinkertaisin nuolifunktiosyntaksi on se, kun funktiolla ei ole yhtään parametria. Alla olevassa esimerkissä ECMAScript 5 -syntaksilla julistetaan funktion lauseke ja osoitetaan se syntymäpäivä-muuttujalle. Se tulostaa konsoliin yksinkertaisen tekstijonon, jossa lukee ”Hyvää syntymäpäivää!”:

Nuolifunktiosyntaksissa sulkeet sekä funktiota- ja return-avainsanat katoavat. Nyt koko funktio vie vain yhden rivin. Tyhjät sulkeet osoittavat, että funktiolla ei ole parametreja, ja lihava nuoli sitoo funktion rungon (tällä hetkellä olemattomiin) parametreihin:

Yksi parametri

Laajennetaan edellistä esimerkkiä yhdellä parametrilla, tarkemmin sanottuna nimellä. Vanha ES5-syntaksi ottaa yhden parametrin ja liittää sen arvon palautettavaan merkkijonoon:

Nuolifunktio-syntaksi tekee pohjimmiltaan saman asian. Meidän täytyy sulkea nimiparametri sulkuihin ennen paksua nuolta ja jättää return-avainsana pois funktiolohkossa:

Kahdella parametrilla

Voimmepa käyttää nuolifunktioita, joissa on haluamamme monta parametria. Tässä on esimerkiksi sama esimerkki, jossa on kaksi parametria, ikä ja nimi. Nyt syntymäpäivä()-funktio vaatii kaksi syötettä palauttaakseen merkkijonon. Käytetään ensin ECMAScript 5:tä:

Ja tässä on sama koodi uudella ES6-merkinnällä:

Objektilitteraalit

Voimme myös käyttää nuolifunktiosyntaksia ilmoittaaksemme setterifunktioita, joiden avulla käyttäjät voivat asettaa objektilitteraalien arvon. Alla olevan setBirthday()-funktion avulla käyttäjät voivat asettaa syntymäpäivää viettävän henkilön nimen ja iän:

Hyötyilemällä nuolifunktioiden merkintätapa käyttämällä saman setterifunktion määrittelemiseen riittää vain yksi rivi:

Array-manipulaatio

Voidaan käyttää nuolifunktioita myös JavaScript-matriisien manipulointiin. Tarkastellaan esimerkiksi persons-matriisia, joka sisältää kolme objektilitteraalia, joilla kullakin on nimi ja ikä-ominaisuus:

JavaScriptiin sisäänrakennetun map()-metodin avulla voimme kutsua samaa funktiota jokaiselle määrikön alkiolle. Käyttämällä perinteistä ES5-merkintätapaa voimme palauttaa jokaisen henkilön nimiominaisuuden seuraavasti:

Nuolifunktioiden merkintätavalla voimme suorittaa saman tehtävän yhdellä rivillä:

Kun ei kannata käyttää nuolifunktioita

Vaikka nuolifunktioilla on monia käyttötapauksia, niihin liittyy myös joitakin rajoituksia. On joitain skenaarioita, joissa emme voi tai meidän ei pitäisi käyttää nuolifunktiosyntaksia.

Tärkeintä on, ettemme voi luoda konstruktoreita nuolifunktioilla. Jos käytämme new-avainsanaa yhdessä paksun nuolifunktiosyntaksin kanssa, konsoli heittää virheen. Näin tapahtuu, koska JavaScript käsittelee nuolifunktioita samalla tavalla kuin objektien metodeja. Tämän seurauksena niillä ei voi olla omia metodeja, mikä olisi JavaScript-objektien olennainen ominaisuus. Lisäksi emme voi käyttää ES6:n syntaksia objektilitteraalien ja takaisinkutsufunktioiden julistamiseen, jotka sisältävät metodeja, jotka käyttävät this-avainsanaa, koska nuolifunktiot käsittelevät tätä eri tavalla.

Johtopäätös

Nuolifunktiot tarjoavat kehittäjille käyttökelpoisen lyhennelmän funktiolausekkeiden kirjoittamiseen JavaScriptissä. Fat Arrow -syntaksilla on monia käyttötapauksia, joten siitä on nopeasti tullut JavaScript-yhteisön suosima ES6-ominaisuus. Johdonmukaisesti käytettynä uusi tiivis merkintätapa voi säästää paljon aikaa ja kaistanleveyttä sekä parantaa koodin luettavuutta.

Kiitos lukemisesta.