Object — Membaca dan Menulis Property

Tangani 1 produk dengan nama, harga, dan jumlah stoknya di variable terpisah, dan nama variable mulai bentrok begitu kamu punya produk ke-2. Bundel jadi array sebagai gantinya, dan kamu mengelolanya berdasarkan posisi — orang yang menulis kodenya harus ingat apakah product[1] itu harga atau jumlah stok.

Object (struktur data yang menyusun key-value pair dalam 1 variable) membiarkanmu mengambil dan menetapkan value berdasarkan nama sebagai gantinya, seperti product.price.

Membangun Key-Value Pair — Object Literal

Kamu membangun object dengan mendaftar pasangan key: value, dipisah koma, di dalam { dan }. Ini disebut object literal (menulis key dan value langsung di dalam kurung kurawal untuk membangun object).

Tiap pasangan sendiri adalah property (key-value pair yang dipegang sebuah object). length, dari artikel 4, juga sebuah property — untuk object, pasangan key-value inilah yang dimaksud kata itu.

Key adalah string, dan kamu bisa menghilangkan tanda kutip untuk nama seperti name atau price. Value bisa berupa number, string, atau boolean — atau bahkan array atau object lain. Tulis key yang sama dua kali, dan hanya yang ditulis terakhir yang tersisa.

Untuk membaca sebuah value, tulis titik setelah object diikuti nama key-nya, seperti product.price. Ini adalah dot notation (menulis nama key langsung setelah titik untuk membaca sebuah property).

Urutan kamu menulisnya tidak berpengaruh untuk membaca, jadi tidak perlu mengingatnya.

Membaca key yang tidak terdaftar tidak error — dia mengembalikan undefined, sama seperti membaca index di luar jangkauan pada array.

const product = {
  name: "Wireless Mouse",
  price: 3980,
  stock: 24,
};

console.log(product.name);    // Wireless Mouse
console.log(product.price);   // 3980

// Membaca key yang tidak terdaftar tidak error
console.log(product.color);   // undefined

// Menimpa pakai syntax yang sama seperti assignment
product.stock = 23;
console.log(product.stock);   // 23

Bundel profil seorang member jadi 1 object dan ambil field yang kamu perlukan. Value yang dipakai ada di comment console-nya.

① Buat object dengan 3 property: name, plan, dan points.

② Tampilkan name dan plan dalam 1 baris, diformat sebagai "Alice Kim / Standard".

③ Tampilkan points.

④ Baca property email yang tidak terdaftar dan tampilkan apa adanya.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Menaruh Object di Dalam Object

Seperti data order yang dikembalikan dari API, kadang 1 record perlu menyimpan bundel informasi lagi di dalamnya. Taruh object sebagai value, dan itu jadi nested — kamu bisa merangkai . untuk membaca sampai ke dalamnya, seperti order.customer.name.

Hati-hati saat key di tengah rantai hilang.

order.shipping.address memakai . pada order.shipping, yang undefined, dan itu berhenti dengan TypeError. Cara membaca lewat langkah yang hilang tanpa berhenti dibahas di artikel berikutnya.

const order = {
  orderId: "ORD-1042",
  customer: {
    name: "Grace Lee",
    email: "grace@example.com",
  },
  total: 12800,
};

console.log(order.customer.name);    // Grace Lee
console.log(order.customer.email);   // grace@example.com

// Kamu bisa merangkai operasi string ke value yang kamu ambil
console.log(order.customer.name.length);   // 9

Menentukan Key dengan String atau Variable — Bracket Notation

Di layar tempat user memilih field mana yang ditampilkan, key mana yang dibaca tidak diputuskan saat kamu menulis kodenya. Dot notation menulis nama key langsung di kode, jadi ini tidak berfungsi di sini.

Tulis string di dalam [], seperti product["price"], dan string itu dibaca sebagai key-nya. Ini adalah bracket notation (membaca sebuah property memakai string yang ditulis di dalam kurung siku sebagai key).

Apa yang ada di dalam [] dievaluasi dulu, dan hasilnya dipakai sebagai nama key — kamu bahkan bisa menulis sesuatu seperti product["item" + "Name"]. Taruh variable di situ, dan key-nya diputuskan saat runtime.

Dot notation cuma berfungsi untuk nama key tanpa simbol atau spasi yang tidak diawali angka. Key seperti "release-date", dengan tanda hubung, cuma bisa dibaca dengan bracket notation.

const product = {
  name: "Wireless Mouse",
  price: 3980,
  "release-date": "2026-04-01",
};

// Tulis nama key langsung sebagai string
console.log(product["price"]);          // 3980

// Nama key-nya ada di variable
const field = "name";
console.log(product[field]);            // Wireless Mouse

// Key dengan simbol cuma bisa dibaca dengan bracket notation
console.log(product["release-date"]);   // 2026-04-01

// Dot notation akan mencari key bernama literal "field"
console.log(product.field);             // undefined

Baca sebuah value dengan key yang diberikan oleh variable, supaya field yang kamu tampilkan bisa berganti saat runtime. product sudah dideklarasikan.

① Siapkan variable berisi nama field, dan tampilkan harganya dengan membaca lewat variable itu.

② Tukar isi variable yang sama ke nama field stock, dan tampilkan jumlah stoknya.

③ Tampilkan value dari key yang mengandung tanda hubung.

④ Baca nama produk dengan dot notation dan bracket notation, dan tampilkan apakah keduanya sama.

Menambah, Menghapus, dan Mengecek Property

Seperti data di layar settings, beberapa object mendapat field seiring waktu, atau kehilangan field yang tidak lagi dipakai. Kamu bisa menambah atau menghapus property pada sebuah object bahkan setelah dibuat.

Menambah cuma berarti assign sebuah value ke key yang belum ada. Tulis settings.notifications = true;, dan property baru muncul tepat di situ. Sama seperti array, kamu bisa menambah atau menghapus bahkan pada object yang dideklarasikan dengan const.

Untuk menghapus satu, tulis delete settings.language;. delete (operator yang menghapus sebuah property dari object) menghapus key-nya sepenuhnya, jadi membacanya setelah itu mengembalikan undefined.

Cek apakah sebuah key ada dengan "language" in settings. in (operator yang mengembalikan apakah sebuah key ada di sebuah object, sebagai true atau false) mengambil string nama key di kiri dan object di kanan.

Bahkan property yang value-nya undefined mengembalikan true, selama key-nya sendiri ada.

Nama Key yang Typo Tidak Error

Baca key yang tidak ada, seperti member.piont, dan eksekusi tidak berhenti — dia cuma mengembalikan undefined. Tanpa error, kamu mungkin tidak sadar sampai tampilan kosong atau sebuah perhitungan jadi NaN. Untuk mengecek apakah sebuah key ada, pakai in, seperti "points" in member.

const settings = {
  theme: "dark",
  language: "en",
};

// Menambah cuma sebuah assignment
settings.notifications = true;
console.log(settings.notifications);   // true

// delete menghapus key-nya sepenuhnya
delete settings.language;
console.log(settings.language);        // undefined

// in mengembalikan apakah key-nya ada
console.log("language" in settings);   // false
console.log("theme" in settings);      // true

// Bahkan dengan value undefined, true kalau key-nya ada
settings.theme = undefined;
console.log("theme" in settings);      // true

Tambah dan hapus field pada object settings sebuah app, dan cek apa yang tersisa. settings sudah dideklarasikan.

① Tambah field notifications, untuk apakah menerima notifikasi, dengan value true.

② Hapus field language.

③ Cek dan tampilkan, satu per satu, apakah field yang kamu tambah dan yang kamu hapus masih ada.

④ Tampilkan isi object settings apa adanya setelah perubahan.

Mengambil Key dan Value Sekaligus — Object.keys / values / entries

Saat kamu mau menghitung berapa banyak setting yang ada, atau mendaftar tiap field yang terdaftar, menuliskan tiap nama key satu per satu tidak scalable. Ubah isi sebuah object jadi array, dan tiap operasi array jadi tersedia buatmu.

Object.keys(object) mengembalikan array berisi key-nya saja. Object.values(object) mengembalikan array berisi value-nya saja, dan Object.entries(object) mengembalikan array berisi pasangan [key, value], masing-masing array 2 element.

Tidak satu pun yang mengubah object aslinya.

Karena yang kembali adalah array, kamu bisa menghitung field-nya dengan length, menggabungkannya dengan join, atau mencarinya dengan includes. Object.keys(settings).length persis jumlah property object itu.

const order = {
  orderId: "ORD-1042",
  customer: "Grace Lee",
  total: 12800,
};

// Ambil key saja / value saja sebagai array
console.log(Object.keys(order).join(", "));       // orderId, customer, total
console.log(Object.values(order).join(" / "));    // ORD-1042 / Grace Lee / 12800

// Hitung field-nya dengan length milik array
console.log(Object.keys(order).length);           // 3

// entries mengembalikan array pasangan [key, value]
console.log(Object.entries(order)[1].join(": ")); // customer: Grace Lee

Ambil isi object order sebagai key, value, dan pasangan, lalu daftarkan. order sudah dideklarasikan.

① Ambil key saja, digabung dengan ", ", dan tampilkan.

② Tampilkan apakah "Grace Lee" termasuk di antara value-nya.

③ Tampilkan berapa banyak pasangan key-value yang ada.

④ Format tiap pasangan, satu per satu, sebagai "key: value", dan tampilkan ketiga barisnya.