Podstawy Programowania: Parametry i zwracanie wartości

0:00Skoro wiesz już jak tworzyć funkcje i że

0:02można w nich zawrzeć dowolną ilość kodu a następnie taką funkcję wywołać by ten kod

0:08się wykonał to teraz pokaże Ci, że funkcje mogą być dużo bardziej przydatne.

0:12Po pierwsze dlatego, że mogą zwracać

0:14wartości a po drugie dlatego, że mogą przyjmować parametry. Więc funkcja może

0:18stać się tak naprawdę pewnego rodzaju szablonem, do którego możemy przekazać dane,

0:23te dane zostaną w jakiś sposób przetworzone i ta funkcja nam coś zwróci.

0:27żeby to pokazać to na początek utworzymy

0:30jeszcze prostą funkcję, której nadał nazwę Hello.

0:33Ona tutaj nic nie przyjmuje ale będę

0:35chciał nie tylko tak jak wcześniej w console.logu wykonać takie polecenie w tej

0:39funkcji ale chciałbym żeby ona zwróciła nam string.

0:43Więc użyjemy słowa kluczowego return aby

0:45powiedzieć, że z tej funkcji chcemy coś zwrócić.

0:48I tutaj powiemy Hello I teraz co to oznacza.

0:51Stworzyliśmy taką funkcję po zapisanie nic

0:53się nie dzieje nawet jeśli wykonamy taki program,

0:55zauważ, że nadal nic się nie dzieje.

0:57Ale jeżeli wywołaliśmy tą funkcję to ona zwróciła wartość Hello.

1:02Tutaj można zwracać wszystko. Zmienne

1:04gdybyśmy coś mieli pod zmienną to można zwrócić wartość, tablice, wszystkie rzeczy,

1:09które w funkcji mogą być zawarte można zwrócić z tej funkcji.

1:12Ale co to oznacza, że coś jest zwracane.

1:15Otóż, że możemy z tego skorzystać jak z wartości.

1:18To oznacza, że cały ten zapis

1:20będzie tutaj zamieniony na Hello bo ta funkcja to zwraca.

1:24Więc gdybyśmy utworzyli stałą np.

1:26res i wywołali po tej stronie funkcję hello,

1:30ta funkcja zwraca taki string to byłoby to dokładnie tak samo jak byśmy

1:35tutaj wewnątrz tego res mieli właśnie taki ciąg.

1:38Zobacz. Jeżeli teraz w console.logu będę chciał wyświetlić zawartość res, zobaczymy

1:43Hello.

1:43A więc z funkcji za pomocą takiego słowa można coś zwracać.

1:47Teraz pokażę Ci, że funkcja może również

1:50przyjmować pewne parametry. Więc jeżeli utworzymy nową funkcję, którą nazwę

1:54add, pamiętaj cały czas, że te nazwy są dowolne tak jak w przypadku zmiennych,

1:58add czyli dodaj,

2:00i tutaj mogę powiedzieć, że ta funkcja powinna przyjmować pewne parametry.

2:04To może być jeden parametr, znowu możesz je

2:06nazywać dowolnie z tego powodu, że to jest tak jak ze zmiennymi. To będą takie lokalne

2:10zmienne. Więc możesz to nazwać liczba 1 i potem liczba 2 itd.

2:15Ja to nazwę a i

2:16to by oznaczało, że ta funkcja przyjmuje jeden parametr, natomiast po przecinku

2:20możemy powiedzieć b lub dowolną inną nazwę.

2:23To oznacza, że ta funkcja przy swoim wywołaniu przyjmie dwa parametry.

2:27Nazwaliśmy je a i b.

2:29A to oznacza tylko tyle, że wewnątrz tej funkcji będziemy mieli dwie takie lokalne

2:33zmienne, które się nazywają po prostu a i b. I teraz będę chciał zrobić rzecz

2:37następującą, będę chciał zwrócić z tej funkcji dodawanie a + b.

2:44Wyobraź sobie, że a to jest jakaś zmienna,

2:46gdybyśmy tego tutaj nie mieli ale napisali byśmy const a = 1, const b = 3

2:54no to widzisz, że mielibyśmy po prostu

2:56jeden plus trzy to by zostało zamienione na 4 i zwrócone z tej funkcji.

3:00Ale jeżeli tutaj nie mamy takich oto stałych tylko przyjmujemy parametry w ten

3:04sposób to oznacza, że przy wywoływanie tej funkcji musimy je podać.

3:08I teraz jak to zrobić. Zapiszemy sobie to znowu bo skoro ta funkcja coś zwraca to chcemy ten

