Obiekty JavaScript: wprowadzenie i podstawowe zagadnienia

Gdybym miał wskazać najbardziej fundamentalne rzeczy potrzebne do nauki i zrozumienia JavaScript – obiekty na pewno byłyby jednym z głównych kandydatów do tej listy. W tym oraz kilku kolejnych postach postaram się więc wprowadzić wszystkich zaczynających swoją przygodą do obiektowego świata JavaScript.

Czym są obiekty JavaScript?

Gdy zaczynamy myśleć o obiektach w JavaScript, do głowy przychodzi nam pewnie myśl – „prosta reprezentacja danych w której każdemu kluczowi przypisana jest odpowiednia wartość„. W głowie pewnie też od razu układa nam się prosty kod:

const user = {
  name: "Kamil",
  surname: "Front",
  age: 27,
};

Jednak gdy zaczynamy czytać dalej i trafiamy na pojęcia takie jak prototypy, klasy, prymitywy, dziedziczenie, klasy, yyy… Wtedy ten prosty obiekt przestaje być taki prosty.

W tej serii artykułów postaram się w przystępny sposób przybliżyć wszystko co należy wiedzieć o obiektach w JavaScript.

Property

Zacznijmy od czegoś łatwego – property. Property, czasami też nazywane kluczem, jest unikalną wartością występującą w obiekcie. Do property musi być przyporządkowana jakaś wartość. Wartość tą odczytujemy właśnie poprzez podanie odpowiedniej property obiektu. Odnosząc się do przykładu ze wstępu – name, surname, age są to property obiektu user. Natomiast Kamil, Front, 27 są ich odpowiednimi wartościami.

Istnieją dwa sposoby na odczyt/zapis wartości property:

• dot notation
• bracket notation

const user = {
  name: "Kamil",
  surname: "Front",
  age: 27,
};
 
user.name; // dot notation
user["name"]; // bracket notation

Gdy będziemy chcieli odczytać wartość property, która nie istnieje na obiekcie, JavaScript nie wyrzuci błędu, tylko zwróci wartość undefined. Ponownie patrząc na nasz przykład: user.weigth // undefined

Używając dot notation, musimy używać tzw. valid identifier, czyli ciągu znaków składających się z dużych bądź małych znaków Unicode, cyfr oraz znaku podkreślenia, przy czym cyfra nie może być pierwszym znakiem. Tutaj możemy sprawdzić, czy dany ciąg znaków może być użyty jako nazwa zmiennej w JavaScript. W przypadku bracket notation nie jesteśmy tym ograniczeni:

let powitania = {};
powitania["przed południem"] = "Dzień dobry";
 
powitania["przed południem"]; // "Dzień dobry"
``;

Warto mieć na uwadze fakt, iż gdy ustawimy property, która nie jest typu string, zostanie ona zamieniona na string (poprzez metodę toString(), gdy jest to możliwe):

obj[1] === obj["1"]; // true, integer 1 przekonwertowany na string „1”.

Property value (wartość property)

Wartością property może być kolejny obiekt, funkcja, bądź primitive. Może tutaj pojawić się pytanie: czym jest primitive i czym różni się on od obiektu? Wszystko co musimy wiedzieć na temat primitives na chwilę obecną, to fakt, iż primitives to tzw. typy podstawowe. W JavaScript zaliczają się do nich następujące typy danych:

• string
• number
• boolean
• null
• undefined
• symbol

Typy te nie posiadają żadnych przypisanych do siebie metod oraz nie są obiektami. Brzmi to bardzo zawile i skomplikowanie, ale zasadniczo w JavaScript wszystkie nasze dane są albo obiektami (o nich tutaj rozmawiamy), albo są typu primitive, czyli są po prostu stringiem, liczbą, wartością logiczną, itp.

Więcej na temat różnic między obiektami a prymitywami znajdzie się w oddzielnym poście.

Obiekt

W przypadku, gdy wartością property będzie kolejny obiekt, wtedy tworzymy strukturę zagnieżdżoną:

const user = {
  name: "Kamil",
  surname: "Front",
  age: 27,
  address: {
    city: "Warsaw",
    district: "Bielany",
  },
};

Teraz, aby dostać się do kolejnych, zagnieżdżonych wartości, ponownie możemy korzystać z dot notation bądź bracket notation wskzaując kolejne interesujące nas property:

user.address.city // Warsaw

Funkcja

Gdy wartością property jest funkcja, wtedy taką property nazywamy metodą. Wewnątrz metody istnieje kolejny, sprawiający sporo problemów składnik języka JavaScript: słowo this – jednak jest to temat na zupełnie oddzielny artykuł, który na pewno pojawi się na łamach frontstack.pl.

Tworzenie obiektu

Obiekty w JavaScript możemy tworzyć na dwa podstawowe sposoby:

• object literal, czyli deklarujemy nasz obiekt tak jak każdą podstawową zmienną. W tym miejscu możemy od razu podać property oraz ich wartości:

const user = {
  name: "Kamil",
  surname: "Front",
  age: 27,
};

• użycie słowa kluczowego new, dzięki czemu tworzymy nowy obiekt nie posiadający żadnego property:

const user = new Object();
 
user.name = "Kamil";
user["age"] = 27;

To tyle, jeżeli chodzi o najbardziej podstawowe informacje dotyczące obiektów w JavaScript. Kolejną część zaczniemy od pojęcia prototypu i przejdziemy do dziedziczenia, także gorąco zachęcam do dalszego czytania.