Jago JavaScript #9: Destructuring & Restructuring (Seni Bongkar Pasang Data!)

Destructuring adalah fitur JavaScript modern yang memungkinkan kita untuk "mengekstrak" nilai dari Array atau Properti dari Object ke dalam variabel yang berbeda dengan cara yang sangat singkat. Kebalikannya, Restructuring adalah cara kita menyusun kembali variabel-variabel tersebut menjadi sebuah Object yang rapi.

🧩 Apa yang Akan Dipelajari

Teknik Destructuring Array menggunakan urutan posisi.
Teknik Destructuring Object menggunakan nama kunci (key).
Memberikan nilai default agar tidak undefined.
Melakukan Restructuring (Shorthand Property) untuk kode yang lebih ringkas.

⚙️ Persiapan

Gunakan Console browser (F12).
Siapkan data Array dan Object yang sudah kita pelajari sebelumnya.

🚀 Langkah-Langkah

1. Destructuring Array (Berdasarkan Urutan)

Bayangkan kamu punya daftar pemenang. Daripada ambil satu-satu pakai index [0], [1], kita bisa langsung bikin variabelnya.

const pemenang = ["Kay", "Shala", "Sena"];

// Cara lama:
// const juara1 = pemenang[0];
// const juara2 = pemenang[1];

// Cara Destructuring:
const [juara1, juara2, juara3] = pemenang;

console.log(juara1); // Hasil: "Kay"
console.log(juara3); // Hasil: "Sena"

2. Destructuring Object (Berdasarkan Nama)

Ini yang paling sering dipake di dunia kerja. Kita gak peduli urutannya, yang penting namanya sama dengan key di dalam Object.

const hp = {
    merk: "Xiaomi",
    tipe: "15",
    spek: "Snapdragon 8 Elite"
};

// Kita cuma butuh merk dan tipe
const { merk, tipe } = hp;

console.log(merk); // Hasil: "Xiaomi"
console.log(tipe); // Hasil: "15"

3. Nilai Default & Nama Samaran

Gimana kalau datanya gak ada? Kita bisa kasih nilai cadangan. Atau kalau nama variabelnya kepanjangan, kita bisa kasih "nama panggung" (alias).

const user = { nama: "Kay" };

// Kasih nilai default 'Umum' kalau role gak ada
// Kasih alias 'username' untuk properti nama
const { nama: username, role = "Umum" } = user;

console.log(username); // Hasil: "Kay"
console.log(role);     // Hasil: "Umum"

4. Restructuring (Menyusun Kembali)

Kalau kamu punya beberapa variabel dan mau dijadiin Object, kamu gak perlu nulis nama: nama. Cukup tulis namanya sekali kalau nama variabel dan key-nya sama.

const nama = "Shala";
const hobi = "Membaca";

// Cara singkat (Shorthand Property)
const dataBaru = { nama, hobi };

console.log(dataBaru); // Hasil: { nama: "Shala", hobi: "Membaca" }

💡 Tips Tambahan

Skip Data: Di Array, kalau mau loncat tinggal kasih koma kosong. const [a, , c] = [1, 2, 3]; (angka 2 bakal dilewati).
Destructuring di Parameter: Kamu bisa langsung bongkar Object di dalam kurung fungsi!
- function cetak({ nama }) { console.log(nama); }

❗ Troubleshooting

Masalah: Muncul error Uncaught TypeError: Cannot destructure property... as it is undefined. Solusi: Ini terjadi kalau kamu mencoba bongkar sesuatu yang nilainya null atau undefined. Pastikan Object/Array aslinya ada isinya dulu, atau gunakan nilai default.

🎯 Kesimpulan

Destructuring bikin kodemu jauh lebih bersih dan "to the point". Kamu bisa bongkar Array dan Object dalam satu baris, ngasih nilai cadangan, sampai ganti nama variabel dengan mudah. Sekarang, kode kamu sudah benar-benar bergaya modern!