Destructuring Adalah: Cara Ringkas Ambil Data dari Object & Array (JS)

Destructuring adalah fitur JavaScript modern yang memungkinkan kamu mengekstrak nilai dari sebuah object atau array langsung ke dalam variabel terpisah, hanya dalam satu baris kode. Alih-alih menulis const nama = user.nama lalu const umur = user.umur satu per satu, dengan destructuring kamu cukup menulis const { nama, umur } = user dan kedua variabel langsung terbentuk sekaligus. Fitur ini diperkenalkan sejak ES6 (2015) dan sekarang muncul di hampir setiap kode JavaScript modern, terutama di React, di mana kamu akan melihatnya di hampir setiap file.

Di panduan ini kamu akan belajar destructuring benar-benar dari nol: apa itu destructuring dan masalah apa yang ia selesaikan, cara pakainya untuk object maupun array, fitur-fitur turunannya (default value, rename, rest, nested), sampai kasus nyata yang bikin fitur ini wajib dikuasai, lengkap dengan playground yang bisa kamu klik-klik sendiri.

Apa Itu Destructuring?

Destructuring, kadang ditulis “destructuring assignment”, secara harfiah berarti “membongkar struktur”. Ide dasarnya sederhana: kamu punya sebuah struktur data (object atau array), dan kamu ingin mengambil isinya ke dalam variabel-variabel biasa supaya lebih enak dipakai.

Sebelum ES6, cara mengambil beberapa nilai dari sebuah object cukup bertele-tele. Setiap nilai harus diambil satu per satu:

let user = { nama: "Budi", umur: 22, kota: "Bandung" }

// Cara lama, mengulang "user." berkali-kali
let nama = user.nama
let umur = user.umur
let kota = user.kota

Perhatikan pengulangan user. di setiap baris. Untuk tiga properti mungkin masih terasa ringan, tapi bayangkan kalau ada sepuluh. Di sinilah destructuring masuk:

// Cara modern, satu baris, semua variabel terbentuk sekaligus
let { nama, umur, kota } = user

console.log(nama)  // "Budi"
console.log(umur)  // 22
console.log(kota)  // "Bandung"

Kedua kode di atas menghasilkan hasil yang persis sama, tiga variabel nama, umur, dan kota yang berisi nilai dari object user. Bedanya cuma satu: yang kedua jauh lebih ringkas dan mudah dibaca. Itulah inti dari destructuring.

Perbedaan Destructuring dengan Cara Akses Biasa

Karena banyak pemula bingung kapan harus pakai destructuring dan kapan pakai cara biasa, mari lihat perbedaannya berdampingan. Keduanya sah, dan sering dipakai bersama dalam satu file.

Aturan praktisnya: kalau kamu cuma butuh satu nilai sekali pakai, akses biasa (user.nama) sudah cukup dan malah lebih jelas. Kalau kamu butuh beberapa nilai dari object atau array yang sama, destructuring membuat kodemu jauh lebih rapi. Di React, karena kamu hampir selalu mengambil beberapa nilai dari props atau state sekaligus, destructuring menjadi pilihan default.

Destructuring pada Object

Ini bentuk destructuring yang paling sering kamu temui. Kuncinya: nama variabel harus sama persis dengan nama key di dalam object, karena JavaScript mencocokkannya berdasarkan nama, bukan urutan.

let produk = { nama: "Kaos", harga: 75000, stok: 12 }

let { harga, nama } = produk   // urutan bebas, dicocokkan by name

console.log(nama)   // "Kaos"
console.log(harga)  // 75000

Perhatikan bahwa harga ditulis lebih dulu daripada nama, tapi hasilnya tetap benar. Ini karena object destructuring mencocokkan berdasarkan nama key, bukan posisi. Kalau kamu menulis key yang tidak ada di object, variabelnya jadi undefined:

let { warna } = produk   // key "warna" tidak ada
console.log(warna)       // undefined

Coba Sendiri: Bongkar Object & Array

Teori saja belum cukup. Di playground di bawah ini kamu bisa mengubah nilai tiap properti, mencentang properti mana yang mau di-destructure, dan langsung melihat statement const { ... } = user terbentuk otomatis beserta variabel hasilnya. Coba juga tab Array untuk melihat destructuring berbasis posisi:

const user = { nama: "Budi", umur: 22, kota: "Bandung" }
const { nama, umur } = user

Perhatikan pada tab Object: mengubah centang akan mengubah variabel apa saja yang diekstrak, persis seperti kamu memilih key mana yang ingin diambil. Kamu bisa mendalami konsep ini lebih jauh secara interaktif lewat pelajaran Destructuring di Hyper Sheets yang bisa langsung dikerjakan di browser tanpa setup.

Destructuring pada Array

Berbeda dengan object, array destructuring mencocokkan nilai berdasarkan posisi (urutan), bukan nama. Kamu memakai kurung siku [] dan nama variabelnya bebas kamu tentukan:

