Object Destructuring

Setelah menyusun object, kebalikannya juga sering dilakukan: mengambil isi object satu per satu ke variabel. Cara manual — const nama = siswa.nama; lalu const kelas = siswa.kelas; — sah saja, tetapi bertele-tele ketika propertinya banyak, dan mudah tertukar antara nama variabel dengan nama key yang diketik dua kali.

Object destructuring menyelesaikannya dengan satu baris: kita menuliskan “pola” yang menyerupai object literal di sisi kiri assignment, dan JavaScript mengisi setiap nama dalam pola itu dari properti object yang bernama sama. Pola ini juga mendukung penggantian nama (rename), nilai bawaan (default), pembongkaran bertingkat (nested), dan — yang paling sering dipakai — langsung pada parameter function. Chapter ini membahas keempatnya lalu merangkumnya dalam satu berkas profil siswa.

Pola Dasar dan Rename #

Bentuk paling sederhana: kurung kurawal berisi daftar nama key, diikuti = object sumber. Nama variabel yang tercipta sama dengan nama key-nya. Kalau kita ingin variabel dengan nama lain, gunakan titik dua: { key: namaVariabel }:

const buku = { judul: "Pemrograman Web", halaman: 320 };
const { judul, halaman: jumlahHalaman } = buku;
console.log(judul, jumlahHalaman);

Output yang Dihasilkan:

Pemrograman Web 320

Satu baris kedua melakukan dua pekerjaan: membuat variabel judul berisi buku.judul, dan membuat variabel jumlahHalaman berisi buku.halaman. Bentuk { halaman: jumlahHalaman } terbaca sebagai “ambil key halaman, simpan ke variabel jumlahHalaman” — arah alurnya dari kiri (key) ke kanan (variabel).

Mekanisme di baliknya: engine membaca object sumber, lalu untuk setiap nama di dalam pola mencari key yang bernama sama. Key yang ditemukan nilainya diikat ke variabel; key yang tidak ditemukan tetap membuat variabel — berisi undefined — tanpa menimbulkan error. Aturan ini yang membuat destructuring aman untuk object “hampir lengkap”: daftar key dalam pola boleh lebih banyak daripada yang dimiliki object sumber, dan sisanya ditangani oleh default di bagian berikutnya.

Default: Nilai Cadangan untuk Properti yang Tidak Ada #

Bila object sumber tidak memiliki key yang diminta, variabelnya tetap dibuat — tetapi isinya undefined. Tanda = di dalam pola menambahkan nilai cadangan yang terpakai hanya dalam kondisi itu:

const produkA = { stok: 0 };
const produkB = {};
const { stok: stokA = 10 } = produkA;
const { stok: stokB = 10 } = produkB;
console.log("A:", stokA, "| B:", stokB);

Output yang Dihasilkan:

A: 0 | B: 10

Perhatikan stokA tetap 0, bukan 10. Default hanya dipakai ketika nilainya undefined — bukan ketika nilainya 0, string kosong, atau nilai falsy lain. Perilaku ini konsisten dengan nullish coalescing ?? dari section Operators: keduanya hanya merespons kekosongan sejati.

Rename dan default bisa digabung dalam satu entri pola. Urutannya selalu tetap: key dulu, lalu nama variabel, lalu default:

const barang = { nama: "Pulpen" };
const { nama: namaBarang = "Tanpa Nama", kategori: kategoriBarang = "Umum" } = barang;
console.log(namaBarang, kategoriBarang);

Output yang Dihasilkan:

Pulpen Umum

Entri pertama menemukan key nama di dalam barang, sehingga defaultnya terabaikan dan namaBarang berisi "Pulpen". Entri kedua tidak menemukan key kategori sama sekali, sehingga kategoriBarang diisi default "Umum". Dua mekanisme ini bekerja pada dua pertanyaan berbeda: titik dua menjawab “key mana yang dibaca”, tanda sama dengan menjawab “bagaimana bila key itu tidak ada”.

Nested dan Parameter Function yang Didestructure #

Object yang bertingkat bisa dibongkar bertingkat juga: polanya menuliskan kurung kurawal lagi di dalam pola luar. Cara membacanya mengikuti jalur aksesnya — const { nilai: { web } } = siswa adalah versi satu baris dari jejak siswa.nilai.web. Setiap kurung kurawal menurunkan satu tingkat, dan yang tercipta hanyalah variabel di tingkat terdalam.

Sedangkan untuk function, destructuring ditulis langsung di daftar parameter — function menerima object utuh, tetapi di dalam tubuhnya cukup memakai nama-nama propertinya saja.

Membongkar Hasil Function #

Karena destructuring adalah ekspresi assignment, hasil kembalian function pun bisa langsung dibongkar di tempat pemanggilannya. Pola ini sering muncul ketika function pencarian mengembalikan satu data utuh:

function cariPelanggan(id) {
  const data = {
    "P-204": { id: "P-204", nama: "Siti Rahma" },
    "P-118": { id: "P-118", nama: "Budi Santoso" }
  };
  return data[id] || null;
}
const { nama } = cariPelanggan("P-204");
console.log(nama);

Output yang Dihasilkan:

Siti Rahma

Pemanggilan cariPelanggan mengembalikan object pelanggan, dan destructuring langsung mengambil properti nama-nya — tanpa variabel perantara yang menampung object penuh hanya untuk diambil satu properti. Satu catatan dari contoh ini: bila pencarian gagal dan function mengembalikan null, destructuring terhadap null memang menimbulkan error. Untuk data yang bisa tidak ditemukan, baca dengan optional chaining (cariPelanggan(id)?.nama) — materi chapter Optional Properties.

