Tablice. push(), indeksy i modyfikacja elementów | Tworzymy listę zadań

Ok, więc potrafimy już utworzyć nową zmienną, by przechować jej wartość w naszym kodzie, potrafimy też tę wartość zmodyfikować/ nadpisać. Natomiast posiadanie tylko jednej zmiennej task, którą będziemy ciągle modyfikować, jest bardzo niepraktyczne i nie do tego dążymy.

Chcemy utworzyć listę zadań (masz przecież dużo zadań do zrobienia w biurze, także związanych bezpośrednio z pracą 🤫, do której będziemy mogli dodawać zadania, usuwać je, lub też wyświetlić listę zadań w całości!

Stwórzmy zatem najpierw pustą listę zadań, którą przypiszemy do nowej zmiennej:

let tasks = [];

Zauważ, że tym razem wartością zmiennej nie jest ciąg znaków (ang. string, czyli ciąg znaków ujęty w cudzysłów, jak w np.: "zrobić kawę"), tylko dwa nawiasy kwadratowe []. Jest to tablica (ang. array), która jest niczym innym, jak kontenerem/ kolekcją/ listą różnych elementów, które znajdą się w środku.

Na razie nasza tablica/ lista tasks jest pusta (pomiędzy kwadratowymi nawiasami nie ma żadnych elementów). Gdybyśmy chcieli dodać do niej manualnie (ręcznie wpisując) nasze zadania, to moglibyśmy to zrobić na wiele sposobów, np.:

1. Ręcznie wpisujemy każde zadanie jako ciągi znaków ujęte w cudzysłów i oddzielone przecinkiem:

   tasks = [ "zrobić kawę", "sprawdzić maila", "zajrzeć na stronę kodujemywbiurze.pl"];
   

2. Używamy wbudowanej metody push(), która dodaje zadania wpisane między nawiasami do istniejących już wcześniej zadań w tablicy (Uwaga! Jeśli wcześniej użyłeś kodu z poprzedniego akapitu, to w poniższe zadania już są zawarte w zmiennej tasks, dlatego najpierw wyczyść zmienną przypisując do niej pustą tablicę: tasks = []):

   tasks.push("zrobić kawę", "sprawdzić maila", "zajrzeć na stronę kodujemywbiurze.pl");
   

3. Przypisujemy nową wartość do dowolnego indeksu tablicy, który to sposób rozwinę za chwilę, ale na razie pokażę prosty przykład, w którym przypisujemy zadanie do indeksu nr 3:

   tasks[3] = "zadanie przypisane do trzeciego indeksu tablicy";
   

Czym się różnią powyższe sposoby?

Pierwszy sposób jest oczywisty: po prostu wpisujemy zadania po przecinku i przypisujemy całą listę z zadaniami do zmiennej tasks. Aczkolwiek, jest to dość niebezpieczny (i niewygodny) sposób na dodawanie wartości do listy... Dlaczego?

To podejście może być dobrym w przypadku, kiedy inicjujemy nową zmienną z jakimiś domyślnymi wartościami (niewielką ich liczbą) na początek, np. let initialTasks = ["zrób kawę", "wyświetl Hello, World w konsoli"].

Jeśli z kolei nasz kod w konsoli (lub w programie z prawdziwego zdarzenia) ma mnóstwo linijek i wielokrotnie dodawaliśmy jakieś zadania do naszej listy, jak np.: porozmawiać z koleżanką z biura o jej wczorajszej randce lub zarejestrować fakturę, która wpłynęła do biura już dwa dni temu, to teraz, jeśli napiszemy taki kod: tasks = [ "zrobić kawę", "sprawdzić maila", "zajrzeć na stronę kodujemywbiurze.pl"], wszystkie wcześniejsze zadania zostaną nadpisane przez te nowo dodane, w związku z czym je utracimy!

Dlatego w tym przypadku trzeba by było znaleźć deklarację zmiennej i tam dopisać nowe wartości, uzupełniając poprzednio wpisane.

W związku z czym, drugie rozwiązanie jest bardziej bezpieczne i czytelniejsze od pierwszego w przypadkach, w których chcemy dodać jakąś wartość do listy.

Kiedy używamy metody push() w ten sposób:

tasks.push("zrobić kawę", "sprawdzić maila", "zajrzeć na stronę kodujemywbiurze.pl");

zadania zostają dodane do wcześniej istniejących zadań - nie nadpisujemy całej zmiennej, a jedynie "wciskamy" nowe elementy na koniec listy.

Są też inne, bardziej nowoczesne sposoby dodania elementów do tablicy, ale nam na razie wystarczy tyle. Spróbujmy teraz sprawdzić w konsoli, jakie wartości przechowuje zmienna tasks - albo tak jak to robiliśmy wcześniej (po prostu wpisując nazwę zmiennej w konsoli), albo też poprzez wpisanie następującego kodu console.log(tasks) i klikając Enter.

W obydwu przypadkach w konsoli wyświetliło się coś takiego: (3) ['zrobić kawę', 'sprawdzić maila', 'zajrzeć na stronę kodujemywbiurze.pl']. Liczba w nawiasach wskazuje liczbę elementów w tablicy. Jeśli z kolei klikniesz w ikonkę trójkąta, która poprzedza liczbę elementów, to nasza lista rozwinie się w konsoli i będzie bardziej czytelna. Spróbuj rozwinąć listę!

Jak rozwinąłeś/aś listę, to zauważ, że obok naszych zadań po lewej stronie pojawiły się cyfry 0, 1, 2. Te liczby to indeksy. Indeks oznacza numer pozycji elementu w tablicy. Zauważ, że indeksy zaczynają się od 0, nie od 1! Dzięki indeksom możemy mieć dostęp do wybranych elementów z listy, np. jeśli chcemy wyświetlić/ zwrócić pierwszy element z listy tasks, to musimy napisać następujący kod w konsoli: tasks[0], drugi element: tasks[1] itd.

Dzięki indeksom możemy też mieć dostęp do poszczególnych elementów listy i modyfikować je, nadpisując ich wartość:

tasks[0] = "zrobić kawę z mlekiem";

Teraz, kiedy ponownie sprawdzimy wartość tasks[0] w konsoli, to wyświetli nam się zrobić kawę z mlekiem, a nie zrobić kawę.