Sintaks object sudah kita kuasai dari literal sampai structuredClone. Tantangan berikutnya bukan lagi “bisakah”, melainkan “bagaimana menatanya supaya masih enak dibaca enam bulan lagi”. Kode yang memakai object hampir selalu membesar: field bertambah, object bersarang, dan variabel penolong bermunculan.

Masalahnya jarang pada satu object yang salah tulis — melainkan pada kebiasaan kecil yang menumpuk: nama key yang tidak konsisten, data yang digandakan ke beberapa tempat, dan struktur yang makin dalam tanpa sadar. Semua itu tidak menghasilkan error, tetapi memperlambat setiap pembacaan dan perubahan berikutnya.

Chapter penutup section ini merangkum kebiasaan yang menjaga object tetap sehat: apa yang sebenarnya dikunci oleh const, kapan mengelompokkan data ke object itu tepat, jebakan key duplikat dalam satu literal, kapan struktur datar lebih baik daripada bertingkat, dan cara menangani nilai turunan. Semuanya dibuktikan lewat kode, lalu ditutup berkas rekap pesanan yang menerapkan kebiasaan tersebut.

const Tidak Membekukan Object #

Kesalahan yang sering terjadi adalah menganggap const membuat isi object tidak bisa diubah. Yang dikunci const adalah ikatan antara nama variabel dengan nilainya — bukan isi object itu sendiri. Mengubah properti tetap sah; mengganti ikatannya dengan object baru yang melanggar:

js 
const batas = { min: 10, max: 50 };
batas.max = 100;
console.log(batas.max);
try {
  batas = { min: 0 };
} catch (error) {
  console.log(error.name + ": " + error.message);
}

Output yang Dihasilkan:

text 
100
TypeError: Assignment to constant variable.

Baris kedua berhasil karena yang berubah adalah isi object; baris keempat menimbulkan TypeError karena ikatan batas dicoba diganti. Kesimpulan praktisnya dua lapis: gunakan const sebagai pilihan bawaan untuk object (agar nama tidak tertukar), dan gunakan Object.freeze dari chapter Object Methods bila isi objectnya pun harus terkunci.

Kelompokkan Data yang Saling Terkait #

Pesan utama section ini: data yang bergerak bersama disimpan bersama. Daftar variabel lepas — namaPelanggan, kotaPelanggan, idPesanan — memaksa setiap function membawa banyak parameter dan membuka peluang tertukar urutan. Object menggantikan daftar itu dengan satu parameter bernama yang key-nya jelas. Berkas contoh di bawah menerapkan gagasan ini: data pelanggan, data pesanan, dan rincian item masing-masing punya wadah, lalu disambungkan lewat key.

Tentukan satu gaya penamaan key sejak awal dan pertahankan. Gaya camelCase seperti pelangganId adalah yang paling lazim di kode JavaScript modern. Key yang bergaya campuran — pelanggan_id di satu tempat, pelangganId di tempat lain — memaksa pembaca mengingat dua nama untuk satu hal, dan konsistensi juga menguntungkan destructuring: nama key yang stabil langsung menjadi nama variabel yang stabil di setiap function yang membongkarnya.

Hindari Key Duplikat dalam Satu Literal #

Karena penulisan object boleh ber-pindah baris, key yang sama bisa tak sengaja ditulis dua kali — terutama setelah object lama disalin lalu disunting. JavaScript tidak memprotes: key terakhir yang menang, tanpa peringatan apa pun:

js 
const statusPesanan = { status: "diproses", status: "selesai" };
console.log(statusPesanan);

Output yang Dihasilkan:

text 
{ status: 'selesai' }

Nilai "diproses" hilang tanpa jejak. Editor modern biasanya menandai key duplikat sebagai peringatan — biarkan peringatan itu menyala dan perlakukan sebagai kesalahan. Shorthand property juga ikut mencegah: dengan { status }, nama key dan sumber nilainya satu kata, sehingga kelebihan key lebih cepat terlihat.

Jaga Kedalaman: Flat Lebih Mudah Dibaca #

Nested object itu sah, tetapi setiap tingkat menambah satu langkah akses dan satu kemungkinan jalur terputus. Struktur tiga tingkat ke bawah biasanya masih nyaman; lebih dari itu, pertimbangkan mendatarkan (flatten):

js 
const dalam = { toko: { pusat: { gudang: { stok: 42 } } } };
console.log(dalam.toko.pusat.gudang.stok);

const datar = { toko: "pusat", gudang: "utama", stok: 42 };
console.log(datar.gudang, datar.stok);

Output yang Dihasilkan:

text 
42
utama 42

Kedua object menyimpan informasi yang sama, tetapi datar bisa dibaca sekilas dan diakses tanpa rantai panjang — plus aman dari kebutuhan optional chaining berlapis. Aturan praktisnya: bersarang hanya bila data memang punya hubungan “milik” (item di dalam pesanan, kontak di dalam profil); bila hubungannya sekadar “atribut”, datarkan.

Jangan Simpan Data Turunan yang Bisa Usang #

Object memudahkan kita menambah field kapan pun — termasuk field yang sebenarnya bisa dihitung dari field lain. Menyimpan nilai turunan seperti total di dalam object yang isinya masih berubah berarti menyimpan dua versi kebenaran:

