Obiekty

Tablica z lekcji Tablice trzyma listę wartości pod numerami. Obiekt (object) trzyma wartości pod nazwami: produkt ma nazwa, cena i ilosc, uczeń ma imie i oceny. To najwygodniejszy sposób opisania „jednej rzeczy o wielu cechach” i podstawa wszystkiego, co w JavaScript jest złożone – od document po odpowiedzi serwera. Na egzaminie pisemnym obiekty pojawiają się regularnie, a dystraktory są zawsze te same: składnia z PHP i C++.

Literał obiektu: rekord o nazwanych polach

Obiekt zapisujesz w nawiasach klamrowych jako pary klucz: wartość oddzielone przecinkami. Klucz (nazywany też właściwością, property) to napis – zwykle piszesz go bez cudzysłowów. Wartością może być cokolwiek: liczba, napis, boolean, tablica, funkcja albo inny obiekt.

const produkt = {
  nazwa: 'Chleb żytni',
  cena: 6.5,
  dostepny: true,
  tagi: ['pieczywo', 'żytnie'],
};

console.log(produkt);
console.log(typeof produkt); // object

Porównaj z tablicą: w tablicy musiałbyś pamiętać, że dane[1] to cena. W obiekcie piszesz produkt.cena i każdy to rozumie – to ważne także dla kryterium „znaczące nazewnictwo” na egzaminie praktycznym.

Odczyt właściwości: kropka i nawiasy kwadratowe

var obiekt = { q: 1, w: 2, e: 3, r: 4 };
console.log(obiekt.w);

Są dwa sposoby odczytu i oba zwracają to samo:

const uczen = { imie: 'Ola', klasa: '3TP', srednia: 4.6 };

console.log(uczen.imie);        // kropka – najczęściej
console.log(uczen['imie']);     // nawiasy kwadratowe z napisem

const pole = 'srednia';
console.log(uczen[pole]);       // klucz z ZMIENNEJ – tu kropka nie zadziała
console.log(uczen.pole);        // undefined – szuka klucza o nazwie „pole”

console.log(uczen.telefon);     // undefined – nieistniejąca właściwość to nie błąd

Zasada: kropka, gdy nazwę znasz w momencie pisania kodu; nawiasy kwadratowe, gdy nazwa siedzi w zmiennej (np. pochodzi z wartości kontrolki radio) albo zawiera spacje czy myślniki (style['font-size']).

Dodawanie, zmiana i usuwanie właściwości

Obiekt nie jest zamknięty. Przypisanie do nieistniejącego klucza tworzy go, przypisanie do istniejącego – nadpisuje wartość.

const auto = { marka: 'Skoda', rok: 2018 };

auto.rok = 2019;            // zmiana istniejącej właściwości
auto.kolor = 'czerwony';    // dodanie nowej
auto['przebieg'] = 120000;  // też dodanie

delete auto.przebieg;       // usunięcie
console.log(auto);

console.log('kolor' in auto);  // true – czy klucz istnieje
console.log(Object.keys(auto)); // tablica nazw kluczy

Na egzaminie pytanie o modyfikację brzmi np. „jak zmienić współrzędną x obiektu punkt?”. Poprawna odpowiedź zawsze zaczyna się od nazwy obiektu: punkt.x = 10;. Samo x = 10; tworzy osobną zmienną globalną, a obiekt zostaje bez zmian.

Pętla po właściwościach

Gdy chcesz przejść po wszystkich kluczach (np. wypisać kartę produktu), użyj for...in albo Object.keys z pętlą for...of z lekcji Pętle:

const pizza = { nazwa: 'Margherita', srednica: 32, cena: 29 };

for (const klucz in pizza) {
  console.log(klucz + ': ' + pizza[klucz]); // tu MUSZĄ być nawiasy kwadratowe
}

console.log(Object.keys(pizza).length); // 3 – liczba właściwości (obiekt nie ma .length)

Metody i this

Właściwość, której wartością jest funkcja, nazywa się metodą (method). Wywołujesz ją jak każdą funkcję – z nawiasami. Wewnątrz metody słowo this oznacza „obiekt, na którym mnie wywołano”, więc metoda ma dostęp do pozostałych właściwości.

