PorównaniePorównania

() => {} vs function

Funkcja zwykła ma własne this i arguments, jest wynoszona (hoisting) i można ją wywołać przez new. Funkcja strzałkowa jest krótsza i bierze this z otoczenia.

Na tej stronie

Porównanie w tabeli
Przykład
Definicja i zastosowanie
Składnia
Więcej przykładów
Dobre praktyki
Powiązane hasła

Porównanie w tabeli

Własne this
() => {}
Nie, bierze this z otoczenia
function
Tak, zależne od sposobu wywołania
Własne arguments
() => {}
Nie, użyj parametru resztowego ...args
function
Tak
Wywołanie przez new
() => {}
Rzuca TypeError
function
Działa, tworzy nowy obiekt
Wywołanie przed deklaracją
() => {}
Nie działa, zachowuje się jak const
function
Działa dla deklaracji function
Niejawny return
() => {}
Tak, dla ciała z jednym wyrażeniem
function
Nie, zawsze trzeba napisać return
Może być funkcją generatora
() => {}
Nie
function
Tak, function*
Typowe użycie
() => {}
Krótkie callbacki zachowujące this z otoczenia
function
Metody, konstruktory, kod z hoistingiem

Cecha	() => {}	function
Własne this	Nie, bierze this z otoczenia	Tak, zależne od sposobu wywołania
Własne arguments	Nie, użyj parametru resztowego `...args`	Tak
Wywołanie przez new	Rzuca `TypeError`	Działa, tworzy nowy obiekt
Wywołanie przed deklaracją	Nie działa, zachowuje się jak `const`	Działa dla deklaracji `function`
Niejawny return	Tak, dla ciała z jednym wyrażeniem	Nie, zawsze trzeba napisać `return`
Może być funkcją generatora	Nie	Tak, `function*`
Typowe użycie	Krótkie callbacki zachowujące this z otoczenia	Metody, konstruktory, kod z hoistingiem

Przykład

JavaScript

console.log(double(5))

function double(n) {
  return n * 2
}

const triple = (n) => n * 3
console.log(triple(5))

Konsola

Definicja i zastosowanie

Obie formy definiują funkcję: przyjmują parametry, wykonują instrukcje i mogą zwrócić wynik przez return. Deklaracja function i wyrażenie function () {} mają własne this i arguments, zależne od sposobu wywołania, a funkcja strzałkowa () => {} nie ma żadnego z nich: bierze this z kodu, w którym została zapisana.

Deklaracje function są wynoszone (hoisting) w całości, więc można je wywołać wyżej w pliku, niż je zapisano. Strzałka, zwykle przypisana do const, działa dopiero od linii przypisania. Funkcję zwykłą można też wywołać przez new jako konstruktor, a strzałkę nie: taka próba rzuca TypeError. Strzałka za to pozwala pominąć klamry i return dla ciała z jednym wyrażeniem.

W metodach obiektów i klas, które odwołują się do this, oraz w konstruktorach używaj function. W krótkich callbackach, zwłaszcza takich, które mają korzystać z this metody, w której są zagnieżdżone (np. w map() czy addEventListener()), sięgaj po strzałkę.

Składnia

function name(param1, param2) {
  return value
}

const name = (param1, param2) => value

Więcej przykładów

this z otoczenia kontra własne this

JavaScript

const game = {
  title: 'Kosmiczna wyprawa',
  players: ['Ania', 'Kuba'],
  announceWithArrow: function () {
    return this.players.map((player) => `${this.title}: ${player}`)
  },
  announceWithFunction: function () {
    return this.players.map(function (player) {
      return `${this.title}: ${player}`
    })
  }
}

console.log(game.announceWithArrow())

try {
  console.log(game.announceWithFunction())
} catch (error) {
  console.log(error.name)
}

Konsola

['Kosmiczna wyprawa: Ania', 'Kosmiczna wyprawa: Kuba']

TypeError

Strzałka w map() bierze this z metody announceWithArrow(). Zwykła funkcja przekazana do map() dostaje własne this, które bez odbiornika jest undefined, więc this.title rzuca błąd.

Tylko function można wywołać przez new

JavaScript

function Player(name) {
  this.name = name
}

const ArrowPlayer = (name) => {
  this.name = name
}

const player = new Player('Ania')
console.log(player.name)

try {
  new ArrowPlayer('Kuba')
} catch (error) {
  console.log(error.name)
}

Konsola

Ania

TypeError

Dobre praktyki

Metody obiektów i klas, które muszą znać swój this, pisz przez function albo skrót method() {}, nie przez strzałkę.
W callbacku, który ma korzystać z this otaczającej metody (np. wewnątrz map() w metodzie klasy), użyj strzałki. Zwykła funkcja dostałaby własne, inne this.
Potrzebujesz wywołać funkcję, zanim zostanie zapisana w pliku? Zadeklaruj ją przez function, nie przypisuj jej do const jako strzałki.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs