Mengambil isi array lewat index bekerja dengan baik, tetapi menimbulkan dua ketidakpraktisan yang berulang terus. Pertama, tiga nilai yang sering dipakai bersama — nama, harga, kategori — berarti tiga baris pembacaan array[0], array[1], array[2]. Kedua, menukar isi dua variabel dulu membutuhkan satu variabel bantu sementara. Destructuring menyelesaikan keduanya: sebuah pattern di sisi kiri assignment yang membongkar array ke dalam beberapa variabel sekaligus.

Chapter ini membahas pattern dasarnya, cara melewati elemen dan memberi nilai default, trik penukaran variabel tanpa perantara, dan rest untuk menampung sisa elemen.

Pattern Dasar: Satu Posisi, Satu Variabel #

Aturannya: tulis pattern array di sisi kiri operator =, dan array sumber di sisi kanan. Engine membongkar array sumber secara berurutan — elemen index 0 masuk ke variabel pertama, index 1 ke variabel kedua, dan seterusnya:

js 
const data = ["Kabel USB", 25000, "elektronik"];
const [nama, harga, kategori] = data;
console.log(nama);
console.log(harga);
console.log(kategori);

Output yang Dihasilkan:

text 
Kabel USB
25000
elektronik

Tiga nilai kini tinggal di tiga variabel bernama, tanpa satu pun penulisan index. Dua catatan mekanis menutup aturan ini. Jumlah variabel tidak harus sama dengan jumlah elemen — variabel yang tersisa tanpa pasangan bernilai undefined, dan elemen yang tersisa tanpa variabel diabaikan. Deklarasinya pun bebas memakai const, let, atau tanpa deklarasi untuk variabel yang sudah ada.

Melewati Elemen dan Nilai Default #

Tidak semua elemen selalu dibutuhkan. Menulis koma kosong di pattern melewati satu posisi, dan menambah = nilaiDefault mengisi variabel yang posisinya tidak ada isinya:

js 
const data = ["Kabel USB", 25000, "elektronik"];
const [, hargaSaja] = data;
console.log(hargaSaja);

const pesanan = ["Nasi Goreng", "Es Teh"];
const [makanan, , minuman = "air putih"] = pesanan;
console.log(makanan);
console.log(minuman);

Output yang Dihasilkan:

text 
25000
Nasi Goreng
air putih

Pattern [, hargaSaja] melewati index 0 dengan koma kosong, sehingga hargaSaja menerima elemen kedua. Pada baris berikutnya, pattern memiliki tiga slot untuk array yang hanya berisi dua elemen: slot ketiga kosong, dan di situlah default "air putih" masuk. Penting dipahami, default tidak hanya bekerja pada array yang lebih pendek — ia aktif setiap kali posisi yang dipecah bernilai undefined:

js 
const [label = "tanpa label"] = [];
console.log(label);

Output yang Dihasilkan:

text 
tanpa label

Array kosong tidak menyediakan apa pun untuk slot pertama, sehingga label memakai defaultnya. Sebaliknya, nilai null, "", atau 0 yang memang ada di array tetap dipakai apa adanya — default hanya menunggu undefined, perilaku yang sejalan dengan operator ?? dari section Operators.

Swap: Menukar Isi Dua Variabel #

Menukar dua variabel secara klasik membutuhkan variabel bantu. Destructuring memangkasnya menjadi satu baris — array baru dibentuk di sisi kanan terlebih dahulu, lalu hasilnya dibongkar kembali ke kedua variabel:

js 
let posisiA = 1;
let posisiB = 2;
[posisiA, posisiB] = [posisiB, posisiA];
console.log(posisiA);
console.log(posisiB);

Output yang Dihasilkan:

text 
2
1

