JavaScript: Funkcje strzałkowe

0:00Teraz omówimy funkcje strzałkowe, czyli tzw. arrow functions.

0:04Jest to coś, co zostało dodane do języka JavaScript od standardu ES6,

0:07również jest szeroko wspierane w przeglądarkach.

0:10Teraz jak wygląda taka funkcja strzałkowa?

0:12Najpierw utworzę sobie zwykłą funkcję sayHello,

0:14żeby móc po prostu pokazać Ci różnicę.

0:16Będzie przyjmowała parametr name i będzie po prostu robiła console.log

0:21i tutaj sobie zinterpolujemy. Witaj

0:24name.

0:26Możemy dodać tutaj jeszcze wykrzyknik.

0:28To jest standardowo utworzona funkcja.

0:30A teraz pokażę Ci jak utworzyć funkcję

0:31strzałkową, która będzie realizowała dokładnie to samo.

0:35I teraz funkcja strzałkowa

0:36w domyśle nie ma nazwy, bo tutaj podawaliśmy nazwę tej funkcji, a w

0:40przypadku funkcji strzałkowej będziemy ją przypisywać np.

0:43do zmiennej. Czyli utworzę sobie zmienną sayHello,

0:46tutaj będziemy mieli podkreślenie, bo nie

0:47mogę utworzyć takiej stałej, jeżeli funkcja już się tak nazywa, ale zaraz tę

0:51funkcję wykomentuje. I teraz przypisuje do niej utworzoną anonimowo funkcję strzałkową,

0:57czyli taką, która nie ma nazwy, bo im się nie da przypisać nazwy.

1:00Ta funkcja wygląda tak, że podajemy sobie

1:03coś takiego strzałkę i następnie może tutaj być blok kodu, ale być go nie musi.

1:09Możemy to również uprościć.

1:10Ja to zaraz wytłumaczę.

1:11Napiszemy name, czyli że ta funkcja ma

1:13przyjmować taki parametr i ma zwracać console.log,

1:17w zasadzie to samo co tutaj wyżej, więc sobie to skopiuję,

1:20ok i skomentuję tę funkcję,

1:23a wywołam funkcję sayHello przypisaną do stałej, bo chcę Ci tylko pokazać, że mogę

1:27tutaj przekazać Piotr, że będzie to działać dokładnie tak samo.

1:30Mamy Witaj Piotr.

1:32I teraz funkcja strzałkowa na pierwszy rzut

1:33oka jest bardzo nieczytelna, ale jak się już do tego przyzwyczaisz, to naprawdę ja

1:37często z tych funkcji korzystam i są one dla mnie i czytelne i wygodne w użyciu.

1:41Więc ta funkcja działa tak, że na początku

1:43podajemy parametr jaki będzie przyjmować i nie trzeba tutaj żadnych nawiasów.

1:47Natomiast gdyby ona przyjmowała dwa parametry np.

1:49byłoby to a i b, to wtedy musiałaby tutaj mieć takie nawiasy.

1:53Czyli to jest dokładnie to samo co te nawiasy u góry.

1:56Natomiast jak przyjmuje jeden parametr, to nawiasu być nie musi.

1:59Następnie mamy tą słynną strzałkę, od

2:01której nazwa się wzięła i mamy to co ta funkcja zwraca.

2:05Czyli ta strzałka mówi, że to co jest dalej zostanie z tej funkcji zwrócone.

2:09W tym przypadku to zostanie wywołane, no i

2:11console.log nic nie zwraca, więc nic nie zostanie zwrócone.

2:14Ale gdybyśmy stworzyli funkcję add zobacz i byłaby to funkcja strzałkowa,

2:20która przyjmowałaby a i b i robiłaby coś takiego a+ b to mówimy, że ta funkcja

2:25przyjmie jakieś dwa parametry i je do siebie doda i zwróci.

2:28Czyli nie musimy tutaj używać słowa return.

2:31Tak wygląda właśnie ciało tej funkcji.

2:33Może tutaj być proste wyrażenie.

2:35Nie zmienia to jednak faktu, że taka

2:37funkcja może mieć ciało funkcji i może korzystać z słowa return.

2:41Więc będę chciał Ci teraz to pokazać.