3:12wynik zapisać do stałej res i wywołamy funkcje add przekazując jej np.

3:181, 3.

3:21Zauważ, że to oznacza, że wartość 1 chcemy

3:25podstawić pod a, a wartość 3 pod b. I wewnątrz tej funkcji

3:29te zmienne a tak naprawdę są to parametry

3:32ale dokładnie tak jak zmienne należy je traktować, będą miały takie wartości 1 +3

3:37więc jeżeli to dodamy to ta funkcja zwróci nam 4. Zobaczmy to sobie w konsoli.

3:43Zauważ mamy wynik 4 więc stworzyliśmy funkcję, która jest uniwersalna bo możemy

3:48przy jej wywoływaniu podawać sobie dowolne wartości. Mogę powiedzieć np.

3:515 i 6. i to nam zwróci 11

3:55więc to jest potęga funkcji, że my w funkcji możemy mieć dowolny kod, pętle,

4:00instrukcje warunkowe cokolwiek i możemy tej funkcji przekazywać

4:03najróżniejsze parametry. I to co jest bardzo ważne to

4:06wcale nie musimy przekazać liczb.

4:08Oczywiście ta funkcja skupia się na tym że

4:10je dodaje, ale wszystko tutaj można przekazać co w języku JavaScript jest

4:14reprezentowalne więc możesz tu ciągi znaków przekazywać, tablice itd.

4:17Jeśli byśmy tu przekazali tablice to pod a po prostu znalazłaby się tablica. Tak samo

4:22jak wcześniej mieliśmy ją zapisaną w zmiennej.

4:26Stwórzmy sobie jakąś bardziej jeszcze przydatną funkcję np.

4:29taką, która nam zwraca wartość absolutną liczby.

4:32Chodzi o to, że jak podamy na przykład -10 to chcemy żeby zwróciło 10.

4:35Jak podamy 10 to też żeby to było 10 czyli po prostu wartość dodatnią takiej liczby.

4:41Więc stworzymy funkcję function, którą nazwiemy abs jak wartość absolutna

4:46i ona będzie przyjmować parametr, który nazwę value.

4:48Cały czas tutaj uczulał na to, że ta nazwa

4:51jest dowolna, możesz ją nazwać jak chcesz i te nazwy

4:53tutaj też są dowolne bo są to tak jakby

4:55nazwy zmiennych, które ty tworzysz. I teraz co będziemy chcieli zrobić. Tu

4:59będziemy chcieli mieć troszkę więcej logiki niż w tej funkcji powyżej,

5:03mianowicie będziemy chcieli sprawdzić czy przekazana przez kogoś do tej funkcji

5:07wartość jest mniejsza od zera czyli czy jest to wartość ujemna.

5:12Jeżeli tak to będziemy ją chcieli zamienić na wartość dodatnią.

5:16I teraz jak to zrobić.

5:17Jeżeli ktoś by nam przekazał,

5:19tutaj mogę to policzyć na przykład -5

5:21to jak to zamienić na wartość dodatnią? otóż trzeba to pomnożyć przez -1.

5:25I to da nam wtedy piątkę.

5:27Więc w takim przypadku jeżeli wartość jest

5:29mniejsza od zera chcemy zwrócić, zróbmy tutaj return w tej funkcji

5:34value razy -1. Natomiast w przeciwnym wypadku moglibyśmy powiedzieć else jeżeli

5:40ktoś przekazał wartość, która nie jest mniejsza od zera np.

5:43piątkę no to wartością absolutną będzie

5:46również piątka a więc wtedy zwracamy nie zmodyfikowaną wartość w taki oto sposób.

5:50Natomiast teraz Ci powiem o jednej bardzo ważnej rzeczy, nie musimy tu mieć bloku else.

5:55Dlaczego? Dlatego, że polecenie return kończy funkcję. Podobnie jak w przypadku

6:00pętli mieliśmy break to to zakończało funkcję czy continue, może pamiętasz

6:05przechodziło do kolejnej iteracji pętli i nic co jest poniżej się nie wykonywało.

6:08Więc jeżeli tutaj ten warunek będzie

6:10prawdziwy i powiemy return to to słowo sprawia, że ta funkcja zwraca wartość, którą

6:15tutaj podaliśmy i na pewno nie wykona już nic co jest poniżej tego słowa.

6:19A więc w takim przypadku jeśli return się wykona

6:22nie ma problemu, ten drugi się nie wykona na pewno. Natomiast jeżeli wartość nie

6:25będzie mniejsza od -1 ta linijka się wtedy nie wykona i wykona się ta linijka.

