Hvorfor du bør være forsiktig med å bruke pilfunksjoner i JavaScript

Pilfunksjonens syntaks kom med utgivelsen av ECMAScript 2015, også kjent som ES6. I dag har pilfunksjoner blitt favorittfunksjonen til mange JavaScript-programmerere. Denne kjærligheten til pilfunksjoner skyldes den konsise syntaksen og den enkle oppførselen til "dette" nøkkelordet.

Men pilfunksjoner har noen ulemper. Lær om de viktigste forskjellene mellom pilfunksjoner og vanlige funksjoner, og finn ut hvorfor du i de fleste tilfeller er bedre å holde deg til vanlige funksjoner.

1. Du må definere en pilfunksjon før du bruker den

Du kan ikke heise en pilfunksjon. JavaScripts standard heiseregler lar deg kalle en funksjon før du definerer den, men det er ikke tilfellet med pilfunksjoner. Hvis du har en JavaScript-fil med funksjoner, vil dette bety at all viktig kode vil være nede i bunnen av filen.

Tenk for eksempel på følgende JavaScript-kode:

konst doubleNumbers = (numbers) { 
 tall.kart(n => n * 2)
}
konst halveNumbers = (tall) { 
 tall.kart(n => n / 2)
}
konst sumNumbers = (tall) { 
 tall.redusere((sum, n) => { 
komme tilbake sum + n; 
 }, 0)
}
konst tall = [1, 20, 300, 700, 1500]
konst doblet = dobletall (tall)
konsoll.log (halveNumbers (doblet))
konsoll.log (sumNumbers (numbers))

I kodeblokken ovenfor er den viktige koden nederst. Hjelpefunksjonene er alle definert før utførelsespunktet. Å måtte lage dine JavaScript-funksjoner øverst i filen kan være upraktisk fordi du må rulle ned for å se den faktiske koden som gjør jobben.

Hvis du flyttet hjelpefunksjonene til bunnen og den faktiske koden til toppen, får du en referansefeil. Kjøretiden behandler funksjonen som en variabel. Derfor må du først definere den før du får tilgang til eller påkaller den. Men hvis du konverterte alle pilfunksjoner til vanlige funksjoner (med funksjon nøkkelord), så vil koden din fungere fint. Samtidig forblir den viktige koden øverst der du kan finne den.

Dette er et av de største problemene med bruk av pilfunksjoner. De viser ingen hostingadferd. Med andre ord, du må definere dem før det faktiske stedet du vil bruke dem. På den annen side kan du heise vanlige funksjoner.

2. Pilfunksjoner kan være forvirrende for noen mennesker

En annen grunn til å bruke vanlige funksjoner i stedet for pilfunksjoner er lesbarhet. Vanlige funksjoner er lettere å lese fordi de eksplisitt bruker funksjon nøkkelord. Dette nøkkelordet identifiserer at den aktuelle koden er en funksjon.

På den annen side tildeler du pilfunksjoner til variabler. Som nybegynner kan dette forvirre deg til å tro at koden er en variabel, snarere enn en funksjon.

Sammenlign de to funksjonene nedenfor:

konst halveTall = (tall) => {
komme tilbake tall.kart(n => n / 2)
}
funksjonhalvtall(tall) { 
komme tilbake tall.kart(n => n / 2)
}

Ved første øyekast kan du enkelt se at den andre kodebiten er en funksjon. Syntaksen gjør det klart at koden er en funksjon. Den første er imidlertid tvetydig - du kan ikke lett finne ut om det er en variabel eller en funksjon.

3. Du kan ikke bruke pilfunksjoner som metoder

Når du bruker en pilfunksjon, vil dette nøkkelord tilsvarer det som er utenfor tingen vi er inni. I de fleste tilfeller er det vindusobjektet.

Tenk på følgende objekt:

konst person = {
 fornavn: "Kyle",
 etternavn: "Kokk",
 printName: () => {
konsoll.Logg(`${dette.fornavn}``${dette.etternavn}` )
 }
}
person.printName()

Hvis du kjører koden, vil du legge merke til at nettleseren skriver ut udefinert for både fornavn og etternavn. Siden vi bruker en pilfunksjon, dette nøkkelordet tilsvarer vindusobjektet. Dessuten er det nei fornavn eller etternavn egenskap definert der.

For å løse dette problemet må du bruke en vanlig funksjon i stedet:

konst person = {
 fornavn: "Kyle",
 etternavn: "Kokk",
 printName: funksjon() {
konsoll.Logg(`${dette.fornavn}``${dette.etternavn}` )
 }
}
person.printName()

Dette kommer til å gå bra pga dette refererer til person gjenstand. Hvis du kommer til å drive mye med denne typen objektorientert programmering, må du sørge for at du bruker vanlige funksjoner. Pilfunksjonene vil ikke fungere.

Når du skal bruke pilfunksjoner

Bruk pilfunksjoner hovedsakelig på steder der du trenger en anonym funksjon. Et eksempel på et slikt scenario er å håndtere en tilbakeringingsfunksjon. Det er bedre å bruke en pilfunksjon når du skriver en tilbakeringing fordi syntaksen er så mye enklere enn å skrive en full funksjon.

Sammenlign disse to og avgjør hva som er mer enkelt:

funksjonhalvtall(tall) {
komme tilbake tall.kart(n => n / 2)
}
funksjonhalvtall(tall) {
komme tilbake tall.kart(funksjon(n) {
komme tilbake n / 2
 })
}

Begge tilfeller sender en tilbakeringingsfunksjon til map()-metoden. Men den første tilbakeringingen er en pilfunksjon mens den andre er en full funksjon. Du kan se hvordan den første funksjonen tar opp færre kodelinjer enn den andre funksjonen: tre vs. fem.

Den andre gangen å bruke pilfunksjoner er når du ønsker å håndtere en bestemt "denne" syntaks. "dette"-objektet vil endre seg avhengig av om du bruker vanlige funksjoner eller pilfunksjoner for bestemte ting.

Følgende kodeblokk registrerer to "klikk"-hendelseslyttere på dokumentobjektet. Den første instansen bruker en vanlig funksjon som tilbakeringing, mens den andre bruker en pilfunksjon. Inne i begge tilbakeringingene logger koden utførelsesobjektet (dette) og hendelsesmålet:

dokument.addEventListener("klikk", funksjon(e) {
konsoll.Logg("FUNKSJON", dette, e.target)
})
dokument.addEventListener("klikk", (e) => {
konsoll.Logg("PIL", dette, e.target)
})

Hvis du skulle kjøre dette skriptet, vil du legge merke til at "denne" referansen er forskjellig for begge. For den vanlige funksjonen refererer denne egenskapen til dokumentet, som er det samme som e.target eiendom. Men for pilfunksjonen refererer dette til vindusobjektet.

Når du bruker en vanlig funksjon som tilbakeringing, vil dette referere til elementet der vi utløser hendelsen. Men når du bruker en pilfunksjon, blir dette nøkkelordet standard til vindusobjektet.

Lær mer om pilfunksjoner vs vanlige funksjoner

Det er flere andre subtile forskjeller mellom vanlige funksjoner og pilfunksjoner. Å mestre begge typer funksjoner er grunnleggende for å mestre JavaScript. Lær når du skal bruke den ene og når du skal bruke den andre; du vil da forstå implikasjonene av å bruke enten en vanlig funksjon eller en pilfunksjon i JavaScript.