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