Bayangin kamu pesan paket Shopee yang isinya banyak barang. Daripada satu-satu nyebut "ini barang dari paket nomor 1", "ini barang dari paket nomor 2", kamu bongkar paket-nya, taruh barang masing-masing di meja: "kasur ke kamar, gelas ke dapur, buku ke rak." Itu destructuring di JavaScript — bongkar object atau array, langsung pisahin nilainya ke variabel terpisah dalam satu baris.

💡 Banget berguna di React. Component React selalu nerima props sebagai object: function Card({ title, image, price }) { ... }. Destructuring di parameter bikin kode jauh lebih readable dibanding function Card(props) { return props.title... } setiap saat. Modern React 100% pake pattern ini.

Object destructuring:

const mahasiswa = { nama: "Budi", umur: 17, kota: "Jakarta" };

// Cara lama
const nama = mahasiswa.nama;
const umur = mahasiswa.umur;

// Destructuring
const { nama, umur, kota } = mahasiswa;
console.log(nama); // "Budi"

Array destructuring:

const warna = ["merah", "hijau", "biru"];

const [pertama, kedua, ketiga] = warna;
console.log(pertama); // "merah"

// Skip elemen
const [, , terakhir] = warna;
console.log(terakhir); // "biru"

Destructuring di parameter fungsi:

function sapa({ nama, umur }) {
  return `Halo ${nama}, umur ${umur}!`;
}
sapa({ nama: "Budi", umur: 17 });

Swap variabel:

let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

🎭 Analogi sehari-hari

Seperti bongkar paket Shopee: kamu pesan paket isi banyak barang. Daripada ngetik paket.barang1, paket.barang2, kamu langsung bongkar:

"Keluarkan saja nama, umur, kota — taruh di meja masing-masing."

Satu baris, semua barang langsung di meja siap dipakai.

⚠️ Jebakan yang sering ditemui

1. Object destructuring: nama variabel HARUS sama dengan key.

const obj = { nama: "Budi" };
const { user } = obj;       // user = undefined (key "user" tidak ada)
const { nama: user } = obj; // user = "Budi" (rename pakai `:`)

2. Array destructuring: berdasarkan URUTAN, bukan nama.

const [a, b] = ["x", "y"];   // a="x", b="y"
const [b, a] = ["x", "y"];   // b="x", a="y" (urutan tetap)

3. Default value cuma jalan untuk undefined, bukan null.

const { nama = "Anonim" } = { nama: undefined }; // "Anonim"
const { nama = "Anonim" } = { nama: null };       // null (!)

4. Destructuring dari nested object butuh nested syntax.

const data = { user: { nama: "Budi" } };
const { nama } = data;             // undefined
const { user: { nama } } = data;   // "Budi"

TL;DR: Destructuring bongkar object/array jadi variabel terpisah dalam 1 baris. Object pakai nama key, array pakai urutan posisi. Default value cuma trigger kalau persis undefined (BUKAN null). Wajib di parameter fungsi React/Vue (function Card({ title, image })). Rest pattern (...sisa) ngumpulin sisa elemen.

🧪 Tebakan cepat — default value rules. Tanpa run, tebak nilai nama:

const { nama = "Anonim" } = { nama: undefined };  // ???
const { nama = "Anonim" } = { nama: null };       // ???
const { nama = "Anonim" } = {};                   // ???
const { nama = "Anonim" } = { nama: "" };         // ???

Jawaban: "Anonim", null, "Anonim", "". Default cuma trigger kalau nilai persis undefined (atau key gak ada). null dan "" dianggap "udah diisi" — bypass default. Bug klasik pas integrasi API yang return null untuk field kosong.