Pijlfuncties zijn schoner en eenvoudiger dan hun langdradige reguliere alternatief, maar je moet ze niet haasten om te gebruiken zonder te weten hoe ze werken.

De syntaxis van de pijlfunctie kwam met de release van ECMAScript 2015, ook wel bekend als ES6. Tegenwoordig zijn pijlfuncties de favoriete functie geworden van veel JavaScript-programmeurs. Deze liefde voor pijlfuncties is te danken aan de beknopte syntaxis en het duidelijke gedrag van het sleutelwoord "dit".

Maar pijlfuncties hebben enkele nadelen. Lees meer over de belangrijkste verschillen tussen pijlfuncties en reguliere functies en ontdek waarom u in de meeste gevallen beter af bent bij reguliere functies.

1. U moet een pijlfunctie definiëren voordat u deze gebruikt

Een pijlfunctie kun je niet hijsen. De standaard hijsregels van JavaScript kunt u een functie aanroepen voordat u deze definieert, maar dat is niet het geval met pijlfuncties. Als u een JavaScript-bestand met functies heeft, betekent dit dat alle belangrijke code onderaan het bestand staat.

instagram viewer

Beschouw bijvoorbeeld de volgende JavaScript-code:

const doubleNumbers = (cijfers) { 
 getallen.kaart(N => N * 2)
}
const halveNummers = (cijfers) { 
 getallen.kaart(N => N / 2)
}


const somNummers = (cijfers) { 
 nummers.verminderen((som, n) => { 
opbrengst som + n; 
 }, 0)
}
const nummers = [1, 20, 300, 700, 1500]
const verdubbeld = doubleNumbers (getallen)
troosten.log (halveNumbers (verdubbeld))
troosten.log (somNummers (getallen))

In het bovenstaande codeblok staat de belangrijke code onderaan. De helperfuncties worden allemaal gedefinieerd vóór het uitvoeringspunt. Moeten maak uw JavaScript-functies bovenaan het bestand kan onhandig zijn omdat je naar beneden moet scrollen om de daadwerkelijke code te zien die het werk doet.

Als je de helperfuncties naar beneden hebt verplaatst en de eigenlijke code naar boven, krijg je een referentiefout. De runtime behandelt de functie als een variabele. U moet het dus eerst definiëren voordat u het opent of oproept. Maar als je alle pijlfuncties hebt geconverteerd naar reguliere functies (met de functie keyword), dan zou je code prima werken. Tegelijkertijd blijft de belangrijke code bovenaan staan, waar u deze kunt vinden.

Dit is een van de grootste problemen bij het gebruik van pijlfuncties. Ze vertonen geen hostinggedrag. Met andere woorden, u moet ze definiëren vóór de daadwerkelijke plaats waar u ze zou gebruiken. Daarentegen kun je reguliere functies hijsen.

2. Pijlfuncties kunnen voor sommige mensen verwarrend zijn

Een andere reden om reguliere functies te gebruiken in plaats van pijlfuncties is leesbaarheid. Reguliere functies zijn gemakkelijker te lezen omdat ze expliciet de functie trefwoord. Dit sleutelwoord identificeert dat de code in kwestie een functie is.

Aan de andere kant wijst u pijlfuncties toe aan variabelen. Als nieuweling kan dit u in de war brengen door te denken dat de code een variabele is in plaats van een functie.

Vergelijk de twee onderstaande functies:

const halveNummers = (nummers) => {
opbrengst getallen.kaart(N => N / 2)
}
functiehalveNummers(nummers) { 
opbrengst getallen.kaart(N => N / 2)
}

Op het eerste gezicht kun je gemakkelijk zien dat het tweede stuk code een functie is. De syntaxis maakt duidelijk dat de code een functie is. De eerste is echter dubbelzinnig: u kunt niet gemakkelijk zien of het een variabele of een functie is.

3. U kunt geen pijlfuncties als methoden gebruiken

