Modest Programmer logo
30 sierpnia 2018
Tagi: JavaScript
W dzisiejszym artykule, chciałem trochę rozwinąć temat funkcji w języku JavaScript. Przedstawię Ci temat przypisania funkcji do zmiennej, tak zwane wyrażenia funkcyjne oraz funkcje anonimowe. W poprzednim artykule poznałeś jeden ze sposobów deklaracji funkcji:
function hello(){
    console.log('Hello World');
}
Istnieje także, drugi sposób czyli tytułowe wyrażenia funkcyjne. Zmienne w JavaScripcie mogą przechowywać funkcję. Dobrze przeczytałeś :) W poprzednich artykułach przedstawiłem Ci jak deklarować zwykłe zmienne czy stałe tzn.:
let firstName = 'Kazimierz';
const number = 311;
Dokładnie w taki sam sposób możesz przypisać do zmiennej funkcję.
let hello = function helloWorld() {
    console.log('Hello World');
};
Użycie tej zmiennej będzie wyglądało w taki sposób:
hello();
Przy próbie wywołanie funkcji po nazwie:
helloWorld();
Zostanie zwrócony błąd ("helloWorld is not defined"), ponieważ funkcja "helloWorld" nie istnieje. Została tylko stworzona w locie i przypisana do zmiennej "hello".

Gdy deklarujesz zwykłą funkcję nie musisz umieszczać na końcu średnika (nie powinno się umieszczać), lecz przy dzisiaj poznanych wyrażeniach funkcyjnych musisz pamiętać, że na końcu (tak samo jak ma to miejsce przy zmiennych) musisz umieścić średnik.

Skoro nie można wywołać funkcji po jej nazwie, to pewnie zastanawiasz się po co wpisywać nazwę tej funkcji, oczywiście jest to zbędne. Równie dobrze możesz użyć krótszego zapisu i przypisać funkcję do zmiennej w taki sposób:
let hello = function() {
    console.log('Hello World');
};
Również, możesz przypisać funkcje do stałej:
const hello = function() {
    console.log('Hello World');
};
Powyższy przykład to tak zwana funkcja bez nazwy, czyli funkcja anonimowa.

Równie dobrze można w taki sam sposób przypisać do zmiennej funkcję z parametrem.
let hello = function (firstName) {
    console.log('hello ' + firstName);
};
hello('Kazimierz');
Ok, idąc dalej, skoro funkcja może być przypisana do zmiennej to również może być przekazana jako parametr innej funkcji.
function hello(someFunction) {
    someFunction();
}

hello(
    function() {
        console.log('Hello World'); 
    }
);
W poprzednim artykule napisałem o tym, że funkcje mogą zostać wywołane przed deklaracją. Czyli:
hello();
function hello() {
    console.log('Hello World');
}
Jest to tak zwany hoisting, który przenosi deklaracje wszystkich funkcji na początek (na góre), jest to robione automatycznie przez silnik JavaScript, dzięki czemu możemy używać funkcji przed ich deklaracją. Mimo to, żeby nie robić sobie bałaganu w kodzie, dobrą praktyką jest zawsze deklarowanie wszystkich zmiennych na początku (na górze). W przypadku przypisania do zmiennej tak to nie działa. Używać zmiennej, do której została przypisana funkcja możesz dopiero po przypisaniu (to samo dotyczy zwykłych zmiennych). Czyli przy takim zapisie:
hello();
let hello = function () {
    console.log('Hello World');
};
Zostanie zwrócony błąd ("can't access lexical declaration 'hello' before initialization"). Prawidłowe użycie:
let hello = function () {
    console.log('Hello World');
};
hello();
Pamiętaj o tym, że najpierw musi nastąpić przypisanie funkcji do zmiennej, a dopiero później możesz tej zmiennej używać.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam do kolejnego artykułu z serii podstawy programowania w języku JavaScript.

Kolejny artykuł - Operatory arytmetyczne oraz przypisania w JavaScript.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista. Specjalizuje się w C#, głównie WPF, Windows Forms oraz ASP.NET MVC.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2018 modestprogrammer.pl. Wszelkie prawa zastrzeżone Design by Kazimierz Szpin