Adapun pola parameter yang didestructure punya keunggulan tambahan yang tidak terlihat di baris kodenya: tanda tangan function menjadi stabil. Menambah properti baru pada object siswa tidak mengubah daftar parameter kartuUjian — function tetap membaca dua key yang ia butuhkan dan mengabaikan sisanya. Pemanggil yang lama tidak perlu disunting, dan urutan argumen tidak pernah menjadi sumber kesalahan karena yang dikirim adalah satu object bernama.

Contoh Lengkap: Profil Siswa #

Berkas berikut merangkum kelima bentuk: pola dasar, rename, default, nested, dan parameter function:

// profil-siswa.js
// Membongkar properti object ke variabel dengan destructuring.

const siswa = {
  nama: "Siti Aminah",
  kelas: "11 RPL 1",
  nilai: {
    matematika: 88,
    web: 95
  }
};

// 1. pola dasar: nama variabel = nama key
const { nama, kelas } = siswa;
console.log("Nama:", nama, "| Kelas:", kelas);

// 2. rename: key "kelas" masuk ke variabel "rombel"
const { kelas: rombel } = siswa;
console.log("Rombel:", rombel);

// 3. default: "kota" tidak ada, "nama" tetap ikut dibongkar
const { kota = "Bandung", nama: namaTampil } = siswa;
console.log("Kota (default):", kota, "| Nama:", namaTampil);

// 4. nested: membongkar isi object di dalam object
const { nilai: { web } } = siswa;
console.log("Nilai web:", web);
console.log("Variabel nilai:", typeof nilai);

// 5. parameter function yang langsung didestructure
function kartuUjian({ nama, kelas }) {
  return nama + " - " + kelas;
}
console.log(kartuUjian(siswa));

Output yang Dihasilkan:

Nama: Siti Aminah | Kelas: 11 RPL 1
Rombel: 11 RPL 1
Kota (default): Bandung | Nama: Siti Aminah
Nilai web: 95
Variabel nilai: undefined
Siti Aminah - 11 RPL 1

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

1. Baris 17 (const { nama, kelas } = siswa;): dua variabel dibuat sekaligus — nama berisi "Siti Aminah" dan kelas berisi "11 RPL 1". Nama variabel mengikuti nama key karena tidak ada titik dua.
2. Baris 20 (const { kelas: rombel } = siswa;): rename. Key yang dibaca tetap kelas, tetapi variabelnya bernama rombel. Bentuk ini dipakai ketika nama key kurang deskriptif atau bertabrakan dengan variabel lain.
3. Baris 23–24 (const { kota = "Bandung", ... }): siswa tidak punya key kota, jadi default "Bandung" terpakai. Properti nama di baris yang sama ikut dibongkar dengan rename — keduanya boleh digabung dalam satu pola.
4. Baris 27 (const { nilai: { web } } = siswa;): nested destructuring. Pola luar membaca key nilai, lalu pola dalam { web } membaca key web dari object tersebut. Hasilnya variabel web berisi 95.
5. Baris 29 (console.log("Variabel nilai:", typeof nilai);): bukti penting dari nested destructuring — variabel nilai tidak dibuat. Hanya variabel terdalam yang tercipta, sehingga typeof nilai menghasilkan "undefined". Bila nilai juga diperlukan, tuliskan const { nilai, nilai: { web } } = siswa;.
6. Baris 32–34 (function kartuUjian({ nama, kelas })): parameter function ditulis sebagai pola destructuring. Ketika kartuUjian(siswa) dipanggil, argumen siswa diterima utuh, lalu langsung dibongkar menjadi nama dan kelas di dalam tubuh function. Pemanggil cukup mengirim object — urutan tidak relevan, dan properti yang tidak dipakai boleh ada.
7. Baris 35 (console.log(kartuUjian(siswa));): menampilkan nilai kembalian function — string hasil penggabungan dua properti yang sudah dibongkar.

Sekarang kita bisa membongkar object. Chapter berikutnya membahas operator tiga titik ... yang mengerjakan kebalikannya sekaligus: menyalin dan menggabungkan object dengan cepat.

// profil-siswa.js
// Membongkar properti object ke variabel dengan destructuring.

const siswa = {
  nama: "Siti Aminah",
  kelas: "11 RPL 1",
  nilai: {
    matematika: 88,
    web: 95
  }
};

// 1. pola dasar: nama variabel = nama key
const { nama, kelas } = siswa;
console.log("Nama:", nama, "| Kelas:", kelas);

// 2. rename: key "kelas" masuk ke variabel "rombel"
const { kelas: rombel } = siswa;
console.log("Rombel:", rombel);

// 3. default: "kota" tidak ada, "nama" tetap ikut dibongkar
const { kota = "Bandung", nama: namaTampil } = siswa;
console.log("Kota (default):", kota, "| Nama:", namaTampil);

// 4. nested: membongkar isi object di dalam object
const { nilai: { web } } = siswa;
console.log("Nilai web:", web);
console.log("Variabel nilai:", typeof nilai);

// 5. parameter function yang langsung didestructure
function kartuUjian({ nama, kelas }) {
  return nama + " - " + kelas;
}
console.log(kartuUjian(siswa));