Destructuring: Bongkar Object dan Array

Membongkar dengan rapi

Destructuring adalah cara ringkas mengeluarkan nilai dari object atau array ke variabel terpisah. Tanpa destructuring, kamu menulis berulang-ulang:

// cara lama
let user = { nama: "Rizky", umur: 17 };
let nama = user.nama;
let umur = user.umur;

// dengan destructuring
let { nama, umur } = user;
console.log(nama, umur); // "Rizky" 17

Destructuring object

Nama variabel harus sama dengan nama key. Bisa juga diganti nama dan diberi default:

let produk = { nama: "Kopi", harga: 15000 };

let { nama: namaProduk, stok = 0 } = produk;
console.log(namaProduk); // "Kopi" (rename)
console.log(stok);       // 0 (default, karena key tidak ada)

Destructuring array

Untuk array, urutan yang menentukan, bukan nama:

let warna = ["merah", "hijau", "biru"];
let [pertama, kedua] = warna;
console.log(pertama); // "merah"
console.log(kedua);   // "hijau"

let [a, , c] = warna; // lewati index 1
console.log(c); // "biru"

Tukar nilai tanpa variabel bantu

Trik klasik yang jadi satu baris:

let x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2 1

Destructuring di parameter fungsi

Sangat umum di kode modern, terutama saat fungsi menerima object opsi:

function buatUser({ nama, umur = 18 }) {
  console.log(nama + " berumur " + umur);
}
buatUser({ nama: "Rizky" }); // "Rizky berumur 18"

Catatan teknis: Destructuring properti yang tidak ada menghasilkan undefined, bukan error. Kalau butuh nested (misal user.alamat.kota), pastikan level atasnya ada atau kombinasikan dengan default: const { alamat: { kota } = {} } = user.

Destructuring hasil fungsi

Sangat umum dipakai untuk menangkap hasil fungsi yang mengembalikan object:

function infoCuaca() {
  return { kota: "Bandung", suhu: 25, lembab: 80 };
}

let { kota, suhu } = infoCuaca();
console.log(kota + ": " + suhu + " derajat"); // "Bandung: 25 derajat"

Pola ini juga standar di React (useState) dan banyak library. Variasi berguna lainnya adalah destructuring dengan rename saat nama properti terlalu umum:

let { suhu: suhuBandung } = infoCuaca();
console.log(suhuBandung); // 25

Rename menghindari tabrakan nama saat kamu mengambil suhu dari dua kota berbeda dalam satu scope.

Kesimpulan

Destructuring membuat kode lebih ringkas dan niatnya lebih jelas. Kamu akan melihatnya di hampir semua codebase modern, jadi biasakan membaca dan menulisnya.