Teknik Membongkar Data

Kenapa ini penting

Bayangkan kamu menerima paket berisi banyak barang. Kamu tidak akan membawa kardusnya ke mana-mana lalu setiap kali butuh sesuatu bilang "ambil barang di kardus bagian kiri atas". Kamu bongkar, lalu taruh tiap barang di tempatnya. Destructuring adalah cara JavaScript membongkar object dan array menjadi variabel-variabel terpisah dalam satu baris.

Di dunia nyata, data datang dalam bentuk object besar: response API, konfigurasi, props komponen React, baris dari database. Tanpa destructuring kamu menulis user.profile.address.city berulang-ulang. Dengan destructuring, kodenya lebih pendek, lebih jelas niatnya, dan lebih aman karena kamu bisa memberi nilai default ketika data tidak ada. Hampir semua kode JavaScript modern (React, Node.js, library populer) memakai pola ini, jadi kamu wajib lancar membacanya.

Konsep inti

Destructuring object

Sintaksnya memakai kurung kurawal di sisi kiri tanda =. Nama variabel harus sama dengan nama properti:

const user = { nama: "Sari", umur: 24, kota: "Bandung" };
const { nama, kota } = user; // ambil dua properti saja

Urutan tidak penting, karena object dicocokkan berdasarkan nama kunci.

Destructuring array

Array dicocokkan berdasarkan posisi. Kamu boleh melewati elemen dengan koma kosong:

const warna = ["merah", "hijau", "biru"];
const [pertama, , ketiga] = warna; // lewati elemen kedua

Default value, rename, dan nested

Catatan penting: default value hanya aktif untuk undefined, bukan untuk null, 0, atau "". Ini sering mengejutkan pemula.

Rest vs spread

Keduanya memakai tiga titik ..., tapi perannya berlawanan:

• Rest (di sisi kiri / parameter): mengumpulkan banyak nilai menjadi satu array atau object.
• Spread (di sisi kanan / argumen): menyebarkan isi array atau object ke tempat lain.

Analogi: rest itu seperti menyapu remah-remah ke satu wadah, spread itu seperti menuang isi wadah ke meja.

Destructuring di parameter function

Ini pola paling sering kamu temui. Function menerima satu object "opsi", lalu langsung dibongkar di parameter:

function buatAkun({ email, peran = "member" } = {}) { /* ... */ }

= {} di akhir membuat function tetap aman dipanggil tanpa argumen.

Contoh kode

// Data seperti response API sungguhan
const response = {
  id: 101,
  nama: "Budi Santoso",
  kontak: { email: "budi@contoh.id", telepon: null },
  alamat: { kota: "Yogyakarta", kodePos: "55281" },
  hobi: ["fotografi", "mendaki", "masak"],
};

// 1. Destructuring dasar + rename + nested
const {
  nama: namaLengkap,
  alamat: { kota },
  kontak: { email, telepon = "-" }, // telepon null, default TIDAK dipakai
} = response;
console.log(namaLengkap, kota, email, telepon);
// → Budi Santoso Yogyakarta budi@contoh.id null

// 2. Pakai ?? kalau ingin null juga diganti
const teleponAman = response.kontak.telepon ?? "-";
console.log(teleponAman); // → -

// 3. Destructuring array + rest
const [hobiUtama, ...hobiLain] = response.hobi;
console.log(hobiUtama, hobiLain); // → fotografi [ 'mendaki', 'masak' ]

// 4. Tukar nilai dua variabel tanpa variabel bantu
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // → 2 1

// 5. Rest pada object: buang properti sensitif
const akun = { id: 1, username: "sari", password: "rahasia123" };
const { password, ...akunPublik } = akun;
console.log(akunPublik); // → { id: 1, username: 'sari' }

// 6. Spread: salin & gabung tanpa mengubah aslinya
const pengaturanDefault = { tema: "terang", bahasa: "id", notifikasi: true };
const pilihanUser = { tema: "gelap" };
const pengaturan = { ...pengaturanDefault, ...pilihanUser }; // yang belakang menang
console.log(pengaturan); // → { tema: 'gelap', bahasa: 'id', notifikasi: true }

const angka = [3, 9, 1];
console.log(Math.max(...angka)); // → 9

// 7. Destructuring di parameter function
function kirimEmail({ ke, subjek = "(tanpa subjek)", cc = [] } = {}) {
  return `Ke: ${ke} | Subjek: ${subjek} | CC: ${cc.length}`;
}
console.log(kirimEmail({ ke: "rina@contoh.id" }));
// → Ke: rina@contoh.id | Subjek: (tanpa subjek) | CC: 0

