() => {}
Funkcja strzałkowa (arrow function): krótszy zapis funkcji, bez własnego this, z niejawnym return dla jednego wyrażenia.
Przykład
#const add = (a, b) => a + b
const greet = (name) => `Cześć, ${name}!`
const getDefaults = () => ({ level: 1, points: 0 })
console.log(add(2, 3))
console.log(greet('Ola'))
console.log(getDefaults())Definicja i zastosowanie
#Funkcja strzałkowa to zwięzły zapis wyrażenia funkcyjnego. Zamiast słowa function piszesz parametry, strzałkę => i ciało funkcji. Świetnie sprawdza się jako krótki callback w map(), filter() czy addEventListener().
Jeśli ciało to jedno wyrażenie, możesz pominąć nawiasy klamrowe i return: wynik wyrażenia zostanie zwrócony automatycznie. Przy jednym parametrze nawiasy wokół niego są opcjonalne. Zwracając obiekt w skróconym zapisie, otocz go nawiasami: () => ({ ok: true }).
Strzałki nie mają własnego this ani arguments, tylko biorą je z otaczającego kodu. To ułatwia pisanie callbacków wewnątrz metod, ale z tego samego powodu strzałki nie nadają się na metody obiektów korzystające z this. Nie można ich też wywołać przez new.
Składnia
#() => expression
param => expression
(param1, param2) => expression
(param1, param2) => {
// instrukcje
return value
}
() => ({ key: value })Więcej przykładów
#const students = [
{ name: 'Ania', points: 120 },
{ name: 'Kuba', points: 80 },
{ name: 'Ola', points: 150 }
]
const passed = students
.filter((student) => student.points >= 100)
.map((student) => student.name)
console.log(passed)const course = {
title: 'JavaScript',
lessons: ['Zmienne', 'Funkcje'],
list() {
return this.lessons.map((lesson) => `${this.title}: ${lesson}`)
}
}
console.log(course.list())Strzałka wewnątrz map() korzysta z this metody list(). Zwykła funkcja function (lesson) {} miałaby własne this równe undefined.
const player = {
name: 'Kuba',
arrowHello: () => `Cześć, ${this?.name}`,
methodHello() {
return `Cześć, ${this.name}`
}
}
console.log(player.arrowHello())
console.log(player.methodHello())Strzałka nie dostaje obiektu jako this, tylko bierze this z otoczenia, a na najwyższym poziomie modułu jest ono undefined. Bez ?. taki odczyt rzuciłby TypeError. Metody obiektów zapisuj skrótem methodHello() {}.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Zwracając obiekt w skróconym zapisie, pamiętaj o nawiasach:
() => ({ id: 1 }). Bez nich klamry zostaną uznane za ciało funkcji i dostanieszundefined. - Na metody obiektów i klas używaj zwykłej składni metod. Strzałki zostaw na callbacki i krótkie funkcje pomocnicze.
- Gdy ciało ma kilka linii, dodaj klamry i jawny
return. Bez niego funkcja zwróciundefined.
Powiązane hasła
#- functionDeklaruje nazwaną funkcję: blok kodu z parametrami, który można wywoływać wiele razy i który może zwrócić wynik.
- returnKończy działanie funkcji i przekazuje wartość do miejsca, w którym funkcję wywołano.
- thisSłowo kluczowe wskazujące obiekt, w kontekście którego wywołano funkcję.
- Array.prototype.map()Tworzy nową tablicę z wynikami wywołania funkcji dla każdego elementu.
- classDefiniuje klasę, czyli szablon do tworzenia obiektów z tymi samymi polami i metodami.
Widzisz błąd albo brakuje przykładu? Napisz do nas.