Funkcja strzałkowa

Ostatnia aktualizacja: 29 sierpnia 2020

Jak już sobie powiedzieliśmy, funkcje możemy stworzyć na dwa najczęściej stosowane sposoby - jako deklarację i jako wyrażenie funkcyjne.


//deklaracja
function myFn() {
}

//wyrażenie funkcyjne
const myFn = function() {
}

Ten drugi sposób możemy też zapisać za pomocą tak zwanej funkcji strzałkowej, co w dzisiejszych czasach jest bardzo popularne.


//wyrażenie funkcyjne
const myFn = function() {
}

//za pomocą funkcji strzałkowej
const myFn = () => {
}

Zamiast słowa function pojawia nam się fat arrow (gruba strzałka). Dodatkowo taki zapis możemy jeszcze bardziej skrócić, o czym przekonamy się już za moment.

Skrócony zapis

Przy skracaniu zapisu takiej funkcji 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);
}

Jeżeli parametrów jest więcej, lub nie ma żadnego, wtedy nawiasy muszą zostać:


const myF = function(a, b) {
    console.log(a * b);
}

const myF = (a, b) => {
    console.log(a * b);
}

const myF = function() {
    console.log("Ala ma kota");
}

const myF = () => {
    console.log("Ala ma kota");
}

//dlatego niektórzy przy funkcji, która nie wymaga parametrów
//dodają jakiś parametr - dzięki temu zyskują jeden znak mniej 😏
const myF = _ => {

}

Jeżeli funkcja ma tylko jedną instrukcję to mogę pominąć klamry:


const myF = function(a) {
    console.log( a * a );
}

const myF = a => console.log( a * a );

Jeżeli jedyną instrukcją funkcji jest instrukcja return, także i ją możemy zredukować:


const myF = function(a) {
    return a * a;
}

const myF = a => a * a;

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

Przykłady użyć

Poza skróceniem zapisu wyrażeń funkcyjnych, najczęściej funkcje strzałkowe pojawiają się tam, gdzie używaliśmy funkcji anonimowych czyli przy wszelakich zdarzeniach, sortowaniach tablic, metodach forEach(), fetch() itp.

Funkcja strzałkowa bardzo upraszcza ich zapis:


const tabUsers = ["ala", "bala", "cala"];

//zamiast
tabUsers.forEach(function(el) {
    console.log(el.toUpperCase());
});

//mogę
tabUsers.forEach(el => {
    console.log(el.toUpperCase())
});

//lub jeszcze bardziej
tabUsers.forEach(el => console.log(el.toUpperCase()) );

const tabNr = [1, 2, 3];

//Tworzymy nową tablicę z liczbami 2x większymi

//zamiast
const tab2 = tabNr.map(function(el) {
    return el * 2;
});

//mogę
const tab2 = tabNr.map(el => el * 2);

const tabUsers = [
    { name : "Marcin", age: 18 },
    { name : "Ania", age: 16 },
    { name : "Agnieszka", age: 16}
];

//sprawdzamy czy wszyscy użytkownicy są pełnoletni

//zamiast
const allMinors = tabUsers.every(function(el) {
    return el.age > 18;
});

//mogę
const allMinors = tabUsers.every(el => el.age > 18);

const tabUsers = [
    { name : "Marcin", age: 18 },
    { name : "Ania", age: 16 },
    { name : "Agnieszka", age: 16}
];

//sprawdzamy czy niektórzy użytkownicy są pełnoletni

//poprzednio
const isSomeOfAge = tabUsers.some(function(el) {
    return el.age > 18
});

//teraz
const isSomeOfAge = tabUsers.some(el => el.age > 18);

Podobne uproszczenia możemy stosować przy wielu innych sytuacjach np. jQuerowym Ajaxie czy fetch():


//zamiast
fetch("...")
.then(function(res) {
    return res;
})
.then(function(res) {

})

//mogę
fetch("...")
.then(res => res.json())
.then(res => {

})

Przez cały kurs będę się starał używać tego zapisu, dlatego tak czy siak powinieneś szybko do niego przywyknąć.

Tutaj też mała uwaga. Osobiście funkcję strzałkową lubię stosować dla funkcji anonimowych (tak jak powyżej), natomiast gdy tworzę funkcje będące oddzielnym fragmentem kodu, wolę pozostać przy klasycznym zapisie. W mojej opinii wygląda to czytelniej, niż jakbym wszystko na siłę starał się minimalizować do jednoliniowych tworów:


function myTest() {

}

function other() {

}

[1,5,2,4,3].sort((a, b) => a - b);

const button = document.querySelector("button");
button.addEventListener("click", e => {
    ...
})

Brak wiązania this

Kolejną bardzo ważną cechą funkcji strzałkowej jest to, że nie ma ona wiązania this. Co za dziwo? Będziemy się o tym uczyć w jednym z kolejnych tematów. Na chwilę obecną pozostańmy przy skróconym zapisie, który będzie się w tym kursie pojawiał wielokrotnie.

Tutaj mała uwaga od autora. Bardzo często stosując funkcję strzałkową nie będę stosował maksymalnie skróconego zapisu, by była lepsza czytelność kodu. Nie znaczy to jednak, że ty nie możesz. Wybór należy do ciebie.

Jeden z ciekawszych i zwięzłych filmów na temat funkcji znajdziesz pod adresem https://www.youtube.com/watch?v=gigtS_5KOqo

Trening czyni mistrza

Jeżeli chcesz sobie potrenować zdobytą wiedzę z tego działu, to zadania znajdują się w repozytorium pod adresem: https://github.com/kartofelek007/zadania-podstawy

W repozytorium jest branch "solutions". Tam znajdziesz przykładowe rozwiązania.

Wszelkie prawa zastrzeżone. Jeżeli chcesz używać jakiejś części tego kursu, skontaktuj się z autorem. Aha - i ta strona korzysta z ciasteczek.

Menu