Pilfunktioner i Javascript

Pilfunktioner – også kaldet “fede pile”-funktioner – er en forholdsvis ny måde at skrive præcise funktioner i JavaScript på. De er blevet indført med ECMAScript 6-specifikationerne og er siden da blevet den mest populære ES6-funktion. Arrow-funktioner giver os mulighed for at bruge den fede pil =>-operatoren til hurtigt at definere JavaScript-funktioner, med eller uden parametre. Vi kan udelade de svungne parenteser og nøgleordene function og return, når vi opretter en ny JavaScript-funktion, så vi kan skrive kortere funktionssyntaks. De er ikke kun tidsbesparende, men giver også rene og mere læsbare funktioner.

I denne artikel tager vi et kig på nogle virkelige scenarier for at oprette pilefunktioner – ved hjælp af ES6 versus den ældre ECMAScript 5-notation, så vi kan se, hvordan de to syntakser står i forhold til hinanden.

Den enkleste pilefunktionssyntaks er, når funktionen ikke har nogen parametre. I eksemplet nedenfor erklærer ECMAScript 5-syntaksen et funktionsudtryk og tildeler det til fødselsdagsvariablen. Den udsender en simpel tekststreng til konsollen med teksten “Tillykke med fødselsdagen!”:

I pilfunktions-syntaksen forsvinder de krøllede parenteser og nøgleordene function og return. Nu fylder hele funktionen kun én enkelt linje. De tomme parenteser angiver, at funktionen ikke har nogen parametre, og den fede pil binder funktionens krop til de (i øjeblikket ikke-eksisterende) parametre:

En parameter

Lad os udvide det foregående eksempel med en parameter, nærmere bestemt navn. Den gamle ES5-syntaks tager én parameter ind og føjer dens værdi til den streng, der skal returneres:

Pilfunktionssyntaksen gør i bund og grund det samme. Vi skal omslutte navneparameteren inden for parentesen før den fede pil og udelade nøgleordet return i funktionsblokken:

To parametre

Vi kan bruge pilefunktioner med lige så mange parametre, som vi vil. Her er f.eks. det samme eksempel med to parametre, alder og navn. Nu kræver funktionen fødselsdag() to input for at returnere strengen. Lad os først bruge ECMAScript 5:

Og her er den samme kode med den nye ES6- notation:

Objektliteraler

Vi kan også bruge pilfunktions-syntaksen til at deklarere setter-funktioner, der lader brugerne indstille værdien af objektlitteraler. Funktionen setBirthday() nedenfor giver brugerne mulighed for at angive navnet og alderen på den person, der har fødselsdag:

Gennem brug af pilfunktionsnotationen kræver det kun én linje at definere den samme setterfunktion:

Arraymanipulation

Vi kan også bruge pilefunktioner til at manipulere JavaScript-arrays. Lad os f.eks. se på arrayet personer, der indeholder tre objektliteraler, som hver har et navn og en aldersegenskab:

JavaScript’s indbyggede map()-metode giver os mulighed for at kalde den samme funktion på hvert element i arrayet. Med den traditionelle ES5-notation kan vi returnere navneegenskaben for hver person på følgende måde:

Med pilfunktionsnotationen kan vi udføre den samme opgave i én linje:

Når man ikke skal bruge pilefunktioner

Og selv om pilefunktioner har mange anvendelsesmuligheder, er de også forbundet med nogle begrænsninger. Der er nogle scenarier, hvor vi ikke kan eller bør bruge pilfunktionssyntaksen.

Det vigtigste er, at vi ikke kan oprette konstruktører med pilfunktioner. Hvis vi bruger nøgleordet new sammen med den fede pilesyntaks, vil konsollen give en fejl. Det sker, fordi JavaScript behandler pilefunktioner på samme måde som objektmetoder. Som følge heraf kan de ikke have deres egne metoder, hvilket ville være en væsentlig egenskab ved JavaScript-objekter. Desuden kan vi ikke bruge ES6-syntaksen til at deklarere objektlitteraler og callback-funktioner, der indeholder metoder, som gør brug af nøgleordet this, da pilefunktioner behandler dette på en anden måde.

Slutning

Pilfunktioner giver udviklere en nyttig stenografi til at skrive funktionsudtryk i JavaScript. Den fede pilesyntaks har mange anvendelsesmuligheder, så den er hurtigt blevet den foretrukne ES6-funktion i JavaScript-fællesskabet. Hvis den nye kompakte notation bruges konsekvent, kan den spare en masse tid og båndbredde og forbedre læsbarheden af koden.

Tak for læsningen.