EcmaScript 6: Nowa konstrukcja - arrow function

0:01Tą lekcją rozpoczynamy rozdział, w którym pokażę ci co zmieniło się, jeśli chodzi o funkcje

0:05w ES6 i w tej lekcji zajmiemy się czymś co nazywa się arrow

0:09function. Na siłę możemy to na polski przetłumaczyć jako funkcja strzałkowa, więc

0:14pokażę ci jak ona wygląda. Na początek mamy taki oto kod, czyli utworzyłem

0:19sobie zwykłą funkcję anonimową. Jest to tak zwane wyrażenie funkcyjne, czyli function

0:23expression, przypisane po prostu do zmiennej. Ona może być utworzona z var czy z let, akurat

0:28tutaj nie będzie to miało znaczenia. Jak działa let już wiesz, więc wywołanie tej funkcji zwróci

0:32nam po prostu słowo Jan. Teraz pokażę ci jak taką funkcję przepisać

0:36na nową tak zwaną arrow function, więc ja ją sobie wykomentuję, żebyśmy

0:40nie mieli błędu kiedy będę chciał napisać let i od nowa zadeklarować

0:45taką samą zmienną, więc napiszę getName i teraz napiszę coś

0:49dziwnego i zaraz ci wytłumaczę na czym to polega. Okazuje się, że taki

0:53zapis jak tutaj zrobiłem, czyli to co teraz podświetlę. Ta całość

0:57jest to funkcja, która nie przyjmuje żadnych parametrów i zwraca string Jan.

1:01Uwierz mi, że jeżeli to wykonamy, a możemy to zrobić w przeglądarce, bo

1:05jesteśmy w tym globalnym zakresie getName. Zobaczymy

1:10słowo Jan. Tak właśnie wygląda funkcja strzałkowa i teraz gdybyśmy

1:14ją chcieli rozłożyć na łopatki, to możemy. Na początku jeżeli ona nie przyjmuje

1:19żadnych parametrów, to potrzebuję takiej pary nawiasów okrągłych. Następnie

1:23zawsze musi tutaj być taka strzałka i później mamy jakieś wyrażenie

1:27JavaScript'owe i teraz jeżeli tutaj będzie takie proste wyrażenie JavaScript'owe,

1:31które możemy jakby w jednej linijce zawrzeć, to wtedy od razu to jest traktowane

1:36jako return, czyli ta funkcja od razu tę wartość zwraca. Oczywiście gdybym tu napisał napisał dwa

1:40plus dwa, ona by zwracała cztery. Natomiast, jeżeli chcielibyśmy zrobić

1:44funkcję, która będzie miała swoje ciało największe, tak jak mamy to

1:48tutaj, w ten sposób, że bym tutaj mógł napisać więcej rzeczy, to wtedy możemy

1:52tutaj zrobić to w ten sposób. Normalnie sobie ją podzielić, ale

1:58tym razem już byśmy musieli napisać słowo return. Wtedy to nie zostanie automatycznie zwrócone. Teraz

2:03ta funkcja będzie działać dokładnie tak samo jak wyżej, ale mogę w niej mieć już różne inne

2:08instrukcje i może ja cofnę do tej pierwotnej wartości i teraz pokażę

2:12ci przykład właśnie z ES5 najpierw. Tak by

2:16mogła funkcja wyglądać, żebyśmy to wykomentowali, czyli chciałbym, żeby ona przyjmowała jakiś

2:20parametr. Jeżeli ona ma wartość prawdziwą, czyli true, to zwracam Jaś, jeżeli

2:25nie, to zwracam Jan. Oczywiście to można by było zapisać krócej z tym

2:29operatorem ternarnym, takim, ale zostawmy to w ten sposób i znowu

2:33sobie to wykomentuje i spróbujemy utworzyć naszą zmienną pod getName

2:39i będzie to funkcja strzałkowa, ale już przyjmująca parametr. Jeżeli

2:43funkcja taka strzałkowa przyjmuje parametr, to możemy napisać tak jak wyżej i nazwać ten

2:48parametr, a następnie w tym przypadku utworzymy ciało tej funkcji. Nie

2:52musimy tworzyć tego ciała, ale chciałbym odwzorować to co jest wyżej, więc wtedy muszę to

2:56zrobić, bo inaczej takich if'ów nie będę mógł zapisać i teraz takie if'y sobie

3:00tutaj wrzucę i tak naprawdę ta funkcja

3:05powinno zadziałać poprawnie. Spróbujemy ją sobie wywołać getName bez

3:09parametru. Zwraca nam Jan, a jeżeli podam jako kid true, zwróci nam Jaś. Wszystko

3:14jest okej. Natomiast zapamiętaj, że jeżeli będzie taka funkcja strzałkowa przyjmować

3:19tylko jeden parametr, możesz pominąć nawiasy okrągłe, czyli w ten sposób