let warna = ["merah", "hijau", "biru"]

let [pertama, kedua, ketiga] = warna

console.log(pertama)  // "merah"  (index 0)
console.log(kedua)    // "hijau"  (index 1)
console.log(ketiga)   // "biru"   (index 2)

Karena berbasis posisi, kamu bisa melewati elemen yang tidak dibutuhkan dengan mengosongkan slot-nya (cukup taruh koma):

let [warna1, , warna3] = warna   // lewati elemen tengah

console.log(warna1)  // "merah"
console.log(warna3)  // "biru"

Fitur Turunan yang Sering Dipakai

Setelah paham dasarnya, ada beberapa fitur tambahan yang membuat destructuring benar-benar bertenaga. Keempat ini paling sering muncul di kode nyata.

1. Nilai Default

Kamu bisa memberi nilai cadangan yang dipakai kalau properti tidak ada atau bernilai undefined:

let user = { nama: "Budi" }

let { nama, kota = "Tidak diketahui" } = user

console.log(nama)  // "Budi"
console.log(kota)  // "Tidak diketahui" (karena user.kota undefined)

2. Rename (Ganti Nama Variabel)

Kadang nama key tidak cocok untuk dijadikan nama variabel, atau bentrok dengan variabel lain. Kamu bisa menggantinya dengan tanda titik dua ::

let user = { nama: "Budi", umur: 22 }

let { nama: namaLengkap, umur: usia } = user

console.log(namaLengkap)  // "Budi"
console.log(usia)         // 22
// console.log(nama)      // ERROR! variabel "nama" tidak dibuat

Baca nama: namaLengkap sebagai “ambil key nama, simpan ke variabel bernama namaLengkap”. Ini sering bikin bingung karena sekilas mirip penulisan object biasa, padahal maknanya kebalikannya.

3. Rest Pattern

Dengan operator ... (rest), kamu bisa mengambil beberapa properti tertentu dan menampung sisanya ke dalam object atau array baru:

let user = { nama: "Budi", umur: 22, kota: "Bandung", aktif: true }

let { nama, ...sisanya } = user

console.log(nama)      // "Budi"
console.log(sisanya)   // { umur: 22, kota: "Bandung", aktif: true }

Untuk array, konsepnya sama, sisa elemen ditampung sebagai array baru:

let [juara, ...lainnya] = ["Andi", "Budi", "Sari"]

console.log(juara)     // "Andi"
console.log(lainnya)   // ["Budi", "Sari"]

4. Nested Destructuring

Kalau object-nya bersarang, kamu bisa membongkarnya sampai ke dalam:

let user = {
  nama: "Budi",
  alamat: { kota: "Bandung", kodePos: "40123" }
}

let { alamat: { kota } } = user

console.log(kota)   // "Bandung"

Destructuring di Parameter Fungsi

Salah satu tempat destructuring paling berguna adalah di parameter fungsi. Alih-alih menerima seluruh object lalu mengaksesnya satu per satu, kamu bisa langsung membongkar properti yang dibutuhkan di dalam tanda kurung fungsi:

// Tanpa destructuring
function sapa(user) {
  return `Halo, ${user.nama}! Umur ${user.umur}.`
}

// Dengan destructuring di parameter, lebih bersih
function sapa({ nama, umur }) {
  return `Halo, ${nama}! Umur ${umur}.`
}

sapa({ nama: "Budi", umur: 22 })  // "Halo, Budi! Umur 22."

Pola ini ada di mana-mana di React. Sebuah komponen menerima props berupa object, dan hampir selalu langsung di-destructure di parameter:

// Pola khas komponen React
function KartuUser({ nama, umur, kota }) {
  return <div>{nama} ({umur}) dari {kota}</div>
}

Kalau kamu sedang atau akan belajar React, kamu akan melihat pola ini di setiap komponen. Untuk memahami konteksnya lebih lengkap, panduan belajar React dari nol menunjukkan bagaimana destructuring props dipakai dalam praktik nyata.

Menukar Nilai Dua Variabel

Ada satu trik klasik yang jadi contoh favorit kekuatan array destructuring: menukar isi dua variabel tanpa variabel bantuan (temp):

let a = 1
let b = 2

;[a, b] = [b, a]   // tukar dalam satu baris!

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

Sebelum ada destructuring, menukar nilai butuh variabel ketiga sebagai penampung sementara. Sekarang cukup satu baris. (Perhatikan titik koma ; di depan [a, b], ia diperlukan agar baris ini tidak salah disambung dengan baris sebelumnya.)

Kesalahan Umum Pemula dengan Destructuring

Beberapa jebakan yang hampir semua pemula alami saat pertama kali memakai destructuring:

