Destructuring JavaScript: Membongkar Array dan Objek dengan Rapi

Sampai di sini kamu sudah cukup sering mengeluarkan nilai dari array dan objek dengan cara panjang — satu baris untuk satu nilai, diambil lewat index atau lewat key. Cara itu memang berhasil, tapi cepat terasa bertele-tele kalau nilainya banyak. Destructuring adalah jalan pintas modern untuk itu: sebuah sintaks (hadir sejak ES2015) yang membongkar nilai dari array dan objek langsung ke dalam variabel, sering kali cukup dalam satu baris. Begitu kamu paham, sintaks ini bakal sering banget kamu pakai — dan kamu mulai melihatnya di mana-mana saat membaca kode orang lain, mulai dari komponen React sampai modul Node.js.

Artikel ini mengandaikan kamu sudah nyaman dengan dasar array dan objek. Kalau user.name dan fruits[0] masih bikin ragu, baca dulu artikel sebelumnya sekali lagi — destructuring sebenarnya cuma cara yang lebih cepat untuk melakukan hal yang persis sama.

Apa sebenarnya yang dilakukan destructuring

Destructuring itu cara menulis assignment di mana sisi kiri meniru bentuk data yang ada di sisi kanan. Daripada menyebut satu nilai satu per satu, kamu cukup menggambarkan polanya, lalu JavaScript yang mengisi potongan-potongan yang cocok.

Ini cara lama untuk mengambil beberapa nilai dari sebuah objek:

const user = { name: "John Doe", age: 28, city: "Jakarta" };

const name = user.name;
const age = user.age;
const city = user.city;

Tiga baris yang isinya pada dasarnya sama saja. Dengan destructuring, semua itu menyusut jadi satu baris:

const user = { name: "John Doe", age: 28, city: "Jakarta" };

const { name, age, city } = user;

console.log(name);   // "John Doe"
console.log(age);    // 28
console.log(city);   // "Jakarta"

Kurung kurawal di sisi kiri itu bukan sedang membuat objek — itu sebuah pola. JavaScript membacanya sebagai “cari property name, age, dan city di objek sebelah kanan, lalu buat variabel lokal dengan nama yang sama.” Hasilnya sama persis, tapi ketikannya tinggal seperempatnya.

Destructuring array

Kita mulai dari array dulu, karena aturannya gampang: variabel dipasangkan berdasarkan posisi. Kamu tulis kurung siku di sisi kiri, daftar nama variabelnya, dan nama-nama itu akan diisi dari array secara berurutan.

const colors = ["red", "green", "blue"];

const [first, second, third] = colors;

console.log(first);    // "red"
console.log(second);   // "green"
console.log(third);    // "blue"

Nama variabelnya bebas kamu tentukan — di sini first, second, third, tapi terserah mau diberi nama apa. Yang penting adalah urutannya: nama pertama menangkap item pertama, dan begitu seterusnya.

Melewati item

Kamu nggak harus mengambil semua elemen. Biarkan satu slot kosong (cukup dengan koma) untuk melewati item di posisi itu:

const scores = [90, 85, 70, 60];

const [top, , third] = scores;

console.log(top);     // 90
console.log(third);   // 70

Slot kosong di antara dua koma itu memberitahu JavaScript “lewati index 1, aku nggak butuh.” Berguna ketika kamu cuma peduli pada beberapa item dari daftar yang lebih panjang.

Menukar nilai variabel

Ada satu trik rapi yang bikin destructuring array terasa hampir ajaib. Dulu, menukar isi dua variabel butuh variabel ketiga sebagai penampung sementara. Sekarang cukup satu baris:

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a);   // 2
console.log(b);   // 1

Sisi kanan membentuk array singkat [2, 1], lalu sisi kiri langsung membongkarnya kembali ke a dan b — dalam keadaan tertukar. Bersih, tanpa variabel penampung sama sekali.

Destructuring objek