Kedua nilai terpasang silang dengan benar tanpa variabel ketiga. Perhatikan satu detail sintaks: baris penukar ini tidak diawali const atau let karena kedua variabel sudah ada — dan baris yang diawali [ punya aturan sendiri saat ditulis setelah pernyataan lain:

js 
try {
  let a = 1;
  let b = 2
  [a, b] = [b, a];
} catch (error) {
  console.log(`${error.name}: ${error.message}`);
}

Output yang Dihasilkan:

text 
ReferenceError: Cannot access 'b' before initialization

Tanpa titik koma setelah let b = 2, engine membaca baris berikutnya sebagai kelanjutan pernyataan sebelumnya — seolah kita menulis let b = 2[a, b]. Kesalahan ini muncul saat runtime, bukan saat parse, sehingga tertangkap oleh try...catch di contoh di atas.

Rest: Menampung Sisa Elemen #

Pattern juga bisa menampung “sisanya” dengan tanda tiga titik. Variabel rest menerima seluruh elemen yang belum terpakai, dikemas sebagai array baru:

js 
const pesanan = ["Nasi Goreng", "Kerupuk", "Es Teh", "Pisang Goreng"];
const [makananUtama, ...pelengkap] = pesanan;
console.log(makananUtama);
console.log(pelengkap);

Output yang Dihasilkan:

text 
Nasi Goreng
[ 'Kerupuk', 'Es Teh', 'Pisang Goreng' ]

Elemen pertama masuk ke makananUtama, dan tiga sisanya dikumpulkan menjadi array pelengkap. Rest juga boleh dipadukan dengan default pada slot di depannya:

js 
const [utama, cadangan = "kosong", ...sisa] = ["Kopi"];
console.log(utama);
console.log(cadangan);
console.log(sisa);

Output yang Dihasilkan:

text 
Kopi
kosong
[]

Slot cadangan tidak menerima nilai dari array sumber sehingga defaultnya aktif, dan sisa — yang tidak menyisakan apa pun untuk dikumpulkan — menjadi array kosong yang sah. Perhatikan bahwa rest tetap di posisi terakhir meskipun ada default di depannya.

Aturannya kaku pada satu hal: rest wajib berada di posisi terakhir pattern. Bentuk lain ditolak engine saat parse dengan SyntaxError: Rest element must be last element — bukan error runtime, melainkan penolakan sintaks sebelum program berjalan. Pola rest ini saudara dekat rest parameters pada function di section Functions; sama-sama memakai ..., bedanya rest parameters mengumpulkan argumen, rest di destructuring mengumpulkan elemen array.

Destructuring di dalam for…of #

Pattern destructuring juga boleh ditempel pada variabel loop for...of. Bila tiap elemen array itu sendiri berupa array kecil, pattern membongkarnya per putaran:

js 
const daftarHarga = [["Kopi", 18000], ["Teh", 12000]];
for (const [nama, harga] of daftarHarga) {
  console.log(`${nama}: Rp${harga}`);
}

Output yang Dihasilkan:

text 
Kopi: Rp18000
Teh: Rp12000

Setiap putaran menghasilkan array dua nilai — ["Kopi", 18000] lalu ["Teh", 12000] — dan pattern [nama, harga] membongkarnya sebelum blok loop dijalankan. Kombinasi for...of dan destructuring ini akan terus kita pakai ketika data berpasangan perlu diproses satu per satu.

Kapan Destructuring Menambah Keterbacaan #

Destructuring paling membantu ketika bentuk data sudah pasti dan pendek: pasangan ["Kabel USB", 25000], tiga nilai produk, atau dua nilai pertama yang memang bermakna. Pada situasi itu, nama variabel yang jelas menggantikan sederet index yang harus diingat pembaca.

Sebaliknya, pada array panjang dengan isi yang berganti-ganti, membongkar sepuluh slot sekaligus justru menyembunyikan makna — const [a, b, c, d, e, f, g, h] = ... tidak lebih terbaca daripada akses index yang diberi nama lewat variabel lain. Prinsipnya: bongkar selagi ada nama yang bermakna untuk tiap slot, dan berhentilah di situ. Untuk data yang bentuknya kompleks dan bertingkat, section Objects menyediakan struktur yang lebih pas daripada array panjang.

Contoh Lengkap: Semua Bentuk dalam Satu Berkas #

js destructuring-arrays.js 
// destructuring-arrays.js
// Pattern destructuring: dasar, skip, default, swap, dan rest.

// --- 1. Pattern dasar: satu variabel per elemen ---
const produk = ["Kabel USB", 25000, "elektronik"];
const [nama, harga, kategori] = produk;
console.log(nama);
console.log(harga);
console.log(kategori);

// --- 2. Melewati elemen dengan lubang kosong ---
const [, hargaSaja] = produk;
console.log(hargaSaja);

const [makanan, , minuman = "air putih"] = ["Nasi Goreng", "Es Teh"];
console.log(makanan);
console.log(minuman); // posisi ketiga kosong -> default dipakai

// --- 3. Default hanya aktif untuk undefined ---
const [label = "tanpa label"] = [];
console.log(label);

// --- 4. Swap dua variabel tanpa variabel bantu ---
let posisiA = 1;
let posisiB = 2;
[posisiA, posisiB] = [posisiB, posisiA];
console.log(posisiA);
console.log(posisiB);

// --- 5. Rest: menampung sisa elemen ---
const pesanan = ["Nasi Goreng", "Kerupuk", "Es Teh", "Pisang Goreng"];
const [makananUtama, ...pelengkap] = pesanan;
console.log(makananUtama);
console.log(pelengkap);

Output yang Dihasilkan:

text 
Kabel USB
25000
elektronik
25000
Nasi Goreng
air putih
tanpa label
2
1
Nasi Goreng
[ 'Kerupuk', 'Es Teh', 'Pisang Goreng' ]

Mari kita telaah baris-baris pentingnya:

  1. Baris 5–6 (const [nama, harga, kategori] = produk): pattern tiga slot membongkar tiga nilai array produk ke tiga variabel bernama dalam satu pernyataan.
  2. Baris 11 (const [, hargaSaja] = produk): koma kosong melewati index 0, sehingga hargaSaja menerima elemen kedua — 25000.
  3. Baris 14 (const [makanan, , minuman = "air putih"] = [...]): slot kedua dilewati dan slot ketiga tidak tersedia di array sumber, sehingga default "air putih" mengisinya.
  4. Baris 20 (const [label = "tanpa label"] = []): array kosong tidak memberi apa pun, dan defaultnya aktif — bukti bahwa default menunggu undefined.
  5. Baris 26 ([posisiA, posisiB] = [posisiB, posisiA]): penukaran satu baris; array sisi kanan dibentuk lebih dulu, lalu dibongkar silang ke kedua variabel.
  6. Baris 34–35 (const [makananUtama, ...pelengkap] = pesanan): rest mengumpulkan tiga elemen sisa menjadi array pelengkap, sementara makananUtama menerima satu elemen pertama.

Destructuring melengkapi cara kita menangani array — dari membuat, membaca, mengubah, sampai membongkarnya. Chapter terakhir section ini merangkum semuanya menjadi keputusan praktis: method mana yang dipilih, kapan array perlu disalin, dan bagaimana mengubah nilai menyerupai array menjadi array sungguhan.

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

destructuring-arrays.js

Unduh berkas
javascript 
// destructuring-arrays.js
// Pattern destructuring: dasar, skip, default, swap, dan rest.

// --- 1. Pattern dasar: satu variabel per elemen ---
const produk = ["Kabel USB", 25000, "elektronik"];
const [nama, harga, kategori] = produk;
console.log(nama);
console.log(harga);
console.log(kategori);

// --- 2. Melewati elemen dengan lubang kosong ---
const [, hargaSaja] = produk;
console.log(hargaSaja);

const [makanan, , minuman = "air putih"] = ["Nasi Goreng", "Es Teh"];
console.log(makanan);
console.log(minuman); // posisi ketiga kosong -> default dipakai

// --- 3. Default hanya aktif untuk undefined ---
const [label = "tanpa label"] = [];
console.log(label);

// --- 4. Swap dua variabel tanpa variabel bantu ---
let posisiA = 1;
let posisiB = 2;
[posisiA, posisiB] = [posisiB, posisiA];
console.log(posisiA);
console.log(posisiB);

// --- 5. Rest: menampung sisa elemen ---
const pesanan = ["Nasi Goreng", "Kerupuk", "Es Teh", "Pisang Goreng"];
const [makananUtama, ...pelengkap] = pesanan;
console.log(makananUtama);
console.log(pelengkap);