3:23możesz to zapisać i też będzie okej. No i całe to wyrażenie gdybyś chciał skrócić,

3:27to oczywiście można byłoby je zapisać tak. Wtedy słowo return nie

3:31byłoby potrzebne. No i tutaj musielibyśmy zrobić coś takiego. Jeżeli kid

3:35jest podane, to zwróć Jaś. Mam nadzieję, że taki

3:39zapis znasz, bo to nie jest nic nowego dla ES6. W przeciwnym wypadku Jan.

3:44No i znowu to wszystko, to jest poprawna funkcja, która przyjmuje parametr

3:48nazwany jako kid, a tutaj jest ciało tej funkcji. Jest to wyrażenie, ale

3:52od razu jakby przed tym jest słowo return. Czyli sama ta strzałka nie

3:56mówi że coś jest zwracane. Natomiast mówi, że jakby

4:00rozpoczyna się tam ciało tej funkcji. Zobaczmy getName i jak widzimy efekt jest taki sam.

4:04Natomiast ja wrócę do tej postaci, która była przed momentem, żebyś widział

4:09jak to mniej więcej wygląda, czyli taka funkcja strzałkowa może przyjmować wiele postaci. Jeżeli

4:13nie przyjmuję parametrów, to musi mieć nawiasy okrągłe, żeby zasygnalizować, że tutaj się

4:17zaczyna. Jeśli to ma proste wyrażenie, to on od razu jest zwracany. Jeżeli

4:22chce mieć ciało funkcji, to robimy takie oto nawiasy klamrowe i

4:26będzie to wtedy ciało funkcji. Dodatkowo funkcja może przyjmować parametr,

4:30który tutaj nazywamy i jeżeli jest jeden, to nie musi być tutaj nawiasów

4:34okrągłych. Teraz natomiast pokażę Ci jaki problem by się pojawił gdybyśmy chcieli

4:38zwrócić literał obiektów. Gdyby miał funkcja o nazwie getObject. W zasadzie,

4:43żeby to wyglądało tak samo to utworzylibyśmy sobie taką

4:47zmienną, którą przechowuje funkcje i chciałbym z niej zwracać na przykład

4:51pusty obiekt. Albo powiedzmy w obiekcie byłoby firstName Jan.

4:55Wiem, że jest to możliwe. Nie ma najmniejszego problemu, ale jak to przepisać na

4:59strzałkową, już ci pokażę, gdzie by się pojawił problem. Napiszmy let getObject

5:04i tutaj chciałbym zrobić funkcje strzałkową. Nie

5:08przyjmuje żadnych parametrów, więc tylko coś takiego i tutaj wyrażenie, że ona

5:13coś zwraca i co jeżeli bym tutaj napisał firstName Jan. Czy

5:17ta funkcja będzie zwracać taki literał obiektu? Czy też nie? Sprawdźmy,

5:21getName i widzimy, że

5:26getName nam tutaj zwróciło wartość undefind czy że w zasadzie nie jest zdefiniowany. To

5:31nie chodziło o tą funkcje get Object. Zobaczymy czy

5:35na pewno tak nazwałem, tak i zobacz ona zwraca undefined. Dlaczego?

5:39Wydawałoby się, że wszystko jest okej, ale tak się nie dzieje. Otóż

5:44ta funkcja, czyli interpreter JavaScript'u nie traktuje tych nawiasów

5:48klamrowych jako obiektu, który powinien zwrócić, ale jako ciało tej

5:52funkcji. Dlatego nam to nie działa, bo pokazałam ci wyżej, że właśnie tak się określa

5:56ciało funkcji dlatego jeżeli chcesz takiej funkcji strzałkowej od razu zwracać literał

6:00obiektu, to powinieneś go opleść jeszcze takimi oto nawiasami i

6:05to sprawia, że wtedy to co jest wewnątrz jest wyrażeniem JavaScript'owym i takie

6:09wyrażenia można już bez problemu zwrócić. Zobaczmy teraz getObject

6:13i okazuje się że taki literał obiektu został zwrócony i tutaj mamy jego

6:17dane. Pokażę ci jeszcze jedną rzecz. Mam nadzieję,

6:21że wiesz czym jest zmienna arguments. Jeżeli sobie utworze dowolną funkcję, na

6:27przykład nazwę ją args, to nie ma znaczenia, ale w ten standardowy sposób, to mogę

6:31w konsoli sobie wyświetlić arguments i jest to taka specjalna zmienna

6:35wewnątrz funkcji i teraz jeżeli wywołam funkcje args i przekaże jej na

6:39przykład 123, to wszystkie te argumenty tutaj przekazane

6:43wpadną pod zmienną arguments takiego obiektu, który wygląda trochę jak tablica.

6:47Zobaczmy. Jak widzisz, one się tutaj pojawiły i oprócz tego ten

