JavaScript: Zwracanie wartości

0:00Teraz porozmawiamy o tym, w jaki sposób

0:02funkcje w języku JavaScript mogą zwracać wartości.

0:05Utworzę sobie funkcję, którą nazwiemy getMessage.

0:08W ten sposób. I w środku tej funkcji mogę mieć dowolny kod,

0:12natomiast później mogę użyć słowa kluczowego return, który coś zwraca.

0:17Ja tutaj będę chciał od razu sobie zwrócić taki string.

0:20Witaj świecie.

0:22Tak to będzie wyglądać.

0:23I teraz co oznacza, że funkcja coś zwraca?

0:25Chociaż może żeby to lepiej zobrazować zróbmy sobie tutaj coś takiego.

0:28Message Witaj świecie.

0:31Czyli utworzyłem jakąś stałą i zwrócę wartość z tej stałej. Ale to będzie

0:35dokładnie to samo, więc w tym przypadku nie byłoby to konieczne.

0:38Teraz co oznacza, że funkcja coś zwraca?

0:40Otóż kiedy ją wywołamy zobacz getMessage

0:42to już nie będzie tak jak wcześniej, że coś zobaczymy.

0:45Kompletnie nic tutaj się nie dzieje.

0:46Nawet jak odświeżę jeszcze raz stronę.

0:48Dlatego, że tutaj został zwrócony ten string

0:51i nic z nim nie zrobiliśmy. Ale moglibyśmy

0:53zrobić console.log i tam przekazać wywołanie tej funkcji.

0:57Czyli ta funkcja zwróci nam Witaj świecie i to zostanie podstawione do console.log.

1:01Zobacz teraz console.log nam to wyświetlił.

1:04Równie dobrze moglibyśmy tutaj zrobić coś takiego, czyli const message

1:09i ta stała nie ma nic wspólnego ze stałą,

1:11która jest tutaj, bo tutaj wchodzi w grę tzw.

1:13zakres zmiennych, o którym jeszcze później powiemy.

1:16Wywołuje getMessage

1:17a to oznacza, że to co zwraca ta funkcja

1:19zostaje przypisane do stałej. I następnie mogę to message podstawić tutaj.

1:25Jak widzisz, efekt jest dokładnie ten sam.

1:27Teraz pokażę Ci trochę inny przykład, żeby

1:29pokazać Ci, że funkcja zawsze można powiedzieć zwraca nam nowe wartości.

1:34Stworzyli byśmy sobie funkcję taką jak makeArray czyli utwórz tablicę.

1:38I chciałbym, żeby ta funkcja zwracała po prostu pustą tablicę.

1:42I teraz za każdym razem jak będę

1:43potrzebował tablicy, to mogę powiedzieć arr równa się makeArr czy makeArray,

1:50ta funkcja się wywołuje, zwraca pustą tablicę i ta tablica jest przypisywana

1:54tutaj. I chcę Ci tylko pokazać, że za każdym

1:56razem tutaj jest tworzony zupełnie inny obiekt.

1:59Gdybym zrobił

2:00tutaj arr2 i wywołam jeszcze raz funkcję makeArray, a następnie w console.log

2:05porównałbym czy dwa razy została zwrócona ta sama tablica,

2:08czy są to różne tablice?

2:10Otrzymamy false.

2:11Zobacz, bo za każdym razem kiedy ta

2:13funkcja się wywołuje, jest tworzona nowa tablica i jest ona zwracana.

2:17No i na koniec pokażę Ci jeszcze jeden

2:18przykład, żeby uświadomić Ci, że słowo kluczowe return kończy działanie funkcji.

2:22Czyli gdyby pod spodem był jakikolwiek kod, to on się nie wykona.

2:26Return od razu zwraca, ale w funkcji możemy mieć również kilka takich słów

2:31kluczowych return. Czyli w kilku miejscach.

2:33A więc stwórzmy sobie funkcję lottery jak

2:35loteria i będziemy chcieli zrobić coś takiego w środku takiego if.

2:39Skorzystamy z obiektu Math, który w JavaScript pozwala nam np.

2:43pobrać randomową liczbę, czyli dowolną liczbę.

2:46To będzie liczba od 0.0 do 1.0

2:50czyli to będzie taka liczba, więc pomnożę ją sobie razy 100.

2:54Zobaczmy w konsoli może co to nam będzie zwracać.

2:56Jak widzisz będę miał takie oto liczby, za

2:58każdym razem inną i będę chciał tutaj powiedzieć, że jeżeli ta wylosowana liczba

3:02jest mniejsza od 50 to chcę zwrócić poprzez return przegrałeś,

3:08natomiast w przeciwnym wypadku nie muszę już robić bloku else.

3:11Chcę zwrócić wygrałeś.

3:13I jak widzisz funkcja może mieć kilka takich return, bo jeżeli jeden z nich się

3:18wykonuje, to kod, który jest poniżej na pewno już się nie wykona.

3:21Ale jak widzisz warunkowo może się wykonać

3:23ten return w zależności od jakiegoś warunku lub ten return.

3:27No i teraz jak byśmy sobie w konsoli

3:28wykonali tę funkcję lottery, raz ją wykonuję,

3:32przegraliśmy, teraz wygraliśmy, no i tak będzie

3:35jak widzisz losowo raz jedno, raz drugie.

3:37Czyli możemy mieć po prostu kilka takich return.

3:41I to w zasadzie tyle, jeśli chodzi o zwracanie wartości funkcji.

3:44Możesz robić dowolne rzeczy i na pewnym etapie możesz zwrócić jakąś wartość.

3:48Natomiast jeżeli w funkcji nie zawarł byś w ogóle czegoś takiego jak return, to

3:52domyślnie ta funkcja po wywołaniu zwróci undefined.

3:55Więc o tym również warto pamiętać.