Arrow Functions In Javascript
On november 20, 2021 by admin
Arrow Functions – ook wel “fat arrow” functies genoemd, zijn relatief een nieuwe manier om beknopte functies in JavaScript te schrijven. Ze zijn geïntroduceerd door de ECMAScript 6-specificaties en zijn sindsdien de populairste ES6-functie geworden. Met pijlfuncties kunnen we de operator vette pijl => gebruiken om snel JavaScript-functies te definiëren, met of zonder parameters. We kunnen de accolades en de functie en return sleutelwoorden weglaten bij het maken van een nieuwe JavaScript functie om kortere functie syntax te schrijven. Ze besparen niet alleen tijd, maar leveren ook schone en beter leesbare functies op.
In dit artikel bekijken we een aantal praktijkscenario’s voor het maken van pijlfuncties – met behulp van ES6 versus de oudere ECMAScript 5-notatie, zodat we kunnen zien hoe de twee syntaxis zich tot elkaar verhouden.
De eenvoudigste pijlfunctiesyntaxis is wanneer de functie geen parameters heeft. In het onderstaande voorbeeld declareert de ECMAScript 5 syntaxis een functie expressie en wijst deze toe aan de birthday variabele. Het voert een eenvoudige tekst string uit naar de console met de tekst “Happy birthday!”:
In de pijl functie syntaxis verdwijnen de gekrulde haakjes en de functie en return sleutelwoorden. Nu neemt de hele functie slechts één regel in beslag. De lege haakjes geven aan dat de functie geen parameters heeft en de vette pijl bindt het functiegedeelte aan de (momenteel niet-bestaande) parameters:
Een parameter
Laten we het vorige voorbeeld uitbreiden met één parameter, met name naam. De oude ES5-syntaxis neemt één parameter op en voegt de waarde ervan toe aan de string die moet worden geretourneerd:
De pijlfunctie-syntaxis doet in wezen hetzelfde. We moeten de naam parameter tussen haakjes zetten voor de vette pijl en het return keyword weglaten in het functieblok:
Twee Parameters
We kunnen pijlfuncties gebruiken met zoveel parameters als we willen. Bijvoorbeeld, hier is hetzelfde voorbeeld met twee parameters, leeftijd en naam. Nu, de birthday() functie heeft twee inputs nodig om de string terug te geven. Laten we eerst ECMAScript 5 gebruiken:
En, hier is dezelfde code met de nieuwe ES6 notatie:
Objectliterals
We kunnen de pijlfunctie-syntaxis ook gebruiken om setter-functies aan te geven waarmee gebruikers de waarde van objectliterals kunnen instellen. Met de functie setBirthday() hieronder kunnen gebruikers de naam en leeftijd instellen van de persoon die jarig is:
Door gebruik te maken van de pijlfunctie-notatie, is er maar één regel nodig om dezelfde setterfunctie te definiëren:
Array Manipulation
We kunnen pijlfuncties ook gebruiken om JavaScript-arrays te manipuleren. Laten we bijvoorbeeld eens kijken naar de personen-array die drie object-literals bevat, elk met een naam en een leeftijdseigenschap:
JavaScript’s ingebouwde map() methode laat ons dezelfde functie aanroepen op elk element van de array. Als we de traditionele ES5-notatie gebruiken, kunnen we de eigenschap naam van elke persoon op de volgende manier teruggeven:
Met de pijlfunctie-notatie kunnen we dezelfde taak in één regel uitvoeren:
Wanneer pijlfuncties niet gebruiken
Hoewel pijlfuncties veel gebruiksmogelijkheden hebben, hebben ze ook enkele beperkingen. Er zijn enkele scenario’s waarin we de syntaxis van pijlfuncties niet kunnen of mogen gebruiken.
Het belangrijkste is dat we met pijlfuncties geen constructors kunnen maken. Als we het new keyword gebruiken samen met de fat arrow syntaxis, zal de console een foutmelding geven. Dit gebeurt omdat JavaScript pijl functies op dezelfde manier behandelt als object methoden. Als gevolg daarvan kunnen ze geen eigen methoden hebben, wat een essentieel kenmerk van JavaScript objecten zou zijn. Bovendien kunnen we de ES6 syntaxis niet gebruiken om object-literals en callback functies te declareren die methoden bevatten die gebruik maken van het this keyword, omdat arrow functies dit op een andere manier behandelen.
Conclusie
Arrow functies bieden ontwikkelaars een handige shorthand om functie-expressies in JavaScript te schrijven. De syntaxis van de vette pijl heeft veel gebruiksmogelijkheden, zodat het al snel de favoriete ES6-functie van de JavaScript-gemeenschap is geworden. Bij consequent gebruik kan de nieuwe compacte notatie veel tijd en bandbreedte besparen, en de leesbaarheid van de code verbeteren.
Dank u voor het lezen.
Geef een antwoord