ES6 - Array dan Object Destructuring

Dua struktur data yang paling banyak digunakan dalam JavaScript adalah object dan array.

Objek memungkinkan kita untuk membuat satu entitas yang menyimpan item data dengan key (kunci), dan array memungkinkan kita untuk mengumpulkan item data ke dalam ordered collection (kumpulan perintah).

Tapi ketika kita menggunakannya didalam fungsi, mungkin tidak perlu objek/array secara keseluruhan, melainkan hanya potonganan individunya saja.

Destructuring assignment adalah sintaks khusus yang memungkinkan kita untuk "membongkar" array atau objek ke dalam sekelompok variabel.

Array Destructuring

Contoh bagaimana array destructuring menjadi variabel individu:

// array yang berisi nama depan dan nama belakang
let arr = ["Agus", "Santoso"]

// destructuring assignment
// set namaDepan = arr[0]
// dan namaBelakang = arr[1]
let [namaDepan, namaBelakang] = arr;

console.log(namaDepan); // Agus
console.log(namaBelakang);  // Santoso

Sekarang kita mendapatkan variabel baru yang berisi nilai dari variabel arr. Kita juga bisa mengkombinasikan dengan split atau metode array lainnya:

let [namaDepan, namaBelakang] = "Agus Santoso".split(' ');

Object Destructuring

Penugasan destructuring juga bekerja dengan objek. Sintaks dasarnya adalah:

let {var1, var2} = {var1:…, var2:…}

Pada gambar diatas, objek ada disisi kanan, yang akan kita pisahkan menjadi variabel yang ada disisi kiri. Perhatikan contoh berikut:

let options = {
  title: "Menu",
  width: 100,
  height: 200
};

let {title, width, height} = options;

alert(title);  // Menu
alert(width);  // 100
alert(height); // 200

Sumber: https://javascript.info/destructuring-assignment#array-destructuring