JavaScript: Parametry funkcji

0:00Teraz pokażę Ci, że funkcje w języku JavaScript mogą przyjmować parametry.

0:04I utworzymy sobie funkcję sayHello i zrobimy tutaj console.log.

0:09Będę chciał zrobić Witaj, ale dodać tutaj również imię, które ktoś przekazał.

0:14A więc tworząc funkcję możemy zdefiniować

0:17jakie parametry będzie ona przyjmowała i ich liczba jest dowolna.

0:20Czyli możemy powiedzieć, że będziemy

0:22chcieli tutaj parametr o nazwie name i ta nazwa jest znowu dowolna.

0:26Traktuj to jak nazwę zmiennej, czyli tutaj

0:28jeżeli chodzi o to jakie znaki są dozwolone,

0:30dokładnie takie same jak w przypadku tworzenia zmiennych.

0:33Natomiast nie używamy tutaj słowa let czy const.

0:36W ten sposób powiedzieliśmy, że przy

0:37wywołaniu tej funkcji będzie można tam przekazać coś i to coś trafi nam pod taką

0:42lokalną zmienną name. Więc będę mógł sobie to tutaj zinterpolować.

0:46W ten sposób stworzyliśmy dynamiczną

0:48funkcję, która będzie mówiła witaj i to co ktoś przekazał.

0:51A więc wywołajmy sayHello

0:53i powiemy sobie tutaj Piotr. A więc to Piotr

0:57zostanie podstawione pod name i w ciele tej funkcji, czyli tylko tutaj w środku,

1:01pomiędzy tymi nawiasami będzie dostępny właśnie ten string Piotr.

1:05Zobaczmy. Oczywiście mamy

1:06Witaj Piotr.

1:08Co ważne w języku JavaScript od wersji ES6 można również tworzyć parametry domyślne.

1:13Oznacza to tylko tyle, że jeżeli ktoś nie

1:15poda tej wartości, to przyjmie ona wartość domyślną.

1:18To co by się stało, gdyby to Piotr nie zostało tutaj przekazane?

1:21Są języki programowania, w których to wygeneruje błąd dlatego, że funkcja

1:25oczekuje parametru a nic tutaj nie podaliśmy.

1:28Natomiast w JavaScript nie ma błędu, ale

1:30taki parametr, który nie został podany przyjmuje wartość undefined.

1:33Więc jeżeli sobie to będziemy chcieli wyświetlić to zobaczymy

1:36Witaj undefined, bo tutaj to undefined na string zostało w ten sposób zamienione.

1:40Natomiast możemy podać po znaku równości

1:42domyślną wartość, czyli ona będzie przyjęta wtedy kiedy ktoś nic nie poda.

1:47I możemy tutaj napisać nieznajomy i zobacz teraz będzie witaj nieznajomy.

1:52Natomiast w momencie, w którym uzupełnimy wartość i podamy np.

1:56Piotr, to oczywiście ona będzie miała pierwszeństwo przed wartością domyślną.

2:00Funkcje oczywiście mogą przyjmować jeszcze więcej parametrów.

2:02Moglibyśmy zrobić funkcję add, która by przyjmowała parametr a i b,

2:06po przecinku je sobie oddzielamy i mogłaby np.

2:09zwracać a+b. I oczywiście przy wywołaniu tej funkcji podali byśmy np.

2:1410 i 5 to by zwróciło 15.

2:17Moglibyśmy to przechwycić np. do zmiennej result.

2:20Od wersji ES6 w JavaScript dostępny jest również tzw.

2:24Rest operator

2:25i będę chciał Ci teraz pokazać jak on działa.

2:27To znaczy możemy utworzyć funkcję, gdzie

2:29nie będziemy definiować, że ona przyjmuje np.

2:31dwa parametry jak a i b, ale chcemy stworzyć taką funkcję, która w

2:34zasadzie może przyjmować dowolną liczbę parametrów.

2:37I chciałbym stworzyć taką funkcję, którą nazwiemy sum i ona pozwoli nam sumować

2:41wszystkie liczby przekazane jako parametry.

2:43Więc nazwijmy ją sum i następnie tutaj zrobimy takie trzy kropki i napiszemy numbers.

2:48Czyli to jest nazwa parametru znowu dowolna.

2:50Możesz go nazywać jak chcesz, ale ja go poprzedzić takimi trzema kropkami

2:54to oznacza, że ten parametr będzie tablicą.

2:57I teraz co w tej tablicy będzie?

2:59Wyświetlmy sobie to numbers, ale oczywiście musimy wywołać tę funkcję sum.