Di objeklah destructuring benar-benar menunjukkan gunanya, karena data di dunia nyata sebagian besar berupa objek. Seperti tadi, kamu pakai kurung kurawal dan nama variabel harus sama dengan nama property:

const product = {
  title: "Wireless Keyboard",
  price: 250000,
  inStock: true,
};

const { title, price, inStock } = product;

console.log(title);     // "Wireless Keyboard"
console.log(price);     // 250000
console.log(inStock);   // true

Karena pemasangannya lewat nama dan bukan posisi, kamu boleh menulis property-nya dalam urutan apa pun, dan kamu bisa memilih hanya yang kamu butuhkan saja — nggak ada keharusan mengambil semua property.

Mengganti nama sambil destructuring

Kadang nama property bukan nama variabel yang kamu inginkan — mungkin terlalu umum, atau bentrok dengan variabel yang sudah ada. Kamu bisa menggantinya langsung di tempat dengan tanda titik dua:

const response = { id: 42, n: "Jane Doe" };

const { id: userId, n: userName } = response;

console.log(userId);     // 42
console.log(userName);   // "Jane Doe"

Bacanya begini: “ambil property id, lalu beri nama userId.” Sintaksnya memang sekilas terasa terbalik (namaLama: namaBaru), tapi sebenarnya konsisten dengan cara objek literal ditulis.

Nilai default

Kalau sebuah property mungkin saja tidak ada, secara normal destructuring akan memberimu undefined. Kamu bisa menyiapkan nilai cadangan dengan =, dan nilai itu hanya dipakai ketika nilainya memang tidak ada:

const settings = { theme: "dark" };

const { theme, fontSize = 16 } = settings;

console.log(theme);      // "dark"
console.log(fontSize);   // 16  (settings.fontSize tidak ada, jadi default dipakai)

Ada satu detail halus yang penting kamu tahu: nilai default hanya aktif kalau nilainya undefined — bukan kalau nilainya null, 0, false, atau string kosong. Semua itu dianggap nilai yang sah, jadi tetap dipertahankan apa adanya.

const config = { count: 0, label: null };

const { count = 10, label = "none" } = config;

console.log(count);   // 0     (0 adalah nilai sah — default diabaikan)
console.log(label);   // null  (null adalah nilai sah — default diabaikan)

Perbedaan ini sering bikin orang kepleset. Kalau kamu benar-benar ingin punya cadangan untuk null juga, kamu harus melakukan pengecekan eksplisit, bukan mengandalkan nilai default.

Menggabungkan ganti nama dan default

Kamu bisa mengganti nama sekaligus menetapkan default dalam satu tulisan. Urutannya: ganti nama dulu, baru default:

const user = {};

const { name: fullName = "Guest" } = user;

console.log(fullName);   // "Guest"

Di sini user tidak punya property name, jadi nilai default "Guest" yang dipakai, dan nilai itu masuk ke variabel bernama fullName. Bacanya: “ambil name, beri nama fullName, dan kalau tidak ada, pakai 'Guest'.”

Nested destructuring

Data nyata sering bertingkat — objek di dalam objek, array di dalam objek. Destructuring bisa menggali sampai ke lapisan-lapisan itu dalam sekali tulis, dengan cara meniru bentuk bertingkatnya:

const order = {
  customer: { name: "John Doe", email: "john@example.com" },
  total: 490000,
};

const { customer: { name, email }, total } = order;

console.log(name);    // "John Doe"
console.log(email);   // "john@example.com"
console.log(total);   // 490000

Polanya mengikuti struktur datanya: untuk masuk ke customer, kamu tulis customer: { ... } lalu daftar property dalamnya yang kamu mau. Perhatikan bahwa customer sendiri di sini tidak menjadi variabel — dia cuma berperan sebagai jalan untuk menembus ke dalam. Kalau kamu juga butuh customer sebagai variabel, kamu harus mendestructure-nya di baris tersendiri.

Destructuring di parameter fungsi

