Funkcje. Argumenty, funkcje wewnątrz funkcji | Funkcja dodająca zadanie addTask()

Wcześniej dodawaliśmy nasze zadania używając tego kodu: tasks.push("jakieś tam zadanie"). Zwróć uwagę na to, że "jakieś tam zadanie" znajduje się w nawiasach funkcji, w związku z tym "jakieś tam zadanie" zostało przekazane do metody push() jako argument (pewien zasób/ wartość/ informacja), który zostanie przez tę funkcję wykorzystany.

Nasza (na razie jedyna) funkcja showTasks() nie ma żadnych argumentów w nawiasach, ponieważ ich nie potrzebuje - ma dostęp do zadań, gdyż zmienna tasks istnieje już w naszym kodzie i zawsze mamy do niej dostęp z poziomu każdej funkcji (innymi słowy, jest zmienną globalną). Czyli wiemy już, że funkcja może w ogóle nie mieć żadnych argumentów.

Wyobraźmy natomiast, że chcemy dodać nowe zadanie, które nie istnieje nigdzie w kodzie w postaci zmiennej, wiemy także, że dysponujemy funkcją o nazwie addTask() (za chwilę ją napiszemy, ale na razie wyobraźmy, że ktoś już ją napisał). Jak możemy to zrobić?

W tym przypadku należałoby tej funkcji przekazać pewną informację (w naszym przypadku będzie to nowe zadanie), czego możemy dokonać poprzez wpisanie naszego zadania w nawiasach tej funkcji w następujący sposób: addTask("zrobić kawę po raz drugi").

Chciałbym też zauważyć, że taki kod zadziała tylko w tym przypadku, jeśli funkcja addTask() oczekuje jakiegoś argumentu, czyli została napisana w sposób, przedstawiony poniżej:

function addTask(newTask) {
    // w poniższej linijce dodajemy zadanie do listy zadań,
    // w taki sam sposób, jak robiliśmy to wcześniej:
    tasks.push(newTask);

    // dodatkowo wyświetlamy komunikat w konsoli o nowo dodanym zadaniu:
    console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

    // wyświetlamy zaktualizowaną pełną listę zadań,
    // używając zdefiniowanej wcześniej funkcji showTasks():
    showTasks();
}

Przeczytaj ten powyższy kod i spróbuj najpierw intuicyjnie zrozumieć, co się w nim dzieje oraz dopisz go do pliku todo-app na samym końcu (ale przepisz własnoręcznie, nie kopiuj tego kodu!). No i oczywiście zapisz zmiany skrótem Ctrl+S, a potem kliknij ikonkę trójkąta lub kolejny skrót Ctrl+Enter, by kod zadziałał w przyszłości w konsoli.

Po pierwsze, zwróć uwagę, że po nazwie funkcji addTask w nawiasach mamy zawarty argument newTask. Tak naprawdę newTask jest zmienną, która jeszcze nie ma żadnej przypisanej wartości, czyli jest to "puste podpisane pudełko", swego rodzaju pośrednik, do którego dopiero później coś włożymy - a dokładnie w momencie wywołania funkcji w ten sposób: addtask("to zadanie jest właśnie tą wartością, która zostanie przypisana do argumentu newTask").

Mimo że w samej definicji funkcji addTask argument newTask nie ma żadnej wartości, to możemy go wykorzystać w kodzie funkcji tak, jakby tę wartość miał (co też robimy w dalszej części kodu funkcji: tasks.push(newTask) - tak naprawdę mówimy przeglądarce, że cokolwiek by się znalazło z zmiennej newTask, powinno zostać dodane do tasks).

Innymi słowy, wyobraź sobie, że mówisz koleżance z biura: "Na biurku leży żółty segregator, który na razie jest pusty, ale później przyjdzie sekretarka i włoży do tego segregatora stertę dokumentów. Wtedy weź segregator i włóż go do szafy". Koleżanka nie musi wiedzieć, jakie dokumenty znajdą się w segregatorze. Wie tylko, że jak się tam znajdą, trzeba odłożyć segregator w określone miejsce. Gdyby wspomniana koleżanka bardzo się nudziła, mogłaby wziąć pusty segregator i włożyć go do szafy, mimo że nie ma w nim żadnych dokumentów, by przećwiczyć tę czynność na przyszłość.

Po drugie, zauważ, że w funkcji addTask() nie tylko dodajemy zadanie do listy, ale także wyświetlamy komunikat w konsoli o tym, że zostało dodane nowe zadanie, przy czym wyświetlamy także samo zadanie. Dzieje się tak dlatego, że tym razem przekazaliśmy console.log() zarówno pewną wiadomość: "Do Twoich zadań zostało dodane nowe zadanie:", a potem po przecinku przekazaliśmy samą zmienną, reprezentującą nowe zadanie, w związku z czym konsola wyświetli wiadomość oraz wartość zmiennej przechowującej nowe zadanie (treść nowego zadania):

console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

Po trzecie, po dodaniu nowego zadania i wyświetleniu komunikatu, wywołujemy funkcję showTasks(), którą wcześniej napisaliśmy, dzięki czemu konsola automatycznie wyświetli zaktualizowaną listę zadań z nowo dodanym zadaniem na końcu. Widzisz, mówiłem, że funkcje przydają się do ponownego wykorzystania! W funkcji addTask() zawarliśmy i wywołujemy inną naszą funkcję showTasks() (a w sumie wywołujemy też wbudowaną funkcję console.log()).

Być może nawet nie pamiętasz już, co dokładnie znajdowało się w funkcji showTasks(), ale na pewno wiesz, co robi i z tego skorzystałeś/aś! Właśnie na tym polega korzyść z tworzenia dobrze nazwanych reużywalnych funkcji!

Dzięki temu, że dodaliśmy automatyczne wyświetlenie zaktualizowanej listy zadań, nie musimy za każdym razem po dodaniu nowego zadania wywoływać ręcznie dodatkowo showTasks(), żeby wyświetlić naszą listę. Widzisz, ile może się dziać w jednej funkcji!

Ok, dopisz więc do pliku todo-app kod nowej funkcji addTask(), ale bez moich komentarzy (to te linijki, które zaczynają się od //, pamiętasz?), zapisz plik (tak jak zwykle za pomocą Ctrl+S) i uruchom go klikając ikonkę trójkąta lub używając skrótu Ctrl+Enter.

Teraz możemy dodawać zadania poprzez wywołanie funkcji addTask z argumentami (poćwicz to w konsoli):

addTask("sprawdzić Facebooka");
addTask("wyskoczyć do sklepu po jogurt");
addTask("położyć jogurt na grzejniku, by się zacieplił");

Jeśli wszystko poszło zgodnie z planem, to za każdym razem po dodaniu zadania, wyświetla Ci się komunikat oraz coraz to dłuża lista - ileż to my mamy do zrobienia dzisiaj w biurze!