Przechodzimy do następnego typu danych. W języku JavaScript oprócz typu boolowskiego, niezdefiniowanego, łańcuchowego i paru innych, znajdziesz też "object". Obiekt może się bardzo przydać do pewnych celów, które opiszę już w środku artykułu. Także klikaj, czytaj i wyciągaj wnioski 😉!!!
"OBJECT" W JĘZYKU JAVASCRIPT MOŻE BYĆ CZĘSTYM GOŚCIEM W TWOIM PROGRAMIE!
I nie ma w tym twierdzeniu ani krzty przesady 👍. Obiekt traktuj jako "woreczek", w którym mogą być przechowywane zarówno zmienne, jak i funkcje. Wówczas zmienne nazywa się "właściwościami", a funkcje "metodami". Stąd też stała "PI" występująca w obiekcie matematycznym "Math" jest właściwością, a "log" w obiekcie "console", metodą ✅. Metoda może być jeszcze ładniej nazwana jako "właściwość o typie funkcyjnym" ⭐. To są kolejne gusta i guściki, więc przejdźmy do konkretów 🙂.
ZAPIS OBIEKTU W KODZIE
Obiekt w języku JavaScript rozpoznasz po klamerkach wstawionych po znaku przypisania, takich samych jak podczas definiowania bloku dla instrukcji warunkowej, pętli oraz funkcji 👇:
const object = {};To jest definicja pustego obiektu. Zobaczmy co możemy zrobić z jego udziałem.
WSTAWIANIE WŁAŚCIWOŚCI (POLA)
Zmienna będąca częścią obiektu to właściwość (ewentualnie pole) ℹ️. Właściwość dodaje się poprzez wprowadzenie nazwy, znaku dwukropka i podaniu wartości typu, jaki chcemy, żeby reprezentowała 👇:
const object = {
x: 50
};Występują dwie różnice składniowe w definicji wewnątrz obiektu:
- dwukropek zamiast operatora przypisania,
- brak średnika po zakończeniu definicji właściwości.
Zamiast średnika musimy wstawić przecinek, jeśli planujemy dodawanie wielu właściwości (średnik dodajemy dopiero na końcu definiowania całości obiektu i na zewnątrz niego ℹ️) 👇:
const object = {
x: 50,
y: 37
};lecz po ostatnim już nie. Możesz dodać tyle właściwości ile chcesz, a także łączyć je z metodami (nagłówek niżej) ✔️.
WSTAWIANIE METOD
Funkcje w obiekcie także są realne w języku JavaScript, tylko wtedy określamy je metodami. Można potraktować właściwość w taki sposób, aby była ona w rzeczywistości metodą 👇:
const object = {
doSomething: function() {
// instrukcje
}
};a następnie wywołać ją z innego miejsca w kodzie. W języku JavaScript nie ma czegoś takiego, jak metoda o dostępie prywatnym 🔓. W klasie jeszcze można tak zrobić, lecz nie w obiekcie ❌. Wszystko może być edytowalne na zewnątrz 💥.
WSTAWIANIE OBIEKTU?
A żebyś wiedział(a) 😄! "object" w języku JavaScript ma prawo być własnością innego obiektu 👇:
const object = {
objectB: {
a: 50,
b: 35,
c: 607
}
};Trzeba tylko bardzo uważać na przecinki, bo bez nich będzie błąd składniowy ⛔.
ODWOŁYWANIE SIĘ DO ATRYBUTÓW I METOD
Celem odwołania się do składowej obiektu, korzystamy z jego nazwy, znaku kropki i nazwy składowej jaka nas interesuje 👇:
const object = {
x: 50
};
console.log(object.x); // 50Prościzna 😉! Modyfikacja już istniejącej składowej odbywa się dokładnie tak samo!
object.x = 60;Gdy w ten sposób powołasz się na składową której nie ma (bądź nie jest zainicjowana), zostanie zwrócone "undefined" ⚠️! Wtedy warto "uzbroić" kod w instrukcję warunkową:
if(typeof object.x !== "undefined") {
// instrukcje
}Właściwości, które mogą być niezdefiniowane, określane są jako "opcjonalne" ℹ️. Polecam skorzystać z "typeof" i łańcuchowego zapisu typu "undefined" do sprawdzania istnienia danej składowej 🔍.
WSTAWIANIE POZA DEFINICJĄ
Bywa, że pewna składowa obiektu musi powstać, lecz odrobinę później, niż ma to miejsce w trakcie definicji. Wtedy możesz dorzucić składową w takiej postaci, jakiej chcesz przy użyciu tego samego zapisu dla odwoływania się do obiektu:
- obiekt,
- kropka,
- nazwa nowej składowej,
- znak przypisania,
- wartość.
Oto cała receptura 🙂:
const object = {
x: 50
};
object.y = 37;
console.log(object.y); // 37Tak jak widziałeś(-aś) u góry, możesz w ten sam sposób edytować już istniejące składowe ✅.
ACH, TE REFERENCJE...
Definiując obiekt w języku JavaScript, musisz wiedzieć taką istotną rzecz, że obiekty także korzystają z referencji 🔥. Popatrz na to 👇:
const objectA = {x: 50};
const objectB = objectA;Nic interesującego na pierwszy rzut oka. Przypisanie obiektu do drugiej zmiennej. Ciekawiej się robi w momencie modyfikacji jednej z właściwości 👇:
objectA.x = 500;Jaki to da skutek? Modyfikacja dotknie również zmienną "objectB" 🤯!!!
console.log(objectA.x); // 500
console.log(objectB.x); // 500Wynika to z faktu, iż zmienna "wskazuje" na obiekt wskazywany przez "objectA", co stanowi niezbity dowód, że przechowywana jest referencja ✅.
Jeżeli chcesz, żeby to działało jak kopia czy niezależny obiekt, musisz zdefiniować go na nowo 👇:
const objectA = {x: 50};
const objectB = {x: 50};
objectA.x = 500;
console.log(objectA.x); // 500
console.log(objectB.x); // 50"CONST" NAŁOŻONE NA OBIEKT NIE ZADZIAŁA JAK MYŚLISZ!
Skoro jesteśmy przy słowie kluczowym "const", to trzeba uświadomić kolejną niespodziankę 😳. Wiadomo, że "const" definiuje stałe, czyli wartości niemodyfikowalne przez cały cykl życia programu. Tylko w kwestii obiektów, jakby Ci to napisać 👇:
const object = {x: 50};
object.x = 40; // dozwoloneTo nie wpływa na właściwości ani metody!!! Czyli jednym zdaniem, "const" nie sprawi, że raz nadane wartości wewnątrz obiektu pozostaną niemodyfikowalne 🔓.
"const" działa jedynie "na zewnątrz", czyli zabroni jedynie tego 👇:
const object = {x: 50};
object = {x: 40}; // błąd składniowy!Pisząc jeszcze inaczej, "const" zabrania jedynie przypisania nowej referencji ℹ️!
DRUGA "TWARZ" OBIEKTU
Dobra. Mam jeszcze coś do przekazania 😝. "object" w języku JavaScript jest również tablicą!!! Obiekt to tablica, a tablica to obiekt. Język znowu poszedł swoimi torami mając gdzieś przyjęte standardy znane z języka C 😆.
Żeby jeszcze bardziej nie poszerzać artykułu, przełóżmy sobie ten "cliffhanger" na czas omawiania tablic 😄.
 |
"object" w języku JavaScript przypomina "woreczek", który jest zdolny do składowania wielu zmiennych i funkcji w jednym miejscu. Wszystkie dane są podatne na modyfikację z zewnątrz, nawet po użyciu słowa "const"!!!
Skończyło się tłumaczenie obiektowego typu danych w języku JavaScript 📖.