Wanneer u een pijlfunctie gebruikt, wordt de dit trefwoord komt overeen met wat zich buiten het ding bevindt waarin we ons bevinden. In de meeste gevallen is dit het vensterobject.

Beschouw het volgende voorwerp:

const persoon = {
 Voornaam: "Kyle",
 achternaam: "Kok",
 print naam: () => {
troosten.log(`${dit.Voornaam}``${dit.achternaam}` )
 }
}
persoon.printName()

Als u de code uitvoert, zult u merken dat de browser afdrukt ongedefinieerd voor zowel voornaam als achternaam. Omdat we een pijlfunctie gebruiken, dit trefwoord komt overeen met het vensterobject. Er is ook geen Voornaam of achternaam daar gedefinieerde eigenschap.

Om dit probleem op te lossen, moet u in plaats daarvan een gewone functie gebruiken:

const persoon = {
 Voornaam: "Kyle",
 achternaam: "Kok",
 print naam: functie() {
troosten.log(`${dit.Voornaam}``${dit.achternaam}` )
 }
}
persoon.printName()

Dit gaat goed werken want dit verwijst naar de persoon voorwerp. Als je dit soort objectgeoriënteerd programmeren veel gaat doen, moet je ervoor zorgen dat je reguliere functies gebruikt. Pijlfuncties werken niet.

Wanneer pijlfuncties gebruiken

Gebruik pijlfuncties vooral op plaatsen waar je een anonieme functie nodig hebt. Een voorbeeld van zo'n scenario is het omgaan met een callback-functie. Het is beter om een ​​pijlfunctie te gebruiken bij het schrijven van een callback, omdat de syntaxis zoveel eenvoudiger is dan het schrijven van een volledige functie.

Vergelijk deze twee en beslis welke eenvoudiger is:

functiehalveNummers(nummers) {
opbrengst getallen.kaart(N => N / 2)
}
functiehalveNummers(nummers) {
opbrengst getallen.kaart(functie(N) {
opbrengst N / 2
 })
}

In beide gevallen wordt een callback-functie doorgegeven aan de methode map(). Maar de eerste callback is een pijlfunctie, terwijl de tweede een volledige functie is. U kunt zien hoe de eerste functie minder regels code in beslag neemt dan de tweede functie: drie vs. vijf.

De andere keer dat u pijlfuncties gebruikt, is wanneer u met een bepaalde 'dit'-syntaxis wilt werken. Het object "dit" zal veranderen, afhankelijk van of u gewone functies of pijlfuncties voor bepaalde dingen gebruikt.

Het volgende codeblok registreert twee "klik"-gebeurtenislisteners op het documentobject. De eerste instantie gebruikt een reguliere functie als callback, terwijl de tweede een pijlfunctie gebruikt. Binnen beide callbacks registreert de code het uitvoeringsobject (dit) en het gebeurtenisdoel:

document.addEventListener("Klik", functie(e) {
troosten.log("FUNCTIE", dit, e.target)
})
document.addEventListener("Klik", (e) => {
troosten.log("PIJL", dit, e.target)
})

Als u dit script zou uitvoeren, zult u merken dat "deze" verwijzing voor beide verschillend is. Voor de reguliere functie verwijst deze eigenschap naar het document, dat hetzelfde is als het e.doel eigendom. Maar voor de pijlfunctie verwijst dit naar het vensterobject.

Wanneer u een reguliere functie als callback gebruikt, verwijst dit naar het element waar we de gebeurtenis activeren. Maar wanneer u een pijlfunctie gebruikt, is dit sleutelwoord standaard het vensterobject.

Meer informatie over pijlfuncties versus gewone functies

Er zijn verschillende andere subtiele verschillen tussen gewone functies en pijlfuncties. Het beheersen van beide soorten functies is essentieel om JavaScript onder de knie te krijgen. Leer wanneer je de ene moet gebruiken en wanneer je de andere moet gebruiken; u zult dan de implicaties begrijpen van het gebruik van een gewone functie of een pijlfunctie in uw JavaScript.