• Post last modified:23/08/2021
  • Reading time:5 mins read
  • Post comments:0 Komentarzy

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.

Info

Z racji tego, iż większość profesjonalnych materiałów oraz dokumentacji znajdziemy w języku angielskim, dość często będę posługiwał się angielskimi nazwami takimi jak object literalimmutableprimitives, itp. Czasem znalezienie polskiego odpowiednika bywa dość „sztuczne” i może prowadzić do wielu nieporozumień, szczególnie dla mniej doświadczonych developerów.

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.

Kamil Józwik

Frontend developer👨‍💻 Autor kursów na frontschool.pl, małego narzędzia dla programistów - frontbook.dev oraz kolejnych postów na tym blogu. Ulubiony stos technologiczny to React wraz z TypeScript oraz wszystko, co "nowe" w tym pięknym dynamicznym front end-owym świecie 🙂
Subscribe
Powiadom o
guest
0 Comments
Inline Feedbacks
View all comments