Funkcja strzałkowa
Funkcja strzałkowa to skrócony zapis wyrażenia funkcyjnego:
const myFn = function() {
}
[3,1,2].sort(function(a, b) {
})
//to samo co powyżej mogę zapisać za pomocą skróconego zapisu:
const myFn = () => {
}
[3,1,2].sort((a, b) => {
})
Jak widzisz główną różnicą jest zamiana słowa function
zapisem przypominającym strzałkę (fat arrow).
Skrócony zapis
Przy skracaniu zapisu obowiązuje nas kilka dość prostych zasad.
Jeżeli funkcja wymaga tylko jednego parametru, wtedy mogę (ale nie muszę!) pominąć nawiasy:
const myF = function(a) {
console.log(a * a);
}
const myF = a => {
console.log(a * a);
}
[3,1,2].forEach(function(el) {
})
[3,1,2].forEach(el => {
})
Jeżeli parametrów jest więcej, lub nie ma żadnego, wtedy nawiasy muszą zostać:
const myF = function() {
console.log("Ala ma kota");
}
const myF = () => {
console.log("Ala ma kota");
}
[3,1,2].sort(function(a, b) {
return a - b;
})
[3,1,2].sort((a, b) => {
return a - b;
})
Jeżeli funkcja ma tylko jedną instrukcję, mogę pominąć też klamry:
const myF = function(a) {
console.log( a * a );
}
const myF = a => console.log( a * a );
A dodatkowo jeżeli jedyną instrukcją jest instrukcja return
, także i tego słowa możemy się pozbyć:
const myF = function(a) {
return "Wynik to: " + a * a;
}
const myF = a => "Wynik to: " + a * a;
[3,1,2].sort(function(a, b) {
return a - b;
})
[3,1,2].sort((a, b) => a - b)
Natomiast jeżeli funkcja ma więcej instrukcji - klamry muszą pozostać:
const myF = function(a, b) {
const result = a * b;
console.log( "Wynik mnożenia to", result );
return result;
}
const myF = (a, b) => {
const result = a * b;
console.log( "Wynik mnożenia to", result );
return result;
}
Jeżeli jedyną instrukcją jest zwracanie obiektu, wtedy zachodzi konflikt między redukcją klamer, a klamrami obiektu. W takim przypadku zwracany obiekt trzeba objąć nawiasami:
const getObj = function(name) {
return { team : name, score : 0 }
}
const getObj = name => { team : name, score : 0 } //błąd
const getObj = name => ({ team : name, score : 0 }) //ok
Dodatkowe cechy
Skrócony zapis to nie wszystko, co oferuje funkcja strzałkowa.
Dodatkowymi cechami, które odróżniają je od klasycznych funkcji są:
- Funkcje strzałkowe nie mają wiązania this i super. Dlatego nie powinniśmy ich używać do definiowania metod w obiektach i klasach
- Nie posiadają właściwości arguments i new.target
- Użycie dla nich call, apply i bind nie da oczekiwanych rezultatów. Wynika to właśnie z faktu, że nie ma tutaj wiązania this
- Nie można ich używać jako konstruktory
- Nie wolno używać w nich yield
Trening czyni mistrza
Jeżeli chcesz sobie potrenować zdobytą wiedzę, zadania znajdują się w repozytorium pod adresem: https://github.com/kartofelek007/zadania