Funkcja strzałkowa

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). 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");
}

//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ć

Funkcje strzałkowe najczęściej pojawiają się tam, gdzie używaliśmy funkcji anonimowych czyli przy wszelakich zdarzeniach, funkcjach dla tablic, fetch() i wielu innych sytuacjach.


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

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

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

//lub
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. 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 przekazywanych jako wartość dla innych funkcji (tak jak powyżej), natomiast gdy tworzę funkcje będące oddzielnym fragmentem kodu, wolę pozostać przy klasycznym zapisie:


function myTest() {

}

function other() {

}

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

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

Nie jest to żaden wyznacznik i żadna zasada - ot po prostu tak się przyzwyczaiłem.

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