+ Cześć!
+(naciśnij spację, żeby kontynuować)
+ +Funkcje
+
+ Funkcje
+Dziś poznamy lepiej funkcje. Są one bardzo ważną częścią języka JavaScript.
+Definicja:
+Język JS jest określany jako: obiektowy, funkcyjny i imperatywny.
+Funkcyjność języka to coś więcej niż tylko obecność funkcji.
+Ale o tym za chwilę.
+Czym jest funkcja?
+Jeżeli byłyście na warsztacie, to używałyście funkcji.
+Funkcje to po prostu nazwane bloki kodu, które można wywoływać wielokrotnie.
+Mogą przyjmować parametry.
+Mogą również zwracać wartość.
+Czym jest funkcja?
+
+ Anatomia funkcji
+Zobaczmy, jak będzie wyglądała prosta funkcja dodająca 2 liczby:
+function sum(x, y) {
+ return x + y
+}Po wywołaniu:
+sum(2, 3) // zwróci 5Funkcja nazwana
+Tak zdefiniowaną funkcję nazywamy funkcją nazwaną:
+function sum(x, y) {
+ return x + y
+}Ma ona nazwę, po której możemy się do niej odwołać.
+Parametry funkcji
++ Parametry (czasem zwane argumentami) funkcji to zestaw danych, które funkcja + ma wziąć pod uwagę podczas wykonywania. +
+
+ Parametry mogą być wartościami, tablicami, obiektami lub funkcjami. +
+
+ To właśnie możliwość podania funkcji jako parametru sprawia, że JavaScript + staje się językiem funkcyjnym. +
+
Rozważmy następujący przykład (możecie sprawdzić to w konsoli):
+function sum(x, y) {
+ return x + y
+}
+
+function doMath(x, y, operation) {
+ return operation(x, y)
+}
+
+doMath(2, 3, sum);Funkcja doMath przyjmuje 3 parametry:
-
+
- wartość
x
+ - wartość
y
+ - oraz operację do wykonania na tych liczbach
operation
+
To prowadzi nas do...
+Funkcja anonimowa
+Możemy również mieć funkcję anonimową:
+function (x, y) {
+ return x + y
+}Ale nie odwołamy się do niej po nazwie (bo jej nie ma).
+Funkcja anonimowa
+Po co więc nam funkcje anonimowe?
+Możemy je przypisać do zmiennej:
+let sum = function (x, y) {
+ return x + y
+}
+
+sum(2, 3) // zwróci 5Ale to wiele nie różni się od funkcji nazwanej.
+Funkcja anonimowa
++ Prawdziwy użytek można zrobić z funkcji anonimowych przy + przekazywaniu jej jako parametr do innej funkcji.
+Funkcja anonimowa
+Zobaczmy jak będzie wyglądał poprzedni przykład:
+function doMath(x, y, operation) {
+ return operation(x, y)
+}
+
+doMath(2, 3, function (x, y) { return x + y });Funkcja jako parametr
+Bardzo często spotyka się przekazywanie funkcji jako parametru.
++ Taki sposób programowania sprawdza się przy funkcjach, które muszą wykonać + operacje trwające trochę dłużej. Po wykonaniu swojej logiki, funkcja wywołuje + przekazaną funkcję w parametrze. +
++ Wówczas tą funkcję z parametru nazywa się callbackiem. +
+Callback
+Możemy sobie wyobrazić następującą, przykładową funkcję, która pobiera dane użytkownika:
+
function loadData(callback) {
+ // logika trwająca
+ callback(data) // przekazanie wyniku logiki
+}Następujący kod uruchomimy o tak:
+
loadData(function (data) {
+ console.log(data)
+})Callback
+Na warsztacie mieliśmy coś podobnego.
+
Podpięcie się na zdarzenie kliknięcia
+
addEventListener('click', function () { ... })Automatyczne wykonanie kodu po określonym czasie
+
setTimeout(function () { ... }, 3000)Callback
++ Żeby callbacki miały sens, musimy zrozumieć co to jest kod synchroniczny + oraz asynchroniczny. +
+Tak, brzmi to nieco skomplikowane, ale tak naprawdę nie jest :-)
+Kod synchroniczny
+To taki, jaki pisałyście do tej pory
+
console.log('A')
+console.log('B')
+console.log('C')
+console.log('D')W jakiej kolejności wypiszą się litery?
+
A, B, C, D
+
Kod synchroniczny
+console.log('A')
+console.log('B')
+console.log('C')
+console.log('D')Kolejność wykonania instrukcji jest taka sama jak zapisana w kodzie.
+
Dlatego nazywamy go synchronicznym.
+
Kod asynchroniczny
+Przanalizujcie poniższy kawałek kodu
+
console.log('A')
+setTimeout(function() {
+ console.log('B')
+ console.log('C')
+}, 1000)
+console.log('D')W jakiej kolejności pojawią się litery? Dlaczego?
+
A, D ... B, C
+Kod asynchroniczny
++ Taki kod nazywamy asynchronicznym, ponieważ wykona się w innej kolejności, + niż ta w której został zapisany. +
+
+ Poza setTimeout i addEventListener, jest znacznie
+ więcej asynchronicznych funkcji w JavaScripcie.
+
+
+ Wszelkie interakcje użytkownika ze stroną, wysyłanie i pobieranie danych itp, + to wszystko są operacje asynchroniczne. +
+Czemu asynchroniczność
+Żeby jeden kawałek kodu nie był zablokowany przez inny.
+Gdyby nie było asynchroniczności, jak działał by poniższy kod?
+
element1.addEventListener('click', function () {
+ console.log('Element 1 kliknięty')
+})
+element2.addEventListener('click', function () {
+ console.log('Element 2 kliknięty')
+})
+ Najpierw użytkownik musiałby kliknąć w element1, a potem w element2.
+ Wszelkie inne scenariusze byłyby nieoprogramowane.
+
+
TU jakieś ćwiczenie
+Metody obiektów
++ Jeśli byłyście na poprzednim follow-upie, to zapewne pamiętacie obiekty. +
++ W skrócie obiekt to zbiór nazwanych zmiennych: +
+ +let obj = {
+ name: 'Kasia',
+ age: 32,
+ job: 'Frontend Developer'
+};
+
+console.log( obj.name ); // Wypisze 'Kasia'Metody obiektów
++ Metody, to funkcje wewnątrz obiektów. +
++ Możemy je utworzyć za pomocą funkcji anonimowej. +
+let obj = {
+ name: 'Kasia',
+ age: 32,
+ job: 'Frontend Developer',
+ sayHi: function () {
+ console.log('Hi!')
+ }
+};
+
+obj.sayHi(); // Wypisze 'Hi!'Gotowe na coś ambitnego? :-)
+Funkcja zwracająca funkcję
+Funkcja zwracająca funkcję
+Tak jak wiemy, funkcja może zwrócić dowolną wartość (dowolny typ).
++ Funkcja również jest typem i może być przypisana + do zmiennej, przekazana jako argument itp... +
++ Łącząc powyższe stwierdzenia, dochodzimy do wniosku, że funkcja może zwrócić funkcję. +
+Funkcja zwracająca funkcję
+Zilustrujmy to zwracając funkcję anonimową (ale można też użyć funkcji nazwanej).
+function myFunction() {
+ return function () {
+ console.log('Hurra!')
+ }
+}
+Ok, jak teraz sprawić, aby pojawił się napis Hurra! w konsoli?
+Czy zadziała coś takiego?
+myFunction()Nie. Dlaczego?
+ +Co musimy zatem zrobić?
+myFunction()()Czas na małe zadanie ;-)
+Pamiętacie naszą funkcję sum?
function sum() {
+ return x + y;
+}
+
+sum(2, 3) // zwróci 5
+ Spróbujcie napisać nową funkcję sum, która będzie działać w
+ następujący sposób:
+
sum(2)(3) // zwróci 5 Rozwiązanie
+function sum(x) {
+ return function(y) {
+ return x + y
+ }
+}
+
+sum(2)(3) // zwróci 5Zastosowania
+Funkcja zwracająca funkcję jest bardzo często spotykanym wzorcem.
++ Pozwala na przykład dodać parametr do callbacka, którego callback zazwyczaj nie przyjmuje. +
++ Zobaczmy jak to ma miejsce w przypadku dodaniu callbacka obsługującego kliknięcie. +
+Zwyczajowo, użycie addEventListener wygląda tak:
function welcome() {
+ console.log('Hej');
+}
+
+button.addEventListener(welcome);Co zrobić, żeby móc dodać parametr (np. imię) do wywołania funkcji?
+
+ Funkcja welcome jest wywoływana automatycznie wewnątrz
+ addEventListener, więc do wywołania nie mamy dostępu.
+
Używając funkcji zwracającej funkcję, łatwo możemy rozwiązać ten problem:
+function welcome(name) {
+ return function () {
+ console.log('Hej, ' + name);
+ }
+}
+
+button.addEventListener(welcome('Zosia'));Można i bardziej
+W razie potrzeb, możecie robić więcej zagnieżdżeń zwracanych funkcji:
+function madness() {
+ return function () {
+ return function () {
+ return function () {
+ console.log('This is madness!');
+ }
+ }
+ }
+}
+
+madness()()()() // Wypisze 'This is madness!';Łączenie wywołań funkcji (function chaining)
+
+ Łączenie wywołań funkcji
++ Możemy łączyć wiele wywołań metod i funkcji w + jeden logiczny ciąg (łańcuch) wywołań. +
++ W anglojęzycznej literaturze nazywane to jest function chaining. +
+Jak to wygląda?
+Najlepiej zobaczyć to w praktyce na przykładzie tablicy.
++ Przypomnienie z poprzedniego follow-upu: Tablica to po prostu + zmienna mogąca przechowywać wiele wartości, do których dostajemy się + za pomocą numerów (od 0, nie od 1) +
+let myArray = ['Asia', 'Kasia', 'Basia'];
+
+console.log( myArray[0] ); // Wypisze 'Asia'Metody
++ Tablica jest specjalnym przypadkiem obiektu, więc jak każdy obiekt + posiada szereg metod. +
++ Niektóre z nich przyjmują jako argument funkcję do wykonania operacji. +
+Metoda filter
+ + Zwraca nową tablicę z odfiltrowanymi danymi spełniającymi + podaną funkcję. +
+let example = [9, 2, 4, 7, 1, 3, 6, 8, 5];
+
+let filtered = example.filter(function (item) {
+ return item > 5
+})
+
+console.log( filtered ); // [9, 7, 6, 8]sort i shift
+
+ Metoda sort pozwala posortować zawartość tablicy.
+ Podobnie jak filter, zwraca nową tablicę, ale nie
+ wymaga podawania argumentu.
+
+ Natomiast metoda shift pozwala na pobranie pierwszej
+ wartości z tablicy (aczkolwiek usuwa ją z tablicy).
+
Łączenie metod
+Teraz możemy połączyć wszystkie 3 metody.
+
+ Jeżeli połączymy w następującej kolejności: sort, filter, shift
+ - dostaniemy pierwszy (najmniejszy) element większy od 5. Czyli 6.
+
+
Łączenie metod
+Pierwsze podejście
+let example = [9, 2, 4, 7, 1, 3, 6, 8, 5];
+
+let sorted = example.sort()
+let filtered = sorted.filter(function (item) {
+ return item > 5
+})
+let first = filtered.shift()
+
+console.log( first ); // 6Problem
+Główny problem z tym podejściem: Produkujemy dużo zmiennych, które później się nie przydają.
++ Można jednak zauważyć, że 2 pierwsze metody zwracają tablice. Nie musimy ich + więc przypisywać do zmiennych, możemy od razu wywoływać kolejne metody, + tworząc tym samym łańcuch (chain) wywołań. +
+Łączenie wywołań
+let example = [9, 2, 4, 7, 1, 3, 6, 8, 5];
+
+let first = example.sort()
+ .filter(function (item) {
+ return item > 5
+ })
+ .shift()
+
+console.log( first ); // 6Łączenie wywołań
++ Tak długo, jak metoda zwraca obiekt (lub tablicę), można kontynuować + łańcuch wywołań metod. +
++ Trzeba uważać bardzo na to, co zwracają metody. Jeżeli metoda zwróci + inny obiekt, niż ten który się spodziewacie, możecie próbować na nim + wywołać nieistniejącą metodę, co zakończy się błędem. +
+ +Łączenie wywołań
+example.sort() // zwraca tablicę
+ .filter(...) // zwraca tablicę
+ .shift() // zwraca liczbę
+ Metoda shift zwróci nam liczbę, wiec nie możemy dalej
+ łączyć metod tablicy.
+
+ Ale możemy użyć jakiejś metody z repertuaru + metod liczbowych. +
+Ćwiczenie na podsumowanie chainowania lub/i całego follow-upu.
+Dzięki za wspólnie spędzony czas i do zobaczenia!
+
+ 
+
+
+ Ta prezentacja jest dostępna na
+
+ licencji Creative Commons Uznanie autorstwa-Użycie niekomercyjne-Na tych
+ samych warunkach 3.0 Polska
+ .
+
+