6:51obiekt jeszcze zawiera inne właściwości, ale ma tutaj właśnie pod indeksem

6:560, 1 i 2, wartości przekazane kolejno do funkcji, czyli

7:00na niej sobie możemy w jakiś sposób operować i teraz pytanie czy funkcje strzałkowe również

7:05mają zmienną arguments. Spróbujmy sobie przepisać tą funkcję. Napiszmy

7:09let args i chciałbym, żeby to była funkcja strzałkowa. Teraz

7:15jest to poprawna funkcja strzałkowa. Wywołuje ją przekazując te parametry i zobaczymy

7:19jak to będzie wyglądać. Okazuje się, że mamy błąd, arguments is not defined, czyli

7:23wewnątrz takiej funkcji nie jest tworzona zmienna arguments. Natomiast

7:27gdybyśmy i to jest bardzo istotne opletli tę funkcję

7:31inną funkcją, bo arguments jako zmienna po prostu nie istnieje tutaj w tym

7:35zakresie o jeden wyżej tej funkcji, tak można byłoby powiedzieć. Jeżeli

7:40bym stworzył funkcję, którą nazwał getArgs i wewnątrz

7:46utworzył taką funkcję oraz ją wywołał,

7:51args, powiedzmy, w ten sposób i wywołałbym

7:57getArgs. Okej,

8:03zobaczymy. To nagle się okaże, że ona ma dostęp do zmiennej arguments,

8:07ale nie do swojej, czyli ważne jest, że przed momentem był błąd, bo ta funkcja była na zewnątrz i

8:11nigdzie w tym zakresie nie istniała zmienna arguments. Natomiast kiedy wywołuję tę funkcję,

8:16to jakby w tym miejscu arguments istnieje i że chwilę niżej ta funkcja

8:20jest definiowana, to ona ma dostęp do tego arguments, ale to nie są jej argumenty, czyli

8:24zapamiętaj, że funkcje strzałkowe nie mają dostępu do zmiennej arguments, do

8:29tych argumentów, które są dla niej wywoływane. Mogą mieć ewentualnie dostęp do tej

8:33zmiennej tylko dlatego, że są wewnątrz innej funkcji, taka zmiana istnieje i teraz

8:38na koniec mógłbyś zadać pytanie, kiedy wykorzystywać funkcje strzałkowe. Jeszcze

8:43trochę o nich się dowiesz. Natomiast świetnym użyciem tych funkcji jest użycie

8:47ich jako funkcji callback zawsze wtedy, kiedy potrzebujemy na przykład posortować tablice

8:51lub coś innego z nią zrobić, więc ja tutaj wkleję sobie teraz pewien

8:55kod. Będzie to tablica z liczbami

9:00i później chciałbym metodą filter, która jest na tablicach dostępna, zwrócić

9:04sobie nową tablica, która będzie miała liczby tylko większe od 20. Robimy to w

9:08ten sposób, że podajemy funkcje callback, która będzie otrzymywała poszczególne wartości, 10, 20 i

9:13tak dalej. Jeśli z niej jest zwrócimy true, to w nowej tablicy ten element się

9:17znajdzie, na przykład 10. Jeżeli false, to nie. No i ja tutaj po prostu operatorem sprawdzam,

9:22w ten sposób, tym operatorem, czy ta wartość na przykład 10 jest większa od 20. On

9:26mi zwróci true lub false, które zwracam w tej funkcji. W ten sposób jeśli bym sobie wyświetlił

9:31greater than 20, to zobaczymy tablice tylko z tymi liczbami. Natomiast

9:36taki callback musimy tutaj wpisać i w tym miejscu i świetnym użyciem będzie

9:40właśnie skorzystanie z funkcji strzałkowej. Jak byśmy to zrobili? Wytnę

9:44sobie tylko tę wartość albo w zasadzie może to wykomentuje i skopiujemy dla

9:49referencji, żeby to zostało później w plikach i teraz tylko ta wartość mnie interesuje.

9:54Zauważ, że tutaj gdzie muszę podać funkcje callback, to podam

9:58sobie po prostu funkcje strzałkową, która ma przyjmować value. Nie muszę tego oplatać nawiasami,

10:02bo to jest jeden parametr i chcę, żeby ona zwracała value większe od 20.

10:07Zauważ, że na pierwszy rzut oka nie wygląda to jak funkcja, ale cały ten zapis

10:11jest to funkcja, która przyjmuje parametr value i zwraca to

10:15co jest tutaj. Zobaczysz, że efekt jest dokładnie taki sam, a mamy dużo

10:19mniej kodu i kiedy już się przyzwyczaisz do tej funkcji, to jest on po prostu bardziej czytelny. W tej

10:23lekcji zatem to by było wszystko. Natomiast w kolejnych lekcjach będziemy

10:27ten temat jeszcze kontynuować.