6:31Możemy teraz bez przechwytywania tego do zmiennej czy stałej od razu powiedzieć

6:34console.log wywołać sobie naszą funkcję i podać jej wartość np.

6:38-10, zapiszemy

6:40i widzimy tutaj, że jest to 10 Więc wszystko działa poprawnie.

6:44I teraz znowu tu może to wyglądać dziwnie

6:46ale należy na to patrzeć tak, że tu wywołaliśmy funkcję i to co ona zwróci czyli

6:5110 to dopiero przekazaliśmy do console.loga.

6:54Mogliśmy to oczywiście przechwycić w zmiennej np.

6:57res2, wtedy mielibyśmy w tej zmiennej taką wartość i moglibyśmy ją tutaj podstawić.

7:02To jest dokładnie tak samo ale jeżeli tej zmiennej nie potrzebuje czy tej stałej

7:05żeby z niej korzystać później to mogę bezpośrednio do console.loga ale nie tylko,

7:10oczywiście do każdej innej funkcji również to przekazać. Język JavaScript jakby tutaj o to nie

7:15dba. Nie ma znaczenia, po prostu to zostanie zamienione na wartość jaką zwraca ta funkcja

7:19i następnie zostanie to podstawione do console.loga.

7:23I jeszcze jedna bardzo ważna uwaga. W

7:25przypadku języka JavaScript jeżeli funkcja by nic nie zwróciła

7:29czyli gdybyśmy powiedzieli po prostu return i nic tutaj nie podali, albo jeżeli

7:33by w ogóle nie było tego return, to wtedy funkcja domyślnie zwraca undefined.

7:37Czyli gdybyśmy wywołali taką funkcję i podali jej wartość 10

7:40wiemy, że ten warunek się tutaj nie wykona czyli nie zwrócimy 10 razy -1

7:46więc przejdziemy niżej i skoro ta funkcja nic nie zwraca to domyślnie zwraca

7:50undefined. I o tym warto pamiętać.

7:52Zazwyczaj jednak powinniśmy z funkcji coś zwracać.

7:54Oczywiście to zależy od tego jaka to jest

7:56funkcja ale zapamiętaj, że jak nic nie zwrócimy to funkcja zwraca

7:59undefined lub jeżeli zrobimy return i nic tutaj nie podamy.

8:03Ok. Na koniec chciałbym Ci pokazać jeszcze

8:05jedną rzecz, a mianowicie przerobić jeden z przykładów, który mieliśmy na funkcję żebyś

8:09jeszcze lepiej zobaczył do czego te funkcje cały czas mogą nam się przydawać.

8:13Więc ja tutaj teraz wkleję fragment znanego nam już kodu,

8:17wrzucę to tutaj i zrobię trochę miejsca w ten sposób.

8:21Być może to pamiętasz może jeszcze tutaj

8:23zrobimy trochę miejsca, w przypadku pętli pokazywałem Ci jak można w

8:27tablicy wyszukać czy znajduje tam się zero.

8:29Oczywiście to było po to żeby pokazać Ci jak działa break.

8:32Mamy trochę prostsze sposoby na to aby wyszukiwać elementów w tablicach, ale to

8:36nie jest teraz istotne. Ale mieliśmy jakąś tablicę

8:39i potem tworzyliśmy taką zmienną containsZero sprawdzaliśmy czy to zero tam jest

8:44i na tym etapie tutaj wywołania w containsZero

8:49mieliśmy true lub false czy w tej tablicy znajduje się zero.

8:53Pokażę Ci teraz jak możemy to wszystko

8:55zawrzeć w reużywanej funkcji i wywoływać ją tyle razy ile chcemy.

9:00Zobacz wszystko to co tutaj mamy ja sobie wytnę

9:03oprócz naszej tablicy i stworzę funkcję, którą nazwiemy po prostu contains.

9:09I ta funkcja będzie przyjmowała dwa parametry.

9:11Pierwszy to będzie tablica więc ja ją

9:13nazwę arr ale możesz to nazywać jak chcesz,

9:16a druga to będzie rzecz, której szukamy czyli np.

9:20może to nazwiemy po prostu item jak rzecz.

9:22Czyli do tej funkcji będziemy podawać

9:24tablice taką jak wyżej i rzecz, której szukamy w tej tablicy.

9:28Teraz jeżeli to tutaj wstawie

9:30sformatujemy tu trochę lepiej, to znowu utworzymy sobie tutaj zmienną containsZero,

9:36w zasadzie nie nazwiemy jej containsZero tylko

9:39może po prostu found czy zostało coś znalezione.