const konto = {
  wlasciciel: 'Kuba',
  saldo: 120,
  wplac(kwota) {
    this.saldo += kwota;           // this = konto
  },
  opis() {
    return this.wlasciciel + ': ' + this.saldo + ' zł';
  },
};

konto.wplac(80);
console.log(konto.opis());   // Kuba: 200 zł
console.log(typeof konto.opis);   // function – bez nawiasów to sama funkcja
console.log(typeof konto.opis()); // string – z nawiasami to jej wynik

Zapis wplac(kwota) { … } to skrót od wplac: function (kwota) { … } – oba spotkasz w zadaniach. Gdy w pytaniu widzisz x = przedmiot.nazwa();, odpowiedź brzmi: „nazwa jest metodą obiektu przedmiot, a do x trafia to, co ona zwraca”.

Gettery i settery: get i set

Getter (get) to metoda, którą czytasz jak zwykłą właściwość – bez nawiasów. Setter (set) to metoda uruchamiana przy przypisaniu. Pozwalają np. sprawdzić wartość przed zapisem albo obliczyć coś w locie. Działają od ES5 i są jednym z nielicznych „nowszych” elementów składni (obok includes()), które trafiły do arkuszy pisemnych.

var osoba = {
imie: 'Anna',
jezyk: 'EN',
set j(nazwa) {
  ..........
}
};
osoba.j = 'PL';

const prostokat = {
  a: 3,
  b: 4,
  get pole() {                 // czytasz bez nawiasów
    return this.a * this.b;
  },
  set bok(wartosc) {           // przypisanie uruchamia funkcję
    if (wartosc > 0) {
      this.a = wartosc;
      this.b = wartosc;        // prostokąt staje się kwadratem
    }
  },
};

console.log(prostokat.pole);  // 12 – getter, bez ()
prostokat.bok = 5;            // setter
console.log(prostokat.pole);  // 25
prostokat.bok = -2;           // setter odrzuca
console.log(prostokat.a);     // 5

Obiekt jako cennik (słownik)

Najbardziej praktyczne użycie obiektu na egzaminie: zamiast łańcucha if/else if dla każdej opcji trzymasz ceny pod kluczami i wybierasz nawiasami kwadratowymi po wartości, która przyszła z kontrolki. W arkuszu ze stycznia 2025 („Montaż paneli”) trzy przyciski radio odpowiadały rodzajom paneli: laminowane, winylowe i deska, ze stawkami 12, 14 i 18 zł/m².

var cennik = { laminowane: 12, winylowe: 14, deska: 18 };
var rodzaj = 'winylowe';
var koszt = cennik[rodzaj] * 10;

const cennik = { laminowane: 12, winylowe: 14, deska: 18 };

function obliczKoszt(rodzaj, pole) {
  const stawka = cennik[rodzaj];        // klucz z wartości radio
  if (stawka === undefined) return 0;   // nieznany rodzaj
  return stawka * pole;
}

console.log(obliczKoszt('deska', 20));      // 360
console.log(obliczKoszt('winylowe', 12.5)); // 175
console.log(obliczKoszt('parkiet', 10));    // 0

Ten wzorzec działa też dla kodów rabatowych, nazw miast i cen kursów. W lekcji Odczyt kontrolek formularza podłączysz go do prawdziwych radio.

Tablica obiektów

Lista produktów, uczniów czy wiadomości to tablica, której każdy element jest obiektem. Łączysz pętlę po tablicy z dostępem kropką.

const koszyk = [
  { nazwa: 'Zeszyt', cena: 4.5, ilosc: 3 },
  { nazwa: 'Długopis', cena: 2, ilosc: 5 },
  { nazwa: 'Plecak', cena: 89, ilosc: 1 },
];

let suma = 0;
for (const pozycja of koszyk) {
  suma += pozycja.cena * pozycja.ilosc;
}
console.log('Razem: ' + suma.toFixed(2) + ' zł'); // Razem: 112.50 zł

// najdroższa pozycja
let najdrozsza = koszyk[0];
for (let i = 1; i < koszyk.length; i++) {
  if (koszyk[i].cena > najdrozsza.cena) najdrozsza = koszyk[i];
}
console.log(najdrozsza.nazwa); // Plecak

