← Lekcje
JavaScript · lekcja 14

Obiekty w JavaScript 1/2:
właściwości pod jedną nazwą

Plan tematu (2 godziny):

  1. Godzina 1 (dziś): literał obiektu, dostęp do właściwości kropką i nawiasem
  2. Godzina 2: metoda obiektu - funkcja wewnątrz obiektu i słowo this
  3. Ćwiczenie: obiekt z trzema właściwościami, odczyt dwoma sposobami dostępu
Rozgrzewka · 3 minuty

Rozgrzewka: tablice z poprzednich lekcji

  1. Macie tablicę const fruits = ["jablko","gruszka","banan"];. Pod jakim indeksem znajduje się "banan"?
  2. Jak dopiszecie nowy element na końcu tablicy metodą, a nie ręcznym numerem indeksu?
  3. Pętla for przechodzi po wszystkich elementach tablicy - co zmienia się w niej z każdym przebiegiem?
Część 1 · Czym jest obiekt

Obiekt: właściwości pod jedną nazwą

student firstName : "Anna" lastName : "Kowalska" birthYear : 1985

Obiekt to zbiór powiązanych ze sobą danych zebranych pod jedną nazwą zmiennej. Każda dana ma nazwę (klucz) i wartość - razem nazywamy to właściwością (ang. property). Zapis w klamrach { } to literał obiektu - piszecie całą zawartość obiektu wprost, tak jak go tworzycie. Obiekt jest jak karta osobowa: jedna karta, kilka pól.

let student = { firstName: "Anna", lastName: "Kowalska", birthYear: 1985 };
console.log(student);  // { firstName: 'Anna', lastName: 'Kowalska', birthYear: 1985 }

Ciekawostka z Wikipedii: zapis z klamrami, którego się właśnie uczycie, to podstawa formatu JSON (JavaScript Object Notation), używanego dziś w prawie każdej aplikacji do przesyłania danych między serwerem a przeglądarką. W 2001 roku Douglas Crockford wziął literał obiektu za wzór przy tworzeniu tego formatu.

MDN: Learn_web_development/Core/Scripting/Object_basics (sekcja „Object basics”: „An object is a collection of related data and/or functionality”; „An object like this is referred to as an object literal”)
Część 2 · Dwa sposoby dostępu

Kropka i nawias: dwie drogi do tej samej wartości

student firstName: "Anna" student.firstName student["firstName"] "Anna"

Dostęp kropką: nazwa obiektu, kropka, nazwa właściwości bez cudzysłowu. Dostęp nawiasem: nazwa obiektu, nawias kwadratowy, nazwa właściwości w cudzysłowie. Oba zapisy dają dokładnie ten sam wynik.

console.log(student.firstName);    // Anna
console.log(student["lastName"]);  // Kowalska
MDN: Learn_web_development/Core/Scripting/Object_basics (sekcja „Dot notation”: „you accessed the object's properties and methods using dot notation”; sekcja „Bracket notation”: „Bracket notation provides an alternative way to access object properties”)
Część 3 · To już znacie z PHP

Z PHP już to widzieliście

kurs PHP · lekcja 02 tablica asocjacyjna $product["name"] kurs PHP · lekcje 13-15 obiekt klasy $product->name JavaScript · dziś obiekt product.name product["name"]

W PHP klucz tekstowy w nawiasie znaliście z tablicy asocjacyjnej (kurs PHP, lekcja 02), a strzałkę -> z właściwości obiektu klasy (kurs PHP, lekcje 13-15). W JavaScript nie ma strzałki - obiekt ma tylko kropkę albo nawias z cudzysłowem, tak jak PHP-owa tablica asocjacyjna, ale bez znaku $ przed nazwą.

Część 4 · Tablica czy obiekt

Numerki czy etykiety

tablica fruits - miejsca ponumerowane 0"jablko" 1"gruszka" obiekt student - miejsca nazwane firstName"Anna" lastName"Kowalska" gdy dane mają naturalną nazwę, obiekt jest czytelniejszy niż numerek 
let fruitsList = ["jablko", "gruszka"];
console.log(fruitsList[0]);       // jablko - dostęp po numerze miejsca
console.log(student.firstName);   // Anna - dostęp po nazwie właściwości
MDN: Learn_web_development/Core/Scripting/Object_basics (sekcja „Bracket notation”: „objects are sometimes called associative arrays”)
Egzamin EE.09 / E.14

Tak pytają na egzaminie

1. var person = {firstName: "Anna", lastName: "Kowalska", birthYear: 1985}; W języku JavaScript zapisano definicję obiektu. Aby odwołać się do własności lastName należy zapisać

  1. person[1]
  2. person[2]
  3. person.lastName
  4. person::lastName

2. obj = { q: 1, w: 2, e: 3, r:4 }; W języku JavaScript utworzono obiekt. Aby pobrać wartość własności w można zapisać

  1. obj:w
  2. obj.w
  3. obj::w
  4. obj->w
CKE, E.14, czerwiec 2017, zadanie 34 · CKE, EE.09, styczeń 2021, zadanie 4
Ćwiczenie przy komputerze · 20 minut

Ćwiczenie: obiekt i dwa sposoby dostępu

  1. Otwórz script.js z poprzednich lekcji (w folderze swojego projektu).
  2. Utwórz obiekt: let student = { firstName: "Anna", lastName: "Kowalska", birthYear: 1985 };
  3. Wypisz cały obiekt: console.log(student);
  4. Wypisz firstName dostępem kropką: console.log(student.firstName);
  5. Wypisz lastName dostępem nawiasem: console.log(student["lastName"]);
  6. Wypisz birthYear wybranym przez siebie sposobem: console.log(student.birthYear);
  7. Dla chętnych w domu: dopisz czwartą właściwość city i odczytaj ją oboma sposobami.
Na koniec

Sprawdź się

  1. Jak zapiszecie w JavaScript literał obiektu z trzema właściwościami: firstName, lastName i birthYear?
  2. Jakimi dwoma sposobami odczytacie właściwość firstName z obiektu student?
  3. Czym różni się dostęp do elementu tablicy od dostępu do właściwości obiektu?

Na następnej lekcji: metoda obiektu i słowo this.

Poza szkołą

A jak to wygląda w produkcji?

Na lekcjiW produkcjiStatus
Literał { } do tworzenia obiektuNadal najczęstszy sposób tworzenia prostego obiektu w JavaScript - tak uczy MDN.nadal w użyciu
student.firstName (kropka)Domyślny zapis, gdy nazwa właściwości jest znana przy pisaniu kodu.nadal w użyciu
student["firstName"] (nawias)Rzadziej niż kropka - gdy nazwa właściwości jest zmienną albo zawiera spację czy myślnik.tak robię w projektach
Osobna tablica z numerkiem dla każdej danejObiekt (albo klasa) z nazwanymi właściwościami - czytelniejszy kod, mniej pomyłek z numerem indeksu.tak robię w projektach
MDN: Web/JavaScript/Guide/Working_with_objects („An object is a collection of properties...”, literał jako podstawowy sposób tworzenia)