3:03Chodzi o to, że przekazujemy tam dowolną liczbę parametrów np.

3:071, 10, 100, 50 itd.

3:10Ile chcemy parametrów tyle ich

3:12przekazujemy, a przez ten zapis trzech kropek one wszystkie zostaną zamienione na

3:16tablice. Czyli będziemy mieli tablicę tak jakbyśmy ją przekazali tutaj.

3:19Jakbym zrobił tak i tu powiedział numbers, to mówię ta funkcja przyjmuje jeden

3:24parametr, no i został przekazany jeden parametr jako tablica.

3:27Natomiast jeżeli zrobię trzy kropki to

3:29mówię, że tutaj dowolną liczbę parametrów można przyjmować i one staną się tablicą.

3:33Zobaczmy w konsoli.

3:35Jak widzisz mamy taką oto tablicę. Więc

3:37moglibyśmy tutaj w środku zsumować wszystkie te liczby np.

3:40tworząc zmienną result równa się 0 i teraz pętlą for of przeiterować przez całą tę

3:45tablicę i stworzymy sobie tutaj let number of numbers.

3:50To już Ci pokazywałem.

3:51I do tej zmiennej result będziemy dodawać plus

3:54równa się number i na końcu zwrócimy result.

3:58Czyli stworzyliśmy funkcję, którą jeśli wywołamy w ten sposób, to doda nam

4:01wszystkie te liczby, które tutaj się znajdują.

4:04Możemy sobie to wyświetlić w console.log, żeby zobaczyć. Zobacz, mamy wartość 161, ale w

4:10każdej chwili możemy tutaj dodać kolejny parametr i tak to będzie wyglądać.

4:14I co ważne, jeżeli chodzi o ten operator to możemy tutaj podać więcej parametrów.

4:19Czyli mógłbym powiedzieć coś takiego jak np.

4:21firstNumber, a później podać coś takiego.

4:24To by oznaczało, że pod firstNumber trafi nam jedynka, a wszystkie pozostałe

4:28parametry zostaną zamienione na tablicę i zapisane pod numbers.

4:31Więc czasami może to być przydatne.

4:33I wiedz o tym, że tu nie musi być tylko jeden taki parametr.

4:37Może być to zrobione w ten sposób.

4:39I ostatnią rzeczą, którą Ci pokażę jest tzw. Destructuring

4:41parametrów, również dostępny od ES6.

4:44Wygląda to w ten sposób, że np.

4:46utworzyli byśmy sobie funkcję displayPosition

4:48i będzie to taka funkcja, która by przyjmowała jakiś obiekt z pozycją.

4:53Jeżeli zrobiłbym to w ten sposób to mógłbym wyświetlić np.

4:57pozycja myszy to i tu byśmy sobie zinterpolowali pos.x przecinek pos.y

5:06No i teraz do tej funkcji displayPosition

5:09musielibyśmy przekazać obiekt, który miałby x i y.

5:12Załóżmy, że tam x to będzie np.

5:1310 i y to będzie 100.

5:16Zauważ, że mógłbym oczywiście ten obiekt

5:18zapisać wcześniej zmiennej i ją tutaj podstawić, ale

5:21również mogę go tutaj przekazać jak najbardziej bezpośrednio.

5:24To oznacza, że cały ten obiekt znajdzie się pod pos, no i wyświetlimy pos.x i pos.y.

5:29Pokazałem Ci to w stary sposób.

5:31Natomiast jeżeli wiemy, że do funkcji będzie przekazany jakiś obiekt, który ma

5:34różne właściwości, to możemy od razu dokonać tak zwanego

5:38destructuringu i będzie to wyglądać tak, że tutaj podstawimy jakby podobny obiekt, a tak

5:43naprawdę nie jest to obiekt i napiszemy x, y.

5:46To sprawi, że przekazany do tej funkcji obiekt taki jak ten zostanie rozłożony i

5:50jego x zostanie zapisane pod zmienną X, a jego y pod zmienną y i wewnątrz tej

5:56funkcji pod x i y będziemy mieli dokładnie te wartości.

5:59Wtedy już się nie odwołujemy do tego

6:00całego obiektu, ale robimy coś takiego. Zobacz, efekt jest dokładnie ten sam, a my

6:06dokonaliśmy tak zwanego destructuringu parametrów.

6:09To zatem tyle jeżeli chodzi o parametry funkcji.

6:11Jak widzisz, można je przekazywać w różny sposób i przekazywać ich dowolną liczbę.