Wanneer (en waarom) u ES6-pijlfuncties zou moeten gebruiken – en wanneer niet

Pijlfuncties (ook wel “fat arrow-functies” genoemd) zijn ongetwijfeld een van de meer populaire functies van ES6. Ze introduceerden een nieuwe manier om beknopte functies te schrijven.

Hier is een functie geschreven in ES5-syntaxis:

Nu, hier is dezelfde functie uitgedrukt als een pijlfunctie:

Het is veel korter! We kunnen de accolades en de return-instructie weglaten vanwege impliciete retouren (maar alleen als er geen blok is – meer hierover hieronder).

Het is belangrijk om te begrijpen hoe de pijlfunctie zich anders gedraagt ​​in vergelijking met de reguliere ES5-functies.

Variaties

Een ding dat snel opvalt, is de verscheidenheid aan syntaxis die beschikbaar zijn in pijlfuncties. Laten we eens kijken naar enkele van de meest voorkomende:

1. Geen parameters

Als er geen parameters zijn, kunt u lege haakjes plaatsen voor = & gt; .

In feite heb je zelfs de haakjes niet nodig!

2. Enkele parameter

Bij deze functies zijn haakjes optioneel:

3. Meerdere parameters

Haakjes zijn vereist voor deze functies:

4. Uitspraken (in tegenstelling tot uitdrukkingen)

In zijn eenvoudigste vorm produceert een functie-expressie een waarde, terwijl een functie-instructie een actie uitvoert.

Met de pijlfunctie is het belangrijk om te onthouden dat uitspraken accolades moeten hebben. Zodra de accolades aanwezig zijn, moet u ook altijd return schrijven.

Hier is een voorbeeld van de pijlfunctie die wordt gebruikt met een if-statement:

5. “Block body”

Als uw functie zich in een blok bevindt, moet u ook de expliciete return -instructie gebruiken:

6. Letterlijke objecten

Als u een object letterlijk retourneert, moet het tussen haakjes worden geplaatst. Dit dwingt de interpreter om te evalueren wat er tussen de haakjes staat, en het letterlijke object wordt geretourneerd.

Syntactisch anoniem

Het is belangrijk op te merken dat pijlfuncties anoniem zijn, wat betekent dat ze geen namen hebben.

Deze anonimiteit zorgt voor enkele problemen:

Als u een foutmelding krijgt, kunt u de naam van de functie of het exacte regelnummer waar deze is opgetreden niet achterhalen.

2. Geen zelfverwijzingen

Als uw functie op enig moment een zelfreferentie nodig heeft (bijv. recursie, gebeurtenishandler die moet worden opgeheven), zal deze niet werken.

Belangrijkste voordeel: ‘dit’ niet bindend

In klassieke functie-expressies is het this sleutelwoord gebonden aan verschillende waarden op basis van de context waarin het wordt aangeroepen. Bij pijlfuncties is deze echter lexicaal gebonden . Het betekent dat het this gebruikt uit de code die de pijlfunctie bevat.

Kijk bijvoorbeeld naar de setTimeout -functie hieronder:

In het ES5-voorbeeld is .bind (this) vereist om de this -context door te geven aan de functie. Anders zou deze standaard niet gedefinieerd zijn.

ES6-pijlfuncties kunnen niet worden gebonden aan een this -woord, dus het zal lexicaal een bereik omhoog gaan en de waarde van this gebruiken in het bereik waarin het was gedefinieerd.

Wanneer u geen pijlfuncties moet gebruiken

Na wat meer te hebben geleerd over pijlfuncties, hoop ik dat je begrijpt dat ze de reguliere functies niet vervangen.

Hier zijn enkele gevallen waarin u ze waarschijnlijk niet zou willen gebruiken:

Als je cat.jumps aanroept, neemt het aantal levens niet af. Het is omdat this nergens aan gebonden is, en de waarde van this zal erven van zijn bovenliggende scope.

2. Callback-functies met dynamische context

Als u een dynamische context nodig heeft, zijn pijlfuncties niet de juiste keuze. Bekijk deze event handler hieronder:

Als we op de knop klikken, krijgen we een TypeError. Het is omdat this niet aan de knop is gebonden, maar in plaats daarvan aan zijn bovenliggende scope.

3. Als het uw code minder leesbaar maakt

Het is de moeite waard rekening te houden met de verscheidenheid aan syntaxis die we eerder hebben behandeld. Met reguliere functies weten mensen wat ze kunnen verwachten. Met pijlfuncties kan het moeilijk zijn om meteen te ontcijferen waar u naar kijkt.

Wanneer je ze zou moeten gebruiken

Pijlfuncties komen het beste tot hun recht met alles waarvoor this nodig is om aan de context te zijn gebonden, en niet de functie zelf.

Ondanks dat ze anoniem zijn, gebruik ik ze ook graag met methoden zoals map en verkleinen , omdat ik denk dat het mijn code leesbaarder maakt. Voor mij wegen de voordelen zwaarder dan de nadelen.

Bedankt voor het lezen van mijn artikel, en klap als je het leuk vond! Bekijk mijn andere artikelen, zoals Hoe ik mijn Pomodoro Clock-app heb gebouwd, en de lessen die ik gaandeweg heb geleerd, en Laten we het ‘nieuwe’ zoekwoord van JavaScript demystificeren.