kodujemywbiurze.pl
1️⃣ js 2️⃣ storage 3️⃣ html 4️⃣ html + js

Funkcje | Wyświetlamy listę zadań (znowu), ale tym razem za pomocą własnej funkcji showTasks()

Jak wspomniałem w poprzednim podrozdziale, zarządzanie naszymi zadaniami (naszą aplikacją) za pomocą "czystych" JavaScriptowych poleceń typu tasks.push("nowe zadanie") lub splice(1, 0, "coś tam") działa, ale programiści "opakowują" taki imperatywny (patrz poprzedni podrozdział) kod, z którego często korzystamy (a będziemy często dodawać zadania do listy oraz je usuwać), w reużywalne "kawałki" kodu, które nazywają się funkcjami.

Funkcja to pewien zakmnięty w sobie fragment kodu o zrozumiałej, czytelnej nazwie, który wykonuje pewne zadania/ polecenia w nim zdefiniowane za każdym razem, kiedy go wywołamy.

Tak naprawdę, już korzystaliśmy z wbudowanych funkcji (a dokładniej metod - nie przejmuj się na razie tym rozróżnieniem), tj. console.log() lub tasks.push(). Zauważ, że w odróżnieniu od zmiennych, funkcja zawiera nawiasy tuż po swojej nazwie.

Spróbujmy zatem stworzyć naszą pierwszą funkcję, by zrozumieć, o co w tym chodzi. Stworzymy funkcję, która będzie wyświetlała nam listę wszystkich naszych zadań.

Owszem, wcześniej już wyświetlaliśmy nasze zadania poprzez wpisanie w konsoli zmiennej tasks lub poprzez wywołanie funkcji console.log(tasks), ale teraz zrobimy to w sposób bardziej profesjonalny, zgodnie z paradygmatem programowania funkcyjnego. "Opakujmy" zatem nasz wcześniejszy kod console.log(tasks) w funkcję:

function showTasks() {
  console.log(tasks);
}

UWAGA! Jeśli wyczyściłeś konsolę lub przeładowałeś stronę, to nie mamy już dostępu do globalnej zmiennej tasks, należy więc na nowo ją zadeklarować za pomocą np. poniższego kodu i wpisując go przed definicją funkcji:

// (re)deklarujemy zmienną:
let tasks = ["zrobić kawę", "sprawdzić maila", "zajrzeć na stronę kodujemywbiurze.pl"];

// defniujemy zmienną, która korzysta z powyższej zmiennej:
function showTasks() {
  console.log(tasks);
}

W powyższym kodzie używając słowa kluczowego function zdefiniowaliśmy nową funckję o nazwie showTasks, która... (jak sama nazwa wskazuje) wyświetla listę naszych zadań.

Jak widzisz, polecenie console.log(tasks), którego wcześniej używaliśmy osobno, zostało "opakowane" w funkcję, której nazwa ewidentnie wskazuje na to, czego możemy się od niej spodziewać, w związku z czym ktoś, kto nie widział całości naszego kodu, ani nie wie, co jest w środku tej funkcji, raczej się domyśli, co ta funkcja robi i sam będzie mógł jej użyć.

Ponadto, jeśli wrócisz do swojego kodu za kilka dni lub tygodni, to mimo że nie będziesz pamiętał/a, co znajduje się w środku funkcji showTasks() i nie będziesz nawet pamiętał/a, jak wyświetlić coś w konsoli za pomocą console.log(), to zdecydowanie zrozumiesz, co robi funkcja showTasks().

Uwierz mi, że programiści o wiele częściej dosłownie czytają kod, niż go piszą, dlatego trafne nazwy zarówno zmiennych, jak i funkcji, niezwykle ułatwiają jego zrozumienie, mimo że nie zna się/ nie pamięta szczegółów.

Żeby nasza funkcja zadziałała i wyświetliła nasze zadania, musimy ją wywołać poprzez wpisanie w konsoli showTasks() i kliknąć Enter. Dzięki temu, nie musimy pamiętać, jak wyświetlić nasze zadania w konsoli, wystarczy wywołać funkcję showTasks().

Na pierwszy rzut oka może się wydawać, że wykonaliśmy zbędną pracę - definicja funkcji zajęła nam 3 linijki kodu, a console.log(tasks) zajęłoby tylko jedną!

Aczkolwiek, po pierwsze, uczyniła nasz kod bardziej zrozumiałym, czytelnym i reużywalnym, a po drugie, większość funkcji będzie bardziej rozbudowana, będą tam miały miejsce różne procesy, być może będą tam w środku też inne funkcje i tymczasowe (lokalne) zmienne, więc w tym przypadku oszczędność czasu będzie ogromna.

Poza tym, musieliśmy tylko raz się zastanowić nad tym, jak wyświetlić nasze zadania, tworząc funkcję i nie będziemy musieli znowu się nad tym zastanawiać, co miałoby miejsce, gdybyśmy każdorazowo pisali console.log(tasks).

Warto też zwrócić uwagę na samą konstrukcję funkcji:

  • zaczyna się ona od słowa kluczowego function,
  • potem po spacji jest jej nazwa (która jeśli zawiera zlepek słów, to powinna być napisana camelCasem),
  • potem bez spacji po nazwie dodajemy nawiasy () (później dowiemy się, do czego służą, chociaż... być może już zwróciłeś/aś uwagę, jak działały nawiasy w wcześniejszych funkcjach/metodach),
  • a potem mamy dwie klamry { }, pomiędzy którymi możemy pisać wiele linijek kodu - to, co znajduje się pomiędzy klamrami, nazywa się ciałem funkcji.

Moglibyśmy powyższą funkcję zapisać także w jednej linijce (ponieważ jest mała):

function showTasks() { console.log(tasks); }

aczkolwiek taki zapis nie jest czytelny, dlatego lepiej używać wielolinijkowego formatu.

Ogólnie funkcje możemy zadeklarować też na kilka innych sposobów, ale na razie wystarczy nam ten jeden.

Zanim stworzymy kolejne funkcje, chciałbym zwrócić Twoją uwagę na nazewnictwo funkcji. Pamiętasz, że nazwa zmiennej powinna odzwierciedlać to, jaką wartość przechowuje? Z funkcjami jest podobnie, tyle że funkcje nie reprezentują jakieś wartości, tylko czynności - funkcja coś "robi". W związku z tym, jeśli funkcja powinna wyświetlić zadania, to należy ją nazwać showTasks lub displayTasks, albo też logTasks. Te nazwy brzmią jak komendy: "pokaż/ wyświetl zadania!" i tak właśnie jest z funkcjami - są one poleceniami dla komputera/ przeglądarki.