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 C#/.NET. Głównie pisze aplikacje w ASP.NET MVC, WPF oraz Windows Forms. Specjalizuje się w testach jednostkowych.
Autor bloga ModestProgrammer.pl
Komentarze (4)
Tomasz
TOMASZ, 27 listopada 2019 23:20
Na czym polega ta zawiłość kodu, że po argumencie someFunction wewnątrz finkcji jest znowu someFunktion()? Jaka jest z tego płynąca korzyść?
Kazimierz Szpin
KAZIMIERZ SZPIN, 28 listopada 2019 07:07
@TOMASZ, w powyższym przypadku someFunction jest argumentem funkcji i to ona jest wywoływana wewnątrz innej funkcji, dzięki temu w tym argumencie możesz przekazać dowolną funkcję, zależną od różnych scenariuszy.
Tomasz
TOMASZ, 28 listopada 2019 14:04
Doczytałem już szczegóły, bo jest to interesująca konstrukcja ... więc działa to jak wskaźnik do funkcji w C++. Nieodzowne jest tutaj rozszerzenie o przekazywanie argumentów owej przekazywanej funkcji. Tylko dalej nie wyjaśnia to, dlaczego, w jakich sytuacjach jest taka konstrukcja potrzebna? Bo to widzę w JS jest powszechne. To znaczy, co się stanie lub czy mogę przekazać funkcję z argumentami bez argumentów pisanych po przecinku obok do funkcji a argumenty podać wewnątrz funkcji.
Tomasz
TOMASZ, 28 listopada 2019 14:13
Kontynuując temat ... W przypadku funkcji string.replace() tam jest znowu opcjonalne wywołanie z argumentem - funkcją z niejawnym argumentem. I teraz to jest zawiłe do wydedukowania, skąd funkcja wzięła argument? Co ciekawe dokmentacja mozilli mówi o generowanej wartości dla p1 a w3schools wywołuje ją z m. I też działa... Liczy się tylko kolejność a reszta undefined? Chodzi o dopasowanie: do funkcji z 10 argumentami w definicji przekazuje funkcję z dwoma.
Dodaj komentarz

Wyszukiwarka

© Copyright 2020 modestprogrammer.pl. Wszelkie prawa zastrzeżone. Polityka prywatności. Design by Kazimierz Szpin