Destructuring — JavaScript

Bayangin kamu pesan paket Shopee yang isinya banyak barang. Daripada satu-satu nyebut "ini barang dari paket nomor 1", "ini barang dari paket nomor 2", kamu…

Destructuring adalah cara singkat buat mengambil beberapa isi object atau array sekaligus, langsung ke variabel masing-masing. Object adalah kumpulan pasangan nama dan nilai (nama: "Budi"), array adalah daftar nilai berurutan (["merah", "hijau"]). Ibaratnya membongkar paket: barangnya dikeluarkan dan ditaruh di tempatnya masing-masing.

🧪 Tebakan cepat: const { kelas } = { nama: "Budi" }; Isi kelas apa? Tebak dulu, jawabannya ada di bagian "Object: ambil berdasarkan nama".

Object: ambil berdasarkan nama

const siswa = { nama: "Budi", umur: 17, kota: "Jakarta" };

const { nama, umur } = siswa;

console.log(nama); // Budi
console.log(umur); // 17

siswa adalah object dengan tiga key (nama isian): nama, umur, dan kota.
const { nama, umur } = siswa; bikin dua variabel baru, nama dan umur, lalu mengisinya dengan siswa.nama dan siswa.umur.
Kurung kurawal { } di sebelah kiri = artinya "ambil dari object". Nama di dalamnya harus sama persis dengan nama key-nya. Urutannya bebas.
kota gak disebut, jadi gak diambil. Object siswa sendiri gak berubah.

Hasilnya sama dengan const nama = siswa.nama; lalu const umur = siswa.umur;, cuma ditulis dalam satu baris. Kalau key-nya gak ada di object, variabelnya berisi undefined (gak ada nilai), tanpa error. Jadi jawaban tebakan tadi: undefined.

Mau nama variabel lain? Pakai titik dua: const { nama: namaSiswa } = siswa; bikin variabel namaSiswa berisi "Budi".

Destructuring di parameter function

Destructuring juga bisa ditulis langsung di parameter, jadi function-nya langsung dapat isi yang dibutuhkan:

function sapa({ nama, umur }) {
  return "Halo " + nama + ", umur " + umur;
}

console.log(sapa({ nama: "Budi", umur: 17 })); // Halo Budi, umur 17

Cara lain yang sama hasilnya: terima object-nya utuh, lalu bongkar di baris pertama, const { nama, umur } = data;.

Array: ambil berdasarkan urutan

const warna = ["merah", "hijau", "biru"];

const [pertama, kedua] = warna;
const [, , ketiga] = warna;

console.log(pertama); // merah
console.log(kedua);   // hijau
console.log(ketiga);  // biru

Kurung siku [ ] di kiri = artinya "ambil dari array".
Yang dipakai urutan, bukan nama. Variabel pertama dapat isi pertama, variabel kedua dapat isi kedua. Nama variabelnya bebas.
Koma kosong melewati satu posisi. [, , ketiga] melewati dua isi pertama.

Tiga titik ... mengumpulkan semua sisa isi jadi array baru:

const [satu, ...sisanya] = [1, 2, 3, 4];

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

Menukar dua variabel

let a = 1;
let b = 2;

[a, b] = [b, a];

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

Sebelah kanan bikin array baru [2, 1], dengan urutan yang sudah dibalik. Sebelah kiri membongkarnya: isi pertama masuk ke a, isi kedua ke b. Variabelnya pakai let, karena isinya diganti.

⚠️ Jebakan yang sering ketemu

Nama variabel beda dari key. const { name } = siswa; dapat undefined, karena key-nya nama, bukan name.
Lupa titik koma sebelum [a, b] = .... Tanpa titik koma di baris sebelumnya, JavaScript bisa menyambung dua baris itu jadi satu perintah yang error.
Default cuma untuk undefined. const { hobi = "-" } = siswa; mengisi "-" kalau hobi gak ada. Tapi kalau isinya null, yang dipakai tetap null.

🔬 Coba sendiri

Bongkar object dan array lain di alat di bawah, dan lihat variabel mana yang dapat isi apa.

TL;DR: const { nama, umur } = siswa; mengambil isi object berdasarkan nama key, dan key yang gak ada jadi undefined. const [pertama, kedua] = warna; mengambil isi array berdasarkan urutan, koma kosong melewati satu posisi, dan ...sisanya mengumpulkan sisa isi jadi array. Destructuring bisa ditulis di parameter function, function sapa({ nama }). Dua variabel ditukar dengan [a, b] = [b, a];.