Pilfunktioner i Javascript

Pilfunktioner – även kallade ”feta pilfunktioner” – är ett relativt nytt sätt att skriva kortfattade funktioner i JavaScript. De har införts genom ECMAScript 6-specifikationerna och har sedan dess blivit den mest populära ES6-funktionen. Arrow-funktioner gör det möjligt att använda operatören fat arrow => för att snabbt definiera JavaScript-funktioner, med eller utan parametrar. Vi kan utelämna de hängande parenteserna och nyckelorden function och return när vi skapar en ny JavaScript-funktion för att skriva kortare funktionssyntax. De är inte bara tidsbesparande utan ger också rena och mer lättlästa funktioner.

I den här artikeln tar vi en titt på några verkliga scenarier för att skapa pilfunktioner – med hjälp av ES6- respektive äldre ECMAScript 5-notation, så att vi kan se hur de två syntaxerna förhåller sig till varandra.

Den enklaste pilfunktionssyntaxen är när funktionen inte har några parametrar. I exemplet nedan deklarerar ECMAScript 5-syntaxen ett funktionsuttryck och tilldelar det till variabeln födelsedag. Det ger ut en enkel textsträng till konsolen med texten ”Grattis på födelsedagen!”:

I pilfunktions-syntaxen försvinner de krullformade parenteserna och nyckelorden function och return. Nu tar hela funktionen bara en enda rad. De tomma parenteserna visar att funktionen inte har några parametrar och den feta pilen binder funktionskroppen till de (för närvarande obefintliga) parametrarna:

En parameter

Låtsas vi utöka det föregående exemplet med en parameter, närmare bestämt namn. Den gamla ES5-syntaxen tar in en parameter och lägger till dess värde till strängen som ska returneras:

Pilfunktionssyntaxen gör i huvudsak samma sak. Vi måste innesluta namnparametern inom parentes före den feta pilen och utelämna returnyckelordet i funktionsblocket:

Två parametrar

Vi kan använda pilfunktioner med så många parametrar som vi vill. Här är till exempel samma exempel med två parametrar, ålder och namn. Nu kräver funktionen birthday() två ingångar för att returnera strängen. Låt oss först använda ECMAScript 5:

Och här är samma kod med den nya ES6-notationen:

Objektslitteratur

Vi kan också använda syntaxen för pilfunktion för att deklarera setter-funktioner som låter användarna ställa in värdet på objektslitteratur. Med funktionen setBirthday() nedan kan användaren ange namn och ålder för den person som fyller år:

Då vi använder oss av pilfunktionsnotationen krävs det bara en rad för att definiera samma sättarfunktion:

Array Manipulation

Vi kan använda pilfunktioner för att manipulera JavaScript-arrayer också. Låt oss till exempel ta en titt på matrisen persons som innehåller tre objektlitteraler, var och en med egenskaperna name och age:

JavaScripts inbyggda map()-metod gör det möjligt att anropa samma funktion på varje element i arrayen. Med den traditionella ES5-notationen kan vi returnera namnegenskapen för varje person på följande sätt:

Med pilfunktionsnotationen kan vi utföra samma uppgift på en rad:

När man inte ska använda pilfunktioner

Och även om pilfunktionerna har många användningsområden, så har de också vissa begränsningar. Det finns några scenarier när vi inte kan eller bör använda pilfunktionssyntaxen.

Det viktigaste är att vi inte kan skapa konstruktörer med pilfunktioner. Om vi använder nyckelordet new tillsammans med den feta pilsyntaxen kommer konsolen att ge ett fel. Detta händer eftersom JavaScript behandlar pilfunktioner på samma sätt som objektmetoder. Därför kan de inte ha egna metoder, vilket skulle vara en viktig egenskap hos JavaScript-objekt. Dessutom kan vi inte använda ES6-syntaxen för att deklarera objektlitteratur och callback-funktioner som innehåller metoder som använder nyckelordet this, eftersom pilfunktioner behandlar detta på ett annat sätt.

Slutsats

Pilfunktioner ger utvecklare en användbar förkortning för att skriva funktionsuttryck i JavaScript. Den feta pilsyntaxen har många användningsområden, så den har snabbt blivit den favorit ES6-funktionen i JavaScript-communityn. Om den nya kompakta notationen används konsekvent kan den spara mycket tid och bandbredd och förbättra kodens läsbarhet.

Tack för att du läste.