Obiekty w JavaScript: właściwości i metody

Obiekt to worek nazwanych wartości

Tablica grupuje wartości według pozycji. Obiekt grupuje je według nazw. Gdy to, co modelujesz, ma opisane części (użytkownik z imieniem i wiekiem, żądanie z metodą i adresem URL), sięgnij po obiekt.

Najkrótszy sposób na utworzenie obiektu to literał obiektu:

const user = {
  name: "Ada",
  age: 30,
  isAdmin: false,
};

console.log(user);

Każdy wpis to para klucz: wartość. Pod spodem klucze są stringami (cudzysłowy są opcjonalne dla poprawnych identyfikatorów, takich jak name). Wartości mogą być wszystkim, co JavaScript potrafi reprezentować: liczbami, stringami, wartościami logicznymi, tablicami, funkcjami, a nawet innymi obiektami.

Przecinek po ostatnim wpisie jest w porządku. Większość zespołów go zostawia: dzięki temu diffy są czystsze, gdy później dodajesz nową właściwość.

Odczyt i zapis właściwości

Do właściwości można się dostać na dwa sposoby: notacją kropkową i notacją nawiasową.

const user = { name: "Ada", age: 30 };

console.log(user.name);
console.log(user["age"]);

user.age = 31;
user["name"] = "Ada Lovelace";

console.log(user);

Notacja kropkowa jest schludniejsza i to po nią sięgasz domyślnie. Notacja nawiasowa przydaje się, gdy klucz jest zapisany w zmiennej albo gdy nie jest poprawnym identyfikatorem:

const user = { "first name": "Ada", age: 30 };
const field = "age";

console.log(user["first name"]);  // dot notation can't do this
console.log(user[field]);         // key from a variable

Odczyt właściwości, która nie istnieje, zwraca undefined, bez żadnego błędu:

const user = { name: "Ada" };
console.log(user.email);  // undefined

To może po cichu ukrywać literówki. Jeśli chcesz głośnego błędu, musisz to sprawdzić jawnie.

Dodawanie i usuwanie właściwości

Obiekty są otwarte na zmiany: klucze możesz dodawać w dowolnym momencie:

const user = { name: "Ada" };

user.age = 30;
user["email"] = "ada@example.com";

console.log(user);

A usuwać je przez delete:

const user = { name: "Ada", age: 30, email: "ada@example.com" };

delete user.email;

console.log(user);
console.log("email" in user);  // false

delete to jeden z tych operatorów, których nie używasz na co dzień, ale gdy musisz całkiem pozbyć się klucza (a nie tylko ustawić go na undefined), to właściwe narzędzie. Ustawienie user.email = undefined zostawia klucz: "email" in user nadal da true.

Sprawdzanie, czy właściwość istnieje

Są trzy sposoby, każdy o trochę innym znaczeniu:

const user = { name: "Ada", email: undefined };

console.log("name" in user);                // true
console.log("email" in user);               // true - key exists, value is undefined
console.log(Object.hasOwn(user, "name"));   // true
console.log(user.name !== undefined);       // true
console.log(user.email !== undefined);      // false - misleading!

• in sprawdza, czy klucz istnieje, także wśród kluczy odziedziczonych z łańcucha prototypów.
• Object.hasOwn(obj, key) sprawdza tylko własne klucze obiektu. Używaj go, gdy chcesz pominąć to, co odziedziczone. Zastępuje starsze wywołanie hasOwnProperty.
• obj.key !== undefined działa w większości przypadków, ale kłamie, gdy właściwość jest jawnie ustawiona na undefined.

W razie wątpliwości wybierz Object.hasOwn: robi to, o co najpewniej ci chodzi.

Metody: funkcje, które mieszkają w obiektach

Właściwość, której wartością jest funkcja, to metoda. Wewnątrz literału obiektu jest dla nich krótka składnia:

const user = {
  name: "Ada",
  greet() {
    return `Hello, I'm ${this.name}`;
  },
};

console.log(user.greet());

this wewnątrz metody wskazuje na obiekt, na którym metodę wywołano, w tym przypadku user. Dzięki temu greet wie, czyjego imienia użyć.

Na jedno trzeba uważać: funkcje strzałkowe nie mają własnego this, więc to zły wybór dla metod, które muszą czytać inne właściwości obiektu:

const user = {
  name: "Ada",
  greet: () => `Hello, I'm ${this.name}`,  // this is NOT user
};

console.log(user.greet());  // Hello, I'm undefined