// 8. Destructuring saat loop
const produk = [
  { nama: "Kopi", harga: 25000 },
  { nama: "Teh", harga: 15000 },
];
for (const { nama, harga } of produk) {
  console.log(`${nama}: Rp${harga}`);
}
// → Kopi: Rp25000
// → Teh: Rp15000

// 9. Object.entries + destructuring array
for (const [kunci, nilai] of Object.entries(pengaturan)) {
  console.log(kunci, "=", nilai);
}
// → tema = gelap
// → bahasa = id
// → notifikasi = true

Perhatikan bahwa spread hanya melakukan shallow copy (salinan dangkal). Object di dalam object masih menunjuk ke data yang sama:

const asli = { info: { level: 1 } };
const salinan = { ...asli };
salinan.info.level = 99;
console.log(asli.info.level); // → 99 (ikut berubah!)

const salinanDalam = structuredClone(asli); // deep copy bawaan modern
salinanDalam.info.level = 5;
console.log(asli.info.level); // → 99 (aman)

Kesalahan umum

1. Mengira default berlaku untuk null. const { x = 5 } = { x: null } menghasilkan x = null. Kalau ingin menangani null juga, pakai ?? setelah destructuring.
2. Destructuring dari undefined. const { a } = undefined langsung error Cannot destructure property. Beri default = {} di parameter, atau pastikan datanya ada.
3. Lupa tanda kurung saat destructuring ke variabel yang sudah ada. { a, b } = obj; dianggap blok kode. Yang benar: ({ a, b } = obj);.
4. Bingung arah rename. Di { nama: n }, yang di kiri adalah nama properti, yang di kanan adalah variabel baru. Bukan sebaliknya.
5. Menganggap spread itu deep copy. Spread hanya menyalin satu lapis. Untuk data bersarang pakai structuredClone().

Latihan

1. Mudah, Dari const buku = { judul: "Laskar Pelangi", penulis: "Andrea Hirata", tahun: 2005 }, ambil judul dan tahun dengan destructuring, lalu cetak "Laskar Pelangi (2005)".
2. Sedang, Buat function formatAlamat yang menerima object { jalan, kota, provinsi = "DKI Jakarta" } lewat destructuring parameter dan mengembalikan string "Jl. X, Kota, Provinsi". Function harus aman dipanggil tanpa argumen (kembalikan "Alamat kosong").
3. Menantang, Diberikan array transaksi [["2026-10-01", "Gaji", 8000000], ["2026-10-02", "Makan", -45000]]. Ubah menjadi array object { tanggal, keterangan, jumlah } memakai destructuring di dalam map, lalu hitung total dengan reduce.

// 1
const buku = { judul: "Laskar Pelangi", penulis: "Andrea Hirata", tahun: 2005 };
const { judul, tahun } = buku;
console.log(`${judul} (${tahun})`); // → Laskar Pelangi (2005)

// 2
function formatAlamat({ jalan, kota, provinsi = "DKI Jakarta" } = {}) {
  if (!jalan || !kota) return "Alamat kosong";
  return `Jl. ${jalan}, ${kota}, ${provinsi}`;
}
console.log(formatAlamat({ jalan: "Sudirman 5", kota: "Jakarta Pusat" }));
// → Jl. Sudirman 5, Jakarta Pusat, DKI Jakarta
console.log(formatAlamat()); // → Alamat kosong

// 3
const mentah = [["2026-10-01", "Gaji", 8000000], ["2026-10-02", "Makan", -45000]];
const transaksi = mentah.map(([tanggal, keterangan, jumlah]) => ({ tanggal, keterangan, jumlah }));
const total = transaksi.reduce((acc, { jumlah }) => acc + jumlah, 0);
console.log(transaksi[1]); // → { tanggal: '2026-10-02', keterangan: 'Makan', jumlah: -45000 }
console.log(total); // → 7955000

Ringkasan

• Destructuring object mencocokkan berdasarkan nama kunci, destructuring array berdasarkan posisi.
• Default value hanya aktif untuk undefined; untuk null gunakan ??.
• Rename memakai { asli: baru }, nested memakai { luar: { dalam } }.
• ... di sisi kiri = rest (mengumpulkan), di sisi kanan = spread (menyebarkan).
• Spread itu shallow copy; pakai structuredClone() untuk deep copy.
• Pola function f({ a, b = 1 } = {}) adalah cara standar menerima opsi.