Pilfunksjoner

En pilfunksjon (arrow function) er en anonym funksjon, som skrives på en kortere måte enn en vanlig anonym funksjon. La oss fortsette eksemplet fra over, men bytte ut den anonyme funksjonen med en arrow funksjon:

document.addEventListener("click", () => {
  alert("Thank you for clicking")
})

Det finnes en enda kortere versjon av denne som ser slik ut:

document.addEventListener("click", () => alert("Thank you for clicking"))

Det fungerer kun når koden du kjører kun har én linje. Det vi gjør er da å fjerne krøllparantesene, som over.

Hvis du har kode i vinduet, fjern det, og skriv inn følgende:

let myNumbers = [10, 500, 2000]

La oss kjøre map-metoden på arrayet for å doble hver verdi:

let doubledNumbers = myNumbers.map(function(x) {
  return x * 2
})
console.log(doubledNumbers);

Som du ser har vi her brukt en anonym funksjon som argument til map-metoden.

La oss gjøre dette enda kortere ved å gjøre den anonyme funksjonen til en arrow funksjon:

let doubledNumbers = myNumbers.map(x => x * 2)
console.log(doubledNumbers);

Legg merke til at vi heller ikke trenger parantesene rundt argumentet, x, så lenge det bare er ett argument, noe som gjør setningen enda kortere. 

Den siste tingen som er annerledes med en arrow function er bruken av this forandrer seg. La oss se på John-objektet fra tidligere, og bytt ut den indre funksjonen med en arrow function:

let john = {
  firstName: 'John',
  lastName: 'Doe',
  driveCar() {
  let imAFunctionNotAMethod = () => console.log(this)
  imAFunctionNotAMethod()  console.log(this.firstName + " " + this.lastName + " is driving a car.")
  }
}

Hvis vi nå ser i konsollet, ser vi nederst “John Doe is driving a car.”, mens på linja over ser vi at this-ordet peker på John objektet, istedenfor det globale Window-objektet, slik det gjorde når vi brukte en vanlig funksjon. Dette kan være veldig nyttig.