Memahami Destructuring, Rest Parameter, dan Spread Syntax

Destructuring, rest parameter, dan spread syntax memakai simbol yang mirip ({}, [], ...) tapi punya tujuan berbeda: destructuring membongkar data, rest mengumpulkan data, dan spread menyebarkan data.

Destructuring Array

const koordinat = [10, 20, 30];
const [x, y, z] = koordinat;

console.log(x, y, z); // 10 20 30

const [pertama, , ketiga] = koordinat; // melewati elemen kedua
console.log(pertama, ketiga); // 10 30

Destructuring Objek

const pengguna = { nama: "Lia", umur: 26, kota: "Yogyakarta" };
const { nama, kota } = pengguna;

console.log(nama, kota); // "Lia" "Yogyakarta"

// Mengganti nama variabel hasil destructuring
const { nama: namaPengguna } = pengguna;
console.log(namaPengguna); // "Lia"

// Nilai default jika properti tidak ada
const { negara = "Indonesia" } = pengguna;
console.log(negara); // "Indonesia"

Rest Parameter: Mengumpulkan Sisa Nilai

const [utama, ...sisanya] = [1, 2, 3, 4, 5];
console.log(utama);   // 1
console.log(sisanya); // [2, 3, 4, 5]

function jumlahkan(pertama, ...lainnya) {
  return lainnya.reduce((total, n) => total + n, pertama);
}

jumlahkan(1, 2, 3, 4); // 10

Spread Syntax: Menyebarkan Nilai

const bagian1 = [1, 2];
const bagian2 = [3, 4];
const gabungan = [...bagian1, ...bagian2];

console.log(gabungan); // [1, 2, 3, 4]

function tampilkanTiga(a, b, c) {
  console.log(a, b, c);
}

const angka = [10, 20, 30];
tampilkanTiga(...angka); // menyebarkan array jadi argumen terpisah

Kombinasi Ketiganya dalam Praktik

function buatLaporan({ judul, ...detailLain }) {
  console.log(`Laporan: ${judul}`);
  console.log("Detail lain:", detailLain);
}

buatLaporan({ judul: "Penjualan Q3", total: 500000, wilayah: "Jawa" });
// Laporan: Penjualan Q3
// Detail lain: { total: 500000, wilayah: "Jawa" }

Kesimpulan

Destructuring memudahkan mengambil data spesifik dari array atau objek tanpa langkah manual berulang, rest parameter mengumpulkan sisa nilai yang tidak diambil satu per satu, dan spread syntax menyebarkan isi array atau objek ke tempat yang membutuhkan elemen-elemen terpisah. Ketiganya sering dipakai bersamaan dalam kode JavaScript modern, terutama saat bekerja dengan data API dan state di framework seperti React.

Memahami Destructuring, Rest Parameter, dan Spread Syntax.