2:42Stworzymy sobie podobną funkcję lottery jak mieliśmy już wcześniej

2:49i ona nic nie będzie przyjmować, więc wtedy zapisujemy ją w ten sposób i funkcja

2:53strzałkowa może mieć ciało funkcji zapisywane właśnie tak.

2:57Oczywiście jeśli chodzi o to formatowanie, ono jest dowolne.

3:00I teraz ta funkcja można powiedzieć, że nic nie zwraca

3:03bo dopiero muszę sam użyć słowa return.

3:05Tutaj nie użyłem takich nawiasów.

3:07Zauważ to jest bardzo ważne.

3:09Więc ta strzałka mówiła, że to wyrażenie

3:11zostanie wyliczone i zwrócone tak jak poprzez return.

3:14Natomiast jak dodałem takie nawiasy do

3:15funkcji strzałkowej to już muszę ręcznie użyć słowa return i w środku zrobimy to samo co

3:20w jednej z poprzednich lekcji, pomnożymy sobie razy 100 i jeśli to jest

3:24mniejsze od 50 to zwracamy przegrałeś, natomiast w przeciwnym wypadku zwracamy

3:30wygrałeś. I w ten sposób utworzyliśmy funkcję strzałkową, która działa identycznie

3:34jak ta nasza zwykła funkcja, którą mieliśmy wcześniej

3:37i jak widzisz, jak najbardziej w środku możemy również korzystać z return.

3:42Mógłbyś zatem zapytać jaka jest różnica pomiędzy funkcją strzałkową a zwykłą

3:45funkcją, poza tym, że zapisuje się ją w nieco inny sposób?

3:49Jest jedna niezwykle istotna różnica, którą chcę Ci teraz pokazać.

3:53Utworzę obiekt person, który już też widzieliśmy w tym kursie.

3:56Będzie miał firstName Jan lastName, powiedzmy Kowalski i chciałbym

4:02w środku utworzyć mu metodę, czyli funkcję sayHello.

4:06I jak tworzyliśmy ją w taki standardowy

4:07sposób, czyli przypisywałem ją tak albo w skróconym zapisie przypisałem ją tak

4:12to mogłem zrobić w środku np.

4:15return albo zróbmy console.log, bo to nam się od razu wyświetli.

4:19Nazywam się i mogłem tutaj zinterpolować

4:22this.firstName i to this kierowało na ten obiekt person i następnie this.lastName.

4:29Po wywołaniu takiej funkcji oczywiście console.log,

4:32nie console.log nie jest już potrzebny.

4:34Zróbmy person

4:36sayHello.

4:38Zobaczymy Nazywam się Jan Kowalski.

4:41Natomiast gdybym w środku tę funkcję utworzył jako funkcję strzałkową, czyli

4:45zrobił coś takiego i powiedział, że jest to funkcja strzałkowa

4:49mógłbym ją zapisać tak

4:50ona nic nie musi zwracać.

4:52Zobacz, co się stanie. Zobaczymy

4:54Nazywam się undefined i undefined.

4:56I teraz jaka jest różnica pomiędzy właśnie funkcją strzałkową a zwykłą funkcją?

5:01Właśnie taka, że tam this zawsze kieruje na to co powyższy zakres.

5:05Czyli to this nie jest ustawiane przez ten

5:07obiekt, ale kieruje w tym miejscu dokładnie na to samo na co kieruje this

5:11tutaj.

5:12Jeżeli chodzi o to this w JavaScripcie to potrafi być bardzo skomplikowane, ale

5:16powiem Ci, że w tym miejscu this to jest to samo co window.

5:19Czyli my w tym momencie odwołaliśmy się do window.first_name i do window.last_name.

5:24Zapamiętaj zatem tyle, że jak tworzymy funkcję strzałkową, to w niej this może

5:28kierować na coś zupełnie innego niż w przypadku normalnej funkcji, bo nie ma

5:32możliwości wymuszenia na co to this ma kierować.

5:35A jest to możliwe do zrobienia w języku JavaScript.

5:38W większości jednak przypadków to nie

5:40będzie miało dużego znaczenia i możemy z tych funkcji korzystać po prostu dla

5:44wygody, gdzie chcemy sobie skrócić jakiś zapis.