Varför du bör vara försiktig med att använda pilfunktioner i JavaScript

Pilfunktionssyntaxen kom med lanseringen av ECMAScript 2015, även känd som ES6. Idag har pilfunktioner blivit favoritfunktionen hos många JavaScript-programmerare. Denna kärlek till pilfunktioner beror på den kortfattade syntaxen och det enkla beteendet hos nyckelordet "detta".

Men pilfunktioner har vissa nackdelar. Lär dig om de viktigaste skillnaderna mellan pilfunktioner och vanliga funktioner och ta reda på varför du i de flesta fall är bättre att hålla fast vid vanliga funktioner.

1. Du måste definiera en pilfunktion innan du använder den

Du kan inte lyfta en pilfunktion. JavaScripts standardregler för hissning låter dig anropa en funktion innan du definierar den, men det är inte fallet med pilfunktioner. Om du har en JavaScript-fil med funktioner skulle det innebära att all viktig kod kommer att finnas längst ner i filen.

Tänk på följande JavaScript-kod till exempel:

konst doubleNumbers = (siffror) { 
 numbers.map(n => n * 2)
}
konst halvaNumbers = (siffror) { 
 numbers.map(n => n / 2)
}
konst sumNumbers = (tal) { 
 numbers.reduce((summa, n) => { 
lämna tillbaka summa + n; 
 }, 0)
}
konst siffror = [1, 20, 300, 700, 1500]
konst dubblad = dubbelNumbers (siffror)
trösta.log (halvaNumbers (dubbla))
trösta.log (sumNumbers (nummer))

I kodblocket ovan finns den viktiga koden längst ner. Hjälpfunktionerna är alla definierade före exekveringspunkten. Måste skapa dina JavaScript-funktioner överst i filen kan vara obekvämt eftersom du måste scrolla ner för att se den faktiska koden som gör jobbet.

Om du flyttade hjälpfunktionerna till botten och den faktiska koden till toppen får du ett referensfel. Körtiden behandlar funktionen som en variabel. Därför måste du först definiera den innan du kommer åt eller anropar den. Men om du konverterade alla pilfunktioner till vanliga funktioner (med fungera nyckelord), så skulle din kod fungera bra. Samtidigt stannar den viktiga koden överst där du kan hitta den.

Detta är ett av de största problemen med att använda pilfunktioner. De uppvisar inget värdbeteende. Med andra ord måste du definiera dem innan den faktiska platsen du skulle använda dem. Å andra sidan kan du hissa vanliga funktioner.

2. Pilfunktioner kan vara förvirrande för vissa människor

En annan anledning att använda vanliga funktioner istället för pilfunktioner är läsbarhet. Vanliga funktioner är lättare att läsa eftersom de uttryckligen använder fungera nyckelord. Detta nyckelord identifierar att koden i fråga är en funktion.

Å andra sidan tilldelar du pilfunktioner till variabler. Som nybörjare kan detta förvirra dig till att tro att koden är en variabel snarare än en funktion.

Jämför de två funktionerna nedan:

konst halvaNumber = (tal) => {
lämna tillbaka numbers.map(n => n / 2)
}
fungerahalvaSiffror(tal) { 
lämna tillbaka numbers.map(n => n / 2)
}

Vid första anblicken kan du enkelt se att den andra kodbiten är en funktion. Syntaxen gör det tydligt att koden är en funktion. Den första är dock tvetydig – du kanske inte lätt kan se om det är en variabel eller en funktion.

3. Du kan inte använda pilfunktioner som metoder

När du använder en pilfunktion, visas detta nyckelordet motsvarar det som är utanför det vi är inuti. I de flesta fall är det fönsterobjektet.

Tänk på följande objekt:

konst person = {
 förnamn: "Kyle",
 efternamn: "Kock",
 Skriv namn: () => {
trösta.logga(`${detta.förnamn}``${detta.efternamn}` )
 }
}
person.printName()

Om du kör koden kommer du att märka att webbläsaren skriver ut odefinierad för både förnamn och efternamn. Eftersom vi använder en pilfunktion, detta nyckelordet motsvarar fönsterobjektet. Dessutom finns det ingen förnamn eller efternamn egendom definierad där.

För att lösa det här problemet måste du istället använda en vanlig funktion:

konst person = {
 förnamn: "Kyle",
 efternamn: "Kock",
 Skriv namn: fungera() {
trösta.logga(`${detta.förnamn}``${detta.efternamn}` )
 }
}
person.printName()

Det här kommer att fungera bra eftersom detta hänvisar till person objekt. Om du kommer att göra den här typen av objektorienterad programmering mycket, måste du se till att du använder vanliga funktioner. Pilfunktionerna fungerar inte.

När ska man använda pilfunktioner

Använd pilfunktioner främst på platser där du behöver en anonym funktion. Ett exempel på ett sådant scenario är att hantera en återuppringningsfunktion. Det är bättre att använda en pilfunktion när du skriver en återuppringning eftersom syntaxen är så mycket enklare än att skriva en fullständig funktion.

Jämför dessa två och bestäm vad som är enklare:

fungerahalvaSiffror(tal) {
lämna tillbaka numbers.map(n => n / 2)
}
fungerahalvaSiffror(tal) {
lämna tillbaka numbers.map(fungera(n) {
lämna tillbaka n / 2
 })
}

Båda fallen skickar en callback-funktion till map()-metoden. Men den första återuppringningen är en pilfunktion medan den andra är en full funktion. Du kan se hur den första funktionen tar upp färre rader kod än den andra funktionen: tre vs. fem.

Den andra tiden att använda pilfunktioner är när du vill hantera en viss "denna" syntax. Objektet "detta" kommer att ändras beroende på om du använder vanliga funktioner eller pilfunktioner för särskilda saker.

Följande kodblock registrerar två "klick"-händelseavlyssnare på dokumentobjektet. Den första instansen använder en vanlig funktion som återuppringning, medan den andra använder en pilfunktion. Inuti båda återuppringningarna loggar koden exekveringsobjektet (detta) och händelsemålet:

dokumentera.addEventListener("klick", fungera(e) {
trösta.logga("FUNGERA", detta, e.target)
})
dokumentera.addEventListener("klick", (e) => {
trösta.logga("PIL", detta, e.target)
})

Om du skulle köra det här skriptet kommer du att märka att "denna" referens är olika för båda. För den vanliga funktionen refererar den här egenskapen till dokumentet, vilket är detsamma som e.target fast egendom. Men för pilfunktionen refererar detta till fönsterobjektet.

När du använder en vanlig funktion som återuppringning kommer detta att hänvisa till elementet där vi utlöser händelsen. Men när du använder en pilfunktion, används detta nyckelord som standard till fönsterobjektet.

Lär dig mer om pilfunktioner kontra vanliga funktioner

Det finns flera andra subtila skillnader mellan vanliga funktioner och pilfunktioner. Att behärska båda typerna av funktioner är grundläggande för att behärska JavaScript. Lär dig när du ska använda den ena och när du ska använda den andra; du kommer då att förstå konsekvenserna av att använda antingen en vanlig funktion eller en pilfunktion i ditt JavaScript.