Tablice i obiekty w języku JavaScript są często lepsze niż stosowanie zwykłych zmiennych i pozwalają dużo lepiej zorganizować cały kod.

Załóżmy, że w swojej aplikacji chcesz stworzyć pojemniki (zmienne) do przechowywania emaili 100 zarejestrowanych osób.

Wykorzystując zmienne musiałbyś stworzyć 100 zmiennych i za każdym razem nazywać je inaczej, np. email1, email2… email100.

To bardzo zła praktyka, bo całkowicie nadużywasz zasady DRY – Don’t Repeat Yourself (nie powtarzaj swojego kodu!).

W tym przypadku dużo lepsza będzie tablica, czyli jedna zmienna, w której może być 100 elementów. Potem możesz się do nich w prosty sposób odwoływać – i problem masz z głowy.

Wersja wideo:

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Zanim zaczniemy – krótko o komentarzach w kodzie

Komentarze to sposób na dodanie dodatkowych informacji do kodu JavaScript.

Są bardzo pomocne, bo gdy w późniejszym czasie – za tydzień, miesiąc, rok – wrócisz do swojego kodu, od razu będziesz wiedział za co dany blok kodu odpowiada.

Nie będziesz musiał tego analizować, bo kod będzie pełen czytelnych komentarzy.

Komentarze jednolinijkowe

Zajmują tylko jedną linię.

Tworzysz je wykorzystując dwa slashe: //

Komentarze wielolinijkowe

Mogą zajmować jedną linię, ale równie dobrze kilkanaście czy kilkadziesiąt.

Taki komentarz rozpoczynamy znakami /* i kończymy odwrotnie – */.

P.S. Komentarzy możesz też używać po to, by w szybki sposób pozbyć się jakiegoś działającego bloku kodu.

Wystarczy, że go zakomentujesz, a przeglądarka potraktuje to jak zwykły komentarz, czyli kod się nie wykona.

 

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

 

Tablice

Wracając do przykładu z początku artykułu, możemy teraz zastosować tablicę, by pogrupować wszystkie emaile.

Wybieranie elementów w tablicy

Żeby móc cokolwiek zrobić z jakimś elementem, najpierw musimy go wybrać. W przypadku tablic posługujemy się indeksami, czyli wskazujemy dokładnie o który element nam chodzi.

Tyle że działa to nieco inaczej niż mogłoby się wydawać, bo w programowaniu wszystko numerujemy od zera. Pierwszy element będzie miał indeks 0, drugi element: 1, trzeci: 2 itd.

Możesz teraz zrobić z takim elementem cokolwiek chcesz, np. go wyświetlić:

 

Dodawanie elementów do tablicy

By dodać jakiś element na końcu tablicy, wykorzystaj metodę push().

Aby dodać go na początku, wykorzystaj unshift().

Aby dodać element na konkretnym miejscu w tablicy, wykorzystaj do tego indeks.

Pamiętaj, że zaczynamy od 0, więc np. element nr 16 będzie miał 15-sty indeks.

 

Usuwanie elementów z tablicy

By usunąć ostatni element z tablicy, wykorzystaj pop().

Aby wyrzucić pierwszy element, skorzystaj z shift().

 

Inne funkcje tablic

Sprawdzanie długości

Nasza tablica z emailami ma 3 elementy, ale żeby sprawdzić to z poziomu kodu, wykorzystaj właściwość length.

Łączenie elementów tablicy

Możemy połączyć każdy element, wykorzystując join(). Jako parametr możesz podać separator, który będzie oddzielał jeden element od drugiego.

Tablica w odwrotnej kolejności

 

Obiekty

Czyli coś, co pozwoli Ci odwzorować rzeczywisty świat, ale w formie kodu.

Obiekty potrafią bardzo zwiększyć czytelność całej aplikacji i pozwalają w prosty sposób pogrupować właściwości i metody (czyli zmienne i funkcje wewnątrz obiektu).

Gdybyś chciał odwzorować człowieka, możesz zrobić to tak:

Teraz jak widzisz mamy jeden obiekt człowiek, a wewnątrz niego właściwości, do których dowolnie można się odwoływać i jest to bardzo fajnie zorganizowane.

 

Wewnątrz obiektu możemy też mieć metody, czyli funkcje.

Odwołujemy się do nich podobnie, jak do właściwości, czyli korzystając z operatora kropki.

 

Mam nadzieję, że cały ten artykuł wyjaśnił Ci działanie tablic i obiektów w JavaScript.

W praktyce wygląda to tak, że możesz stosować zmienne, tablice i obiekty tam, gdzie uznasz za słuszne.

Nie ma sensu budować tablicy dla 1 elementu (lepsza będzie zmienna), ale gdy już będziesz miał tych elementów 5, 10, 200 itd. – tablica będzie idealna.

Podobnie z obiektami. Można je wykorzystać tak, jak w przykładzie z człowiekiem, czyli do zbudowania jednego pojemnika, który będzie miał w sobie różne właściwości i metody.

Potem będziemy mogli się w bardzo czytelny sposób do nich odwołać.

Samochód może mieć: moc, rodzaj opon, markę, kolor czy ilość drzwi, a jeśli chodzi o funkcje: może jechać, hamować czy otwierać szyby.

Jeśli Twoja aplikacja potrzebuje takiej organizacji, obiekt będzie idealny.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

>