console.log(koszyk[1].nazwa);  // Długopis – najpierw indeks, potem klucz
console.log(koszyk.length);    // 3

Zwróć uwagę na kolejność: koszyk[1] wybiera obiekt, .nazwa – jego pole. Metody tablic takie jak map, filter i find upraszczają te pętle – poznasz je w lekcji Metody tablic wyższego rzędu.

Obiekty zagnieżdżone

Wartością właściwości może być kolejny obiekt. Dostęp to po prostu łańcuch kropek.

const zamowienie = {
  numer: 1042,
  klient: { imie: 'Marta', miasto: 'Gdańsk' },
  pozycje: ['Kurs JavaScript', 'Kurs React'],
};

console.log(zamowienie.klient.miasto);   // Gdańsk
console.log(zamowienie.pozycje[0]);      // Kurs JavaScript
console.log(zamowienie.pozycje.length);  // 2

zamowienie.klient.miasto = 'Sopot';      // zmiana w głębi
console.log(zamowienie.klient);

Jeśli po drodze coś nie istnieje (zamowienie.dostawa.ulica, gdy nie ma dostawa), dostaniesz TypeError: Cannot read properties of undefined. To jeden z najczęstszych błędów w konsoli – nauczysz się go czytać w następnej lekcji.

Referencje: b = a nie kopiuje obiektu

const a = { cena: 4 };
const b = a;
b.cena = 5;
console.log(a.cena);

Liczby i napisy są kopiowane przez wartość. Obiekty (i tablice) – nie. Zmienna trzyma tylko „adres” obiektu w pamięci, czyli referencję (reference). Przypisanie b = a przykleja drugą karteczkę do tego samego obiektu.

const a = { nazwa: 'Chleb', cena: 4 };
const b = a;              // ta sama „rzecz”, druga nazwa
b.cena = 5;
console.log(a.cena);      // 5
console.log(a === b);     // true – ten sam obiekt

const c = { nazwa: 'Chleb', cena: 5 };
console.log(a === c);     // false – inny obiekt, choć taka sama treść

const kopia = { ...a };   // płytka kopia (spread) – osobny obiekt
kopia.cena = 9;
console.log(a.cena);      // 5 – oryginał nietknięty

Ta sama zasada tłumaczy, czemu funkcja, która dostanie obiekt jako argument, może go zmienić „na zewnątrz”. Szczegóły i głębokie kopie – w lekcji Referencje, kopiowanie i mutowalność.

Obiekt w konsoli

console.log(obiekt) pokazuje w konsoli przeglądarki rozwijane drzewo właściwości. Dla tablicy obiektów wygodniejsze jest console.table, a gdy chcesz obiekt jako napis (np. do akapitu), użyj JSON.stringify.

const uczniowie = [
  { imie: 'Ola', srednia: 4.6 },
  { imie: 'Bartek', srednia: 3.9 },
];
console.table(uczniowie);                 // tabelka w DevTools
console.log(JSON.stringify(uczniowie[0])); // {"imie":"Ola","srednia":4.6}
console.log('Uczeń: ' + uczniowie[0]);     // Uczeń: [object Object] – tak NIE

Sklejenie obiektu z napisem daje bezużyteczne [object Object] – zawsze wypisuj konkretne pola albo użyj JSON.stringify (więcej w lekcji Błędy, JSON i localStorage).

Na egzaminie

Ściąga

Zadania

const ksiazka = {
  tytul: 'Wiedźmin',
  autor: 'Andrzej Sapkowski',
  rok: 1990,
  stron: 336,
  gatunki: ['fantasy', 'opowiadania'],
};

// 1. zdanie z pól obiektu (template string z lekcji o napisach)
console.log(`„${ksiazka.tytul}” – ${ksiazka.autor} (${ksiazka.rok}), ${ksiazka.stron} stron`);

// 2. dodanie i zmiana właściwości
ksiazka.przeczytana = false;
ksiazka.przeczytana = true;

// 3. pętla po kluczach – wartość pobieramy nawiasami kwadratowymi
for (const klucz in ksiazka) {
  console.log(klucz + ': ' + ksiazka[klucz]);
}

// 4. tablica wewnątrz obiektu
console.log(ksiazka.gatunki.length); // 2
console.log(ksiazka.gatunki[0]);     // fantasy

