Obiekty w JavaScript

Idea obiektów

Obiekt w JavaScript to zbiór par klucz: wartość. Można o nim myśleć jak o kontenerze na różne informacje opisujące jeden koncept lub rzecz. Przykładowo, obiektem może być użytkownik, a przechowywane w nim pary klucz-wartość to jego cechy: imię, wiek, email itd. Klucz (nazywany też właściwością lub atrybutem) jest identyfikatorem (najczęściej tekstowym), a wartość może być dowolnego typu (liczba, string, boolean, a nawet tablica czy inny obiekt).

Tworzenie obiektu

Obiekt zapisujemy w nawiasach klamrowych { }, wypisując wewnątrz pary klucz: wartość rozdzielone przecinkami. Przykład – obiekt reprezentujący użytkownika:

let uzytkownik = {
    imie: "Jan",
    nazwisko: "Kowalski",
    wiek: 25,
    czyStudent: false
};

Obiekt uzytkownik ma cztery właściwości: imie, nazwisko, wiek, czyStudent. Klucze imie i nazwisko mają wartości tekstowe, wiek — liczbową, czyStudent — logiczną. Zapis jest czytelny i przypomina pola formularza z danymi osoby.

Dostęp do danych w obiekcie

Aby odczytać wartość danej właściwości, używamy notacji kropkowej: obiekt.klucz. Dla naszego przykładu:

console.log(uzytkownik.imie);      // "Jan"
console.log(uzytkownik.wiek);      // 25

Możemy też użyć notacji z nawiasami [], przekazując nazwę klucza jako string:

console.log(uzytkownik["nazwisko"]); // "Kowalski"

Notacja z kropką jest prostsza i częściej używana, o ile nazwa klucza jest pojedynczym słowem (bez spacji i znaków specjalnych).

Modyfikacja i dodawanie właściwości

Obiekty w JS są dynamiczne — po utworzeniu możemy zmieniać ich zawartość. Aby zmienić wartość właściwości, przypisujemy nową wartość:

uzytkownik.wiek = 26; // zmieni wiek na 26

Możemy też dodać nową parę, nawet jeśli nie była zdefiniowana przy tworzeniu obiektu. Przykład:

uzytkownik.email = "jan.kowalski@example.com";

Po wykonaniu powyższej instrukcji obiekt uzytkownik zyska nową właściwość email z podaną wartością. Podobnie jak w tablicach, możemy używać console.log() aby podejrzeć zawartość obiektu lub odwoływać się do poszczególnych pól wedle potrzeby.

Przykład praktyczny

Wyobraźmy sobie obiekt ksiazka reprezentujący książkę w bibliotece, z takimi danymi jak tytuł, autor i liczba stron:

let ksiazka = {
    tytul: "Władca Pierścieni",
    autor: "J.R.R. Tolkien",
    strony: 1178
};

Możemy użyć tych danych w zdaniu:

console.log("Czytam książkę pt. " + ksiazka.tytul + ", autorstwa " + ksiazka.autor + ".");
// => Czytam książkę pt. Władca Pierścieni, autorstwa J.R.R. Tolkien.

Obiekt ksiazka grupuje informacje o książce w jednej zmiennej — dzięki temu łatwo przekazać całą grupę danych (np. do funkcji) lub dodać kolejne właściwości (np. rok wydania) w razie potrzeby.

Ćwiczenia

1. Utwórz obiekt osoba, który będzie zawierał właściwości: imie, wiek i miasto (dla przykładu wpisz swoje dane lub zmyślone).
2. Wypisz w konsoli zdanie przedstawiające tę osobę, np. "Mam na imię Jan, mam 25 lat i mieszkam w Krakowie.", używając danych z obiektu.
3. Zwiększ wartość wiek o 1 (bo osoba ma urodziny) i dodaj nową właściwość, np. hobby z wybraną wartością tekstową. Wypisz zmodyfikowany obiekt, aby zobaczyć zmiany.
4. Stwórz obiekt produkt reprezentujący np. telefon w sklepie internetowym. Niech ma właściwości nazwa, cena, dostepny (boolean). Wypisz informację o produkcie w formacie "Produkt: [nazwa], cena: [cena] PLN, dostępny: tak/nie" w zależności od wartości boolean.
5. (Eksperymentalnie) Spróbuj utworzyć tablicę obiektów, np. biblioteka zawierającą kilka obiektów ksiazka (z właściwościami jak wyżej: tytuł, autor, strony). Następnie przeiteruj po tej tablicy pętlą i wypisz tytuły wszystkich książek. To ćwiczenie łączy tablice i obiekty i wymaga zrozumienia obu struktur.