Blog Dla Młodszych Programistów C#/.NET

czwartek, 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. Specjalizuje się w ASP.NET Core, ASP.NET MVC, ASP.NET Web API, Blazor, WPF oraz Windows Forms.
Autor bloga ModestProgrammer.pl
Komentarze (4)
Tomasz
TOMASZ, czwartek, 28 listopada 2019 00: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, czwartek, 28 listopada 2019 08: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, czwartek, 28 listopada 2019 15: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, czwartek, 28 listopada 2019 15: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 2024 modestprogrammer.pl. Wszelkie prawa zastrzeżone. Regulamin. Polityka prywatności. Design by Kazimierz Szpin