const konto = {
  wlasciciel: 'Kuba',
  saldo: 0,
  wplac(kwota) {
    if (kwota > 0) this.saldo += kwota;   // this = konto
  },
  wyplac(kwota) {
    if (kwota <= this.saldo) {
      this.saldo -= kwota;
    } else {
      console.log('Brak środków');
    }
  },
  stan() {
    return `Saldo konta ${this.wlasciciel}: ${this.saldo} zł`;
  },
  get czyPuste() {            // getter – czytany bez nawiasów
    return this.saldo === 0;
  },
};

konto.wplac(200);
konto.wyplac(50);
konto.wyplac(500);            // Brak środków
console.log(konto.stan());    // Saldo konta Kuba: 150 zł
console.log(konto.czyPuste);  // false

const cennik = { laminowane: 12, winylowe: 14, deska: 18 };

function obliczMontaz(szerokosc, dlugosc, rodzaj) {
  const stawka = cennik[rodzaj];                       // kryterium 1
  if (szerokosc <= 0 || dlugosc <= 0 || stawka === undefined) {
    return 'Wprowadź poprawne dane.';                  // kryterium 5
  }
  const pole = szerokosc * dlugosc;                    // kryterium 2
  const koszt = pole * stawka;                         // kryterium 3
  return `Pole powierzchni pomieszczenia: ${pole} m2, koszt montażu ${koszt} zł`; // kryterium 4
}

console.log(obliczMontaz(4, 5, 'laminowane')); // Pole powierzchni pomieszczenia: 20 m2, koszt montażu 240 zł
console.log(obliczMontaz(3, 2.5, 'deska'));    // Pole powierzchni pomieszczenia: 7.5 m2, koszt montażu 135 zł
console.log(obliczMontaz(0, 5, 'deska'));      // Wprowadź poprawne dane.

const uczniowie = [
  { imie: 'Ola', oceny: [5, 4, 5, 6] },
  { imie: 'Bartek', oceny: [2, 1, 2, 2] },
  { imie: 'Zosia', oceny: [3, 4, 3, 5] },
];

const uczniowie = [
  { imie: 'Ola', oceny: [5, 4, 5, 6] },
  { imie: 'Bartek', oceny: [2, 1, 2, 2] },
  { imie: 'Zosia', oceny: [3, 4, 3, 5] },
];

// 1. średnia z tablicy liczb
function srednia(oceny) {
  let suma = 0;
  for (const ocena of oceny) suma += ocena;
  return Number((suma / oceny.length).toFixed(2));
}

// 2. dopisujemy nowe pole do każdego obiektu (zmiana przez referencję)
for (const uczen of uczniowie) {
  uczen.srednia = srednia(uczen.oceny);
}
console.table(uczniowie);

// 3. szukanie maksimum
let najlepszy = uczniowie[0];
for (const uczen of uczniowie) {
  if (uczen.srednia > najlepszy.srednia) najlepszy = uczen;
}
console.log(`Najlepszy wynik: ${najlepszy.imie} (${najlepszy.srednia})`); // Ola (5)

// 4. filtrowanie do nowej tablicy
const zagrozeni = [];
for (const uczen of uczniowie) {
  if (uczen.srednia < 2) zagrozeni.push(uczen.imie);
}
console.log(zagrozeni.length ? zagrozeni.join(', ') : 'Brak zagrożonych'); // Bartek

Test powtórkowy

var obiekt = { q: 1, w: 2, e: 3, r: 4 };

var produkt = { nazwa: 'Mleko', cena: 3 };
var klucz = 'cena';
document.write(produkt.klucz);

var auto = {
kolor: 'biały',
set k(wartosc) {
  ..........
}
};

const a = { punkty: 10 };
const b = a;
b.punkty = 20;
console.log(a.punkty);

var ceny = { maly: 10, duzy: 15 };
var rozmiar = 'duzy';
var wynik = ceny[rozmiar] + ceny.maly;

var zam = {
klient: { imie: 'Ewa', miasto: 'Opole' },
pozycje: ['A', 'B', 'C']
};
console.log(zam.klient.miasto + ' ' + zam.pozycje.length);

var kolo = {
r: 2,
get pole() { return 3 * this.r * this.r; }
};
console.log(kolo.pole);