JavaScript: Tworzenie funkcji

0:00Język JavaScript posiada dwa rodzaje funkcji.

0:03Pierwsze są to, można powiedzieć zwykłe

0:05funkcje, a drugie funkcje strzałkowe, o których powiemy w jednej z kolejnych lekcji.

0:09W tej lekcji skupimy się na tych zwykłych

0:10funkcjach, na tym, jak je tworzyć i pokażę Ci do tego w zasadzie trzy różne sposoby.

0:16Więc najprostszym sposobem utworzenia

0:17funkcji jest napisanie słowa function i następnie podajemy nazwę takiej funkcji.

0:22Jeżeli chodzi o nazewnictwo funkcji, to

0:24tutaj obowiązują dokładnie te same zasady, które są przy nazywaniu zmiennych.

0:28Czyli możemy sobie funkcję nazwać np.

0:30sayHello,

0:31w ten sposób, następnie podajemy parę

0:33nawiasów okrągłych i blok kodu, który się wykona, kiedy wywołamy tę funkcję.

0:38Czyli to jest tak naprawdę definicja funkcji.

0:41W ten sposób to robimy i nie musimy tego przepisywać do żadnej zmiennej.

0:45Jeżeli zrobimy to tak, to można

0:47powiedzieć, że tak jakbyśmy utworzyli taką zmienną sayHello, bo właśnie po tej

0:51nazwie będziemy się mogli do tej funkcji odwołać.

0:54Funkcje są traktowane w JavaScript jak

0:55obiekty, czyli możemy je przekazywać, przypisywać do zmiennych itd.

1:00Czyli podobnie jak np. tablice czy takie zwykłe obiekty.

1:04I teraz wewnątrz takiego bloku kodu

1:06znajduje się ciało funkcji, czyli to co chcemy wykonać, kiedy funkcja się wywoła.

1:10Zróbmy sobie tutaj po prostu Witaj świecie.

1:13Może coś takiego, ok i samo to w sobie tylko definiuje funkcje

1:17na stronie nic się oczywiście nie wydarzy,

1:19ale teraz w dowolnym miejscu możemy taką funkcję wywołać właśnie odwołując się

1:23przez referencję po jej nazwie i dodając parę nawiasów okrągłych.

1:27To jest wywołanie naszej funkcji, które sprawia, że kod w niej zawarty się wykona.

1:32No i teraz zobaczyliśmy tutaj Witaj świecie.

1:35Drugim sposobem na utworzenie funkcji

1:37będzie przypisanie jej do zmiennej czy stałej.

1:39Możemy sobie utworzyć taką stałą sayHello2

1:41na przykład i przypisać tutaj funkcję bez nazwy.

1:46Nazywamy to funkcją anonimową, czyli funkcja nie musi mieć nazwy.

1:50Możemy ją w ten sposób utworzyć i wewnątrz

1:52oczywiście jej ciało tu możemy powiedzieć np. cześć.

1:55Teraz przypisaliśmy to do stałej

1:57i można powiedzieć, że na pierwszy rzut oka w zasadzie niczym to się nie różni,

2:00dlatego, że tutaj po tym identyfikatorze sayHello mogliśmy się odwołać

2:04a teraz jak się odwołam do sayHello2, to

2:07też tak naprawdę to kieruje na taką funkcję, a więc mogę tę funkcję bez

2:11problemu wywołać i zobaczymy komunikat Cześć.

2:15Więc czym to się różni?

2:16W zasadzie jest tutaj jedna istotna różnica.

2:18Otóż funkcje w języku JavaScript utworzone

2:20w ten sposób są hoistowane, czyli wynoszone do samej góry z zakresu zmiennych.

2:26Oznacza to tylko tyle, że jak utworzę

2:28funkcję w ten sposób, to mogę ją wywołać zanim została zdefiniowana.

2:32Czyli rozpoczynamy kod i tak naprawdę już wywołuję funkcję, a ona dopiero później

2:36jest zdefiniowana i zobacz, że to działa dokładnie tak samo.

2:40Natomiast jeżeli przypisuję funkcję do

2:42stałej lub zmiennej, to ona nie może być użyta wcześniej niż została przypisana.

2:47Zobacz, to nam wygeneruje błąd.

2:49Dlatego właśnie, że najpierw się

2:51odwołujemy, a dopiero potem to zostało utworzone.

2:54Czyli to jest jedna taka subtelna różnica.

2:56I mamy jeszcze trzeci sposób tworzenia

2:58funkcji, w zasadzie prawie identyczny jak drugi, powiedzmy sayHello3.

3:03I tu możemy przypisać funkcję, która będzie miała swoją nazwę np.

3:07hello. W ten sposób i tu zrobimy

3:09console.log

3:10Witam, może tak i teraz czym to się różni?

3:13W zasadzie nie różni się niczym od tego zapisu poza tym, że jak funkcji nadamy jej

3:18nazwę to możemy po tej nazwie wewnątrz tej funkcji odwołać się do niej samej.

3:23Czyli gdybyśmy tworzyli tzw.

3:24funkcję rekurencyjną, która pod pewnymi warunkami wykonuje sama siebie, to po

3:29prostu wewnątrz mogę się odwołać do tego hello.

3:32I podobnie mógłbym się tutaj odwołać do

3:34sayHello3, ale tak naprawdę ta nazwa tej zmiennej może być różna.

3:38Czy w zasadzie ta funkcja może być przekazywana w różne miejsca, więc wtedy

3:42bezpieczniej jest odwołać się do hello w środku.

3:45To wynika z tego, że moglibyśmy gdzieś pod spodem napisać np.

3:49sayHello, powiedzmy zrobilibyśmy const

3:54sayHello4 to się równa sayHello3, a potem sayHello

4:00ustawiłbym na wartość null.

4:03Mam nadzieję, że wiesz o co chodzi.

4:04To gdybym tutaj w środku odwoływał się do

4:06sayHello3, to na pewnym etapie odwołał bym się tak naprawdę do wartości null.

4:11Czyli nie jest to bezpieczne.

4:12A jak sobie tutaj podam nazwę tej funkcji,

4:15to zawsze mogę się do niej odwołać właśnie w taki oto sposób.

4:18Więc to jest, można powiedzieć, trzeci

4:19sposób tworzenia funkcji, czyli ona i jest przypisana do stałej i ma swoją nazwę,

4:24natomiast tutaj odwołali byśmy się do niej poprzez sayHello3

4:27dokładnie tak. To oczywiście wykomentuje i wynik jest taki.

4:33A więc standardowo funkcję tworzymy tak,

4:35natomiast można ją również przypisać do stałej czy zmiennej w taki oto sposób.