1. Tertukar antara {} dan []. Object pakai kurung kurawal {} dan cocok by name; array pakai kurung siku [] dan cocok by position. Memakai {} untuk array (atau sebaliknya) tidak akan bekerja seperti yang kamu harapkan.

2. Salah paham arah rename. Pada { nama: namaBaru }, nama adalah key yang diambil dan namaBaru adalah variabel yang dibuat, bukan sebaliknya. Setelah itu variabel nama tidak ada.

3. Mengira nama variabel object bisa bebas. Di object destructuring, let { x } = user hanya bekerja kalau ada key bernama x. Kalau mau nama lain, kamu harus rename dengan :. Berbeda dengan array yang namanya memang bebas.

4. Destructure nilai null atau undefined. Membongkar object yang ternyata null atau undefined akan menyebabkan error. Beri default atau cek dulu:

let data = null
// let { nama } = data          // TypeError!
let { nama } = data || {}       // aman, pakai object kosong sebagai cadangan

5. Lupa titik koma sebelum swap. Pola tukar ;[a, b] = [b, a] butuh titik koma di depan kalau baris sebelumnya tidak diakhiri ;, karena JavaScript bisa salah menyambungnya dengan baris atas.

FAQ Seputar Destructuring

Apa itu destructuring di JavaScript dengan bahasa sederhana?

Destructuring adalah cara cepat mengambil nilai dari sebuah object atau array dan langsung menaruhnya ke variabel terpisah, dalam satu baris. Bayangkan kamu punya sebuah kotak berisi banyak barang berlabel; destructuring membuatmu bisa mengeluarkan beberapa barang sekaligus ke wadah masing-masing tanpa mengambilnya satu per satu. Tujuannya membuat kode lebih pendek dan mudah dibaca.

Apa bedanya destructuring object dan array?

Perbedaan intinya ada pada cara pencocokan. Object destructuring memakai kurung kurawal {} dan mencocokkan berdasarkan nama key, sehingga urutan penulisan bebas tapi nama variabel harus sama dengan key. Array destructuring memakai kurung siku [] dan mencocokkan berdasarkan posisi, sehingga nama variabel bebas tapi urutannya menentukan nilai apa yang didapat.

Apakah destructuring mengubah object atau array aslinya?

Tidak. Destructuring hanya membaca nilai dari object atau array lalu menyalinnya ke variabel baru; struktur aslinya tetap utuh dan tidak berubah. Ini operasi baca saja, jadi aman dipakai tanpa khawatir merusak data sumber.

Kapan sebaiknya memakai destructuring?

Gunakan destructuring ketika kamu perlu mengambil beberapa nilai dari object atau array yang sama sekaligus, di situ ia paling terasa manfaatnya. Kalau kamu cuma butuh satu nilai sesekali, akses biasa seperti user.nama justru lebih jelas. Di React, karena kamu hampir selalu mengambil beberapa nilai dari props atau state, destructuring hampir selalu dipakai.

Apa itu rest pattern dalam destructuring?

Rest pattern memakai tiga titik ... untuk menampung “sisa” properti atau elemen yang tidak kamu sebutkan ke dalam object atau array baru. Misalnya const { nama, ...sisanya } = user mengambil nama secara terpisah, lalu semua properti lainnya masuk ke object sisanya. Berguna saat kamu ingin memisahkan satu bagian data dari sisanya.

Apakah destructuring bisa dipakai tanpa let atau const?

Bisa, tapi butuh perhatian khusus. Untuk object destructuring ke variabel yang sudah ada (tanpa let/const), seluruh ekspresi harus dibungkus tanda kurung: ({ nama } = user). Ini karena { di awal baris dianggap sebagai blok kode, bukan object. Untuk pemula, paling aman selalu deklarasikan dengan const atau let saat destructuring.

Setelah Menguasai Destructuring, Belajar Apa?

Destructuring adalah salah satu fitur “penghubung” yang membuka banyak topik lanjutan:

1. Spread operator (...), saudara dekat rest pattern, dipakai untuk menyalin dan menggabungkan array atau object. Keduanya memakai simbol yang sama tapi arah kebalikannya.
2. React, di sinilah destructuring paling sering kamu pakai untuk membongkar props dan state. Lanjutkan ke belajar React dari nol untuk melihatnya beraksi.
3. Modules (import), sintaks import { useState } from 'react' juga mengambil bentuk mirip destructuring.

Untuk memperkuat fondasi di baliknya, baca panduan lengkap belajar JavaScript dari nol yang membahas object dan array secara berdampingan, dua struktur yang menjadi bahan baku destructuring. Kalau kamu ingin langsung praktik destructuring secara bertahap dengan latihan yang dinilai otomatis, pelajaran Destructuring di Hyper Sheets adalah tempat yang tepat untuk memantapkannya. Mulai dari yang kecil, banyak bereksperimen di console browser, dan destructuring akan segera terasa seperti alat yang sangat natural.