Do wszystkiego, co korzysta z this, używaj skróconej składni metod (greet() { ... }). Funkcje strzałkowe świetnie sprawdzają się jako callbacki, ale nie jako metody obiektu.

Obiekty zagnieżdżone

Wartościami mogą też być obiekty, i to na dowolnej głębokości:

const user = {
  name: "Ada",
  address: {
    city: "London",
    postcode: "NW1",
  },
  tags: ["admin", "early-adopter"],
};

console.log(user.address.city);
console.log(user.tags[0]);

user.address.city = "Cambridge";
console.log(user.address);

Zagnieżdżoną właściwość odczytujesz przez łańcuch: user.address.city. Haczyk: jeśli którykolwiek krok po drodze to null lub undefined, dostajesz TypeError:

console.log(user.profile.city);
// TypeError: Cannot read properties of undefined (reading 'city')

Optional chaining (user.profile?.city) to współczesne rozwiązanie: zwraca undefined zamiast rzucać błąd, gdy brakuje ogniwa. W dalszej części tego rozdziału jest mu poświęcona osobna strona.

Iterowanie po obiekcie

Gdy musisz przejść po każdym kluczu obiektu, potrzebujesz rodziny Object.keys, Object.values i Object.entries:

const scores = { ada: 95, boris: 82, rosa: 91 };

for (const name of Object.keys(scores)) {
  console.log(name);
}

for (const score of Object.values(scores)) {
  console.log(score);
}

for (const [name, score] of Object.entries(scores)) {
  console.log(`${name}: ${score}`);
}

Object.entries jest najbardziej przydatne: daje klucz i wartość naraz i dobrze łączy się z destrukturyzacją tablic.

Jest też pętla for...in, ale przechodzi również po właściwościach odziedziczonych, a zwykle nie o to chodzi:

for (const key in scores) {
  console.log(key);  // works, but includes inherited keys
}

Wybieraj Object.keys / Object.entries, chyba że naprawdę chcesz uwzględnić właściwości odziedziczone.

Skróty składni, które warto znać

Dwa kawałki lukru składniowego, które zobaczysz wszędzie:

const name = "Ada";
const age = 30;

// Property shorthand: { name: name, age: age }
const user = { name, age };

console.log(user);

// Computed keys: the key comes from an expression
const field = "email";
const update = {
  [field]: "ada@example.com",
  [`${field}Verified`]: true,
};

console.log(update);

Skrócony zapis właściwości (property shorthand) działa, gdy nazwa zmiennej jest taka sama jak klucz. Klucze obliczane (forma [expr]) pozwalają budować nazwy właściwości dynamicznie, co przydaje się przy funkcjach aktualizujących pole po nazwie.

Równość obiektów to równość referencji

Na tym każdy potyka się przynajmniej raz:

const a = { x: 1 };
const b = { x: 1 };
const c = a;

console.log(a === b);  // false - different objects
console.log(a === c);  // true  - same object

=== na obiektach sprawdza, czy obie strony wskazują ten sam obiekt w pamięci, a nie czy mają taką samą zawartość. Dwa obiekty o identycznych właściwościach to nadal dwa różne obiekty.

Żeby sprawdzić, czy mają ten sam kształt, musisz porównać pola ręcznie albo użyć funkcji do głębokiego porównania (deep equality). JSON.stringify(a) === JSON.stringify(b) to szybki i prowizoryczny test, który działa dla zwykłych danych, ale wykłada się na funkcjach, undefined i referencjach cyklicznych.

Obiekty są mutowalne nawet z const

const przypina zmienną do jednej wartości. Nie zamraża obiektu, na który ta wartość wskazuje:

const user = { name: "Ada" };

user.name = "Boris";    // fine - mutating the object
user.age = 30;          // fine - adding a property

console.log(user);

// user = { name: "Rosa" };  // TypeError - reassigning the variable

Jeśli naprawdę chcesz niemutowalności, Object.freeze(user) blokuje dalsze zmiany (płytko: zagnieżdżone obiekty nadal da się zmieniać). W praktyce większość kodu opiera się na konwencji, a nie na Object.freeze: traktuj obiekty z const jako "nie przypisuj ponownie tego wiązania", a niemutowalność rozwiązuj na poziomie projektu.

Dalej: tablice

Obiekty i tablice to dwa klocki, z których zbudowana jest cała reszta. Obiekty obsługują dane z etykietami, tablice dane uporządkowane. W następnej części: jak działają tablice w JavaScript i garść metod (push, slice, map i spółka), które wykonują większość ciężkiej pracy.