9:43Teraz będziemy chcieli iterować no właśnie po czym? Już nie po numbers

9:47ale po tym co nam ktoś przekaże czyli będzie to arr

9:52tego console.loga tu nie musimy robić.

9:55Tutaj też to musimy podstawić, podmienić

9:57na arr, nie martw się za moment to wytłumaczę i containsZero zamienimy na found.

10:03Na końcu będę chciał zrobić return found.

10:06Czyli żeby zwrócić wartość tej zmiennej ona będzie miała albo false albo tutaj true.

10:11I po co to numbers nam jest potrzebne? Po to, że

10:14teraz będziemy chcieli zrobić sobie coś takiego np.

10:17rezultat trzeci i wywołamy naszą funkcję contains

10:21i zobacz, że ona przyjmuje dwa parametry.

10:24Pierwszy jest to tablica, w której chcemy szukać więc możemy tą tablicę tu wpisać

10:27ręcznie albo skoro mamy ją pod stałą numbers to ją tutaj przekażmy, numbers

10:33przecinek i musimy podać drugi parametr a więc rzecz, której szukamy.

10:36My wcześniej szukaliśmy czy w takiej

10:38tablicy znajduje się zero. Więc podam tutaj zero. Zapisałem to w res3

10:43i jeśli zrobię console.log(res3) mamy true bo w tej tablicy zero się znajduje.

10:48Natomiast teraz będę chciał Ci jeszcze

10:49wytłumaczyć co tutaj się tak naprawdę stało.

10:52Na tym etapie możesz zapomnieć tutaj o tym numbers bo wcale nie musi być tutaj,

10:56to nie jest takie istotne,

10:57tutaj zrobię również trochę miejsca,

11:00zapiszmy to i teraz tak, wywołujemy funkcje contains przekazując jej tablicę.

11:05Ta tablica wpada pod nazwany parametr arr,

11:08który my nazwaliśmy, natomiast zero wpada pod item i teraz widzę jeszcze tutaj błąd bo my

11:12tutaj porównywaliśmy do zera a żeby to było dynamiczne trzeba porównać do item.

11:17Więc jeszcze raz,

11:18numbers to jest tablica, którą tu mamy,

11:20ona znajdzie się pod arr.

11:22Czyli w całej tej funkcji w środku pod zmienną arr będzie numbers bo to właśnie

11:27przekazaliśmy a pod item będzie zero, które przekazaliśmy. I tu wykonujemy sobie to

11:32sprawdzenie, które mieliśmy wcześniej więc wyszukujemy

11:34czy w tej przekazanej tablicy znajduje się item.

11:37Jeżeli tak to zmienną found ustawiamy na true.

11:40Na samym końcu zwracamy zmienną found czyli

11:43tak naprawdę zwracamy wartość true lub false. I stworzyliśmy dzięki temu tablicę

11:47czy w zasadzie funkcję, która jest bardzo dynamiczna bo możemy przekazać jej tablicę

11:52i zapytać czy tam jest zero i nam zwróci true lub false.

11:55Ale równie dobrze możemy zapytać czy tam

11:57jest szóstka zmieniając tylko ten jeden parametr.

12:00Jeżeli zapisze nadal jest true ale jak

12:02zapytam czy jest tam 99 zwróci mi false bo nic takiego tam nie ma.

12:06Zauważ, że w ten sposób jeżeli zapomnimy o tej funkcji ale mamy ją zdefiniowaną

12:10możemy łatwo sprawdzić. Wywołujemy contains podajemy tablicę i rzecz, której szukamy i

12:16całe to wyrażenie zwróci nam tutaj do zmiennej true lub false w zależności od tego

12:21czy w tej tablicy znajduje się taka oto liczba, którą podaliśmy.

12:25Jak widzisz funkcje są bardzo przydatne bo pozwalają nam również przyjmować jakieś

12:29parametry wykonywać na nich operacje i je zwracać.

12:32I w funkcji możemy zawrzeć wszystko co do tej pory robiliśmy czyli pętle tworzenie

12:36zmiennych, takich lokalnych tutaj wewnątrz, instrukcje warunkowe itd.

12:40I funkcje pozwalają nam zapisać kawałek

12:43logiki i używać go ponownie. Mogliśmy raz tutaj użyć contains, w kolejnej linijce

12:47mógłbym podać inną tablicę albo tą samą i

12:50zapytać czy tam jest jakaś inna liczba itd.

12:53To jednak jeszcze nie wszystko bo w

12:54kolejnej lekcji porozmawiamy sobie o zakresie zmiennych.