Di sinilah destructuring jadi benar-benar bertenaga, dan ini mungkin pola yang paling sering kamu pakai. Daripada menerima satu objek utuh lalu mengeluarkan field-nya di dalam fungsi, kamu bisa langsung destructure di daftar parameter. Kalau kamu sudah membaca artikel fungsi, bagian ini menyambung langsung dari sana.

function greet({ name, role }) {
  console.log(`Hi ${name}, kamu seorang ${role}.`);
}

const employee = { name: "Jane Doe", role: "Designer", id: 7 };

greet(employee);   // "Hi Jane Doe, kamu seorang Designer."

Fungsi tadi cuma meminta dua field yang benar-benar dibutuhkannya — name dan role — dan mengabaikan sisanya. Ini cara yang sangat umum untuk menulis fungsi yang menerima “objek opsi”, karena sisi pemanggilnya tetap mudah dibaca dan tanda tangan fungsinya sekaligus mendokumentasikan apa saja yang sebenarnya dipakai.

Kamu juga bisa menyisipkan nilai default di sini, yang menghasilkan fungsi yang rapi dan mudah dikonfigurasi:

function createButton({ label = "Click me", color = "blue" } = {}) {
  console.log(`Button: ${label} (${color})`);
}

createButton({ label: "Save" });   // "Button: Save (blue)"
createButton();                    // "Button: Click me (blue)"

Tulisan = {} di belakang parameter itu bagian kecil tapi penting: artinya “kalau tidak ada argumen yang dikirim sama sekali, pakai objek kosong sebagai default.” Tanpa itu, memanggil createButton() tanpa apa-apa akan error, karena undefined tidak bisa didestructure.

Destructuring di dalam loop

Destructuring berpadu cantik dengan loop yang sudah kamu kenal. Ketika kamu menyusuri sebuah array berisi objek — bentuk data paling umum di dunia nyata — kamu bisa langsung membongkar tiap item di bagian header loop. Kalau materi perulangan masih segar di ingatanmu, ini menyambung pas:

const team = [
  { name: "John Doe", role: "Developer" },
  { name: "Jane Doe", role: "Designer" },
];

for (const { name, role } of team) {
  console.log(`${name} — ${role}`);
}
// "John Doe — Developer"
// "Jane Doe — Designer"

Bagian { name, role } di header for...of itu mendestructure tiap objek setiap kali loop mengunjunginya, jadi di dalam badan loop kamu langsung bekerja dengan variabel yang bersih dan bernama, bukan team[i].name. Bacanya hampir seperti kalimat biasa.

Penutup

Destructuring termasuk fitur yang sekilas terasa cuma sekadar mempermudah, lalu diam-diam mengubah cara kamu menulis JavaScript. Ini ringkasan bentuknya:

• Destructuring membongkar nilai dari array dan objek ke dalam variabel, dengan pola di sisi kiri yang meniru bentuk data di sisi kanan.
• Destructuring array memakai [ ] dan dipasangkan berdasarkan posisi. Kamu bisa melewati item dengan slot kosong dan menukar isi variabel dalam satu baris.
• Destructuring objek memakai { } dan dipasangkan berdasarkan nama property. Nama variabelmu harus sama dengan key — kecuali kamu menggantinya dengan titik dua ({ key: namaBaru }).
• Nilai default dengan = mengisi nilai yang hilang, tapi hanya ketika nilainya undefined — bukan untuk null, 0, false, atau "".
• Destructuring bisa bertingkat untuk menjangkau struktur yang lebih dalam, sangat berguna di parameter fungsi (terutama “objek opsi” dengan pengaman = {}), dan terbaca rapi di dalam loop for...of.
• Kamu tidak bisa destructure null atau undefined — selalu pastikan ada objek di sisi kanan.

Destructuring juga berpadu alami dengan saudara dekatnya, yaitu operator spread dan rest — tanda ... yang mungkin sudah kamu lihat sekilas di kode modern. Itulah bahasan artikel berikutnya, dan bersama destructuring, keduanya membentuk satu set perkakas yang akan kamu pakai untuk memindahkan data dengan rapi di hampir setiap proyek JavaScript modern.