js 
const nota = {
  item: [{ harga: 10000, jumlah: 2 }, { harga: 5000, jumlah: 1 }],
  total: 25000
};
nota.item[0].jumlah = 3;
console.log(nota.total);
let hitung = 0;
for (let i = 0; i < nota.item.length; i++) {
  hitung += nota.item[i].harga * nota.item[i].jumlah;
}
console.log("Hitung ulang:", hitung);

Output yang Dihasilkan:

text 
25000
Hitung ulang: 35000

Field total dihitung sekali saat object dibuat; ketika jumlah item pertama naik menjadi 3, total tidak ikut — nilainya usang, dan tidak ada mekanisme yang mengingatkan. Solusinya: hitung nilai turunan pada saat dibutuhkan, seperti yang dilakukan variabel hitung di snippet yang sama, atau pusatkan perhitungannya di satu function agar setiap pembaca selalu mendapat angka yang sama.

Contoh Lengkap: Rekap Pesanan #

Sebelum masuk ke berkas, mari kita rangkum kebiasaan yang sudah dibahas menjadi daftar periksa singkat:

  • Gunakan const untuk object; ubah isinya lewat properti, bukan mengganti ikatannya.
  • Kelompokkan data yang bergerak bersama; sambungkan antarobject lewat key penghubung.
  • Satu gaya penamaan key untuk seluruh proyek.
  • Cek literal terhadap key duplikat; biarkan peringatan editor menyala.
  • Jaga kedalaman struktur; datarkan bila hubungannya sekadar atribut.
  • Hitung nilai turunan saat dibutuhkan, jangan disimpan terlebih dahulu.

Berkas berikut menggabungkan kebiasaan di atas: data dikelompokkan, saling terhubung lewat key, dan diproses dengan loop yang ringkas:

js rekap-pesanan.js 
// rekap-pesanan.js
// Menata data pesanan dengan object yang rapi dan mudah dipelihara.

const pelanggan = {
  id: "P-204",
  nama: "Siti Rahma",
  kota: "Bandung"
};

const pesanan = {
  id: "INV-771",
  pelangganId: pelanggan.id,   // data saling terhubung lewat key, bukan variabel lepas
  item: [
    { nama: "Buku Tulis", jumlah: 5, harga: 4000 },
    { nama: "Pulpen", jumlah: 2, harga: 6000 }
  ]
};

let totalItem = 0;
let totalHarga = 0;
for (let i = 0; i < pesanan.item.length; i++) {
  const baris = pesanan.item[i];
  totalItem += baris.jumlah;
  totalHarga += baris.jumlah * baris.harga;
}

console.log("Pesanan", pesanan.id, "-", pelanggan.nama, "(" + pelanggan.kota + ")");
console.log("Total item :", totalItem);
console.log("Total harga: Rp" + totalHarga);

Output yang Dihasilkan:

text 
Pesanan INV-771 - Siti Rahma (Bandung)
Total item : 7
Total harga: Rp32000

Mari kita telaah apa yang terjadi pada baris-baris kode di atas:

  1. Baris 5–9 (const pelanggan = {...}): tiga data milik satu entitas disatukan. Function mana pun yang butuh data pelanggan cukup menerima satu parameter pelanggan, bukan tiga variabel lepas.
  2. Baris 13 (pelangganId: pelanggan.id): pesanan tidak menyalin seluruh profil pelanggan; ia hanya menyimpan id sebagai penghubung. Pola ini menjaga setiap object memuat data yang memang miliknya, dan meniru cara tabel basis data saling terhubung.
  3. Baris 14–17 (item: [ { ... }, { ... } ]): array berisi object-kecil yang strukturnya seragam — setiap item punya nama, jumlah, harga. Struktur seragam inilah yang membuat data mudah diproses dengan loop maupun method array seperti map dari section Arrays.
  4. Baris 20–25 (let totalItem = 0; sampai }): loop membaca array item lewat index, lalu const baris = pesanan.item[i]; menyimpan elemen saat itu agar baris berikutnya pendek. Akumulasi memakai += dari section Operators.
  5. Baris 27–29 (console.log(...)): pembacaan data dari dua object sekaligus — pesanan.id dan pelanggan.nama — tanpa perlu melewatkan banyak parameter, karena datanya sudah dikelompokkan.

Section Objects sampai di sini tuntas: dari kurung kurawal pertama sampai kebiasaan menjaga struktur. Section berikutnya (Strings dan Regex) menengok tipe data yang paling sering mengisi object-object kita — teks.

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

rekap-pesanan.js

Unduh berkas
javascript 
// rekap-pesanan.js
// Menata data pesanan dengan object yang rapi dan mudah dipelihara.

const pelanggan = {
  id: "P-204",
  nama: "Siti Rahma",
  kota: "Bandung"
};

const pesanan = {
  id: "INV-771",
  pelangganId: pelanggan.id,   // data saling terhubung lewat key, bukan variabel lepas
  item: [
    { nama: "Buku Tulis", jumlah: 5, harga: 4000 },
    { nama: "Pulpen", jumlah: 2, harga: 6000 }
  ]
};

let totalItem = 0;
let totalHarga = 0;
for (let i = 0; i < pesanan.item.length; i++) {
  const baris = pesanan.item[i];
  totalItem += baris.jumlah;
  totalHarga += baris.jumlah * baris.harga;
}

console.log("Pesanan", pesanan.id, "-", pelanggan.nama, "(" + pelanggan.kota + ")");
console.log("Total item :", totalItem);
console.log("Total harga: Rp" + totalHarga);