Destrukturisasi (destructuring) adalah cara untuk mengambil nilai dari array atau objek dan menyimpannya dalam beberapa variabel berbeda.

Destrukturisasi Array

Sebelum ES6, cara untuk menyimpan nilai dari masing-masing nilai dari sebuah array ke dalam variabel adalah sebagai berikut:



Penulisan kode diatas kita harus menuliskan kata kunci yang sama untuk mendapatkan nilai yang berbeda dari array. Oleh karena itu disinilah Destructuring Assignment membantu menulis kode menjadi lebih singkat. 

Mari kita coba refactor kode diatas dengan Destructuring Assignment :


let [buah1, buah2, buah3] = buah; merupakan destructuring assignment untuk array. Statement tersebut akan mendefinisikan variabel buah1, buah2, dan buah3 dimana nilainya diambil dari masing-masing index dari array buah.

Menetapkan Default Value

Array dalam Javascript akan mengembalikan undefined ketika kita mencoba mengakses nilai di luar batasnya (index out of bounds). Konsekuensinya, jika panjang array yang kita deklarasikan melebihi panjang array sumbernya, kita dapat temukan variabel yang kita tetapkan memiliki nilai undefined.


Untuk mengatasinya, kita dapat memberikan nilai default bagi variabel yang akan di-assign melalui destructuring.

Dari kode di atas, pada array buah hanya terdapat 3 item yaitu mangga, pisang, dan anggur. Jika kita ingin menampilkan buah4 tanpa membuat default value, maka nilainya akan undefined karena pada array buah tidak terdapat index ke-3.

Pada contoh di atas, kita membuat default value untuk buah4 yaitu melon menggunakan destructuring, sehingga saat menampilkan buah4 maka nilainya adalah melon.

Pemberian nilai terpisah dari deklarasi

Kita dapat mendeklarasikan sebuah variabel tanpa harus langsung memberikan nilai dengan array destructuring pada variabelnya, contohnya sebagai berikut :

Mengabaikan beberapa nilai dalam array

Kita dapat mengabaikan beberapa item dalam array dengan tidak menyimpannya dalam variabel dengan menggunakan "koma kosong", atau tidak menyebutkan element tersebut saat destrukturisasi.

Dari kode di bawah ini, item pada index ke-1 dan ke-3 dari array buah yaitu pisang dan nanas tidak kita masukkan ketika melakukan array destructuring.

Memberikan item sisa array pada variabel

Misalkan dalam sebuah variabel array terdapat 10 item, dimana item pertama harus di masukkan pada variabel a, dan sisanya ingin dimasukkan pada variabel b, kita dapat menggunakan array destructuring dan bantuan dari rest parameter.

Contoh:

Menukar value variabel

Jika kita memiliki 2 variabel yaitu a dan b dan kita ingin menukar nilai dari masing-masing variabel, kita dapat menggunakan array destructuring.

Contoh:

Object Destructuring

Sama seperti destructuring array, sebelum ES6, kita harus menulis assignment satu per satu untuk tiap nilai dalam objek yang kita ingin bongkar. Seperti ini:

Pada kode di atas, kita harus menuliskan kata kunci yang sama untuk mendapatkan nilai yang berbeda dari object. Pada Javascript ES6, caranya lebih singkat, yaitu dengan destrukturisasi.

Syntax untuk destrukturisasi objek adalah seperti ini:

Sekarang, mari kita coba refactor kode di atas dengan Destructuring Assignment:

Pada kode di atas, let { nama, umur, mahasiswaBaru }  =  mahasiswa; merupakan destructuring assignment untuk object. Statement tersebut akan mendefinisikan variabel nama, umur, dan mahasiswaBaru dimana nilainya diambil dari pasangan properti-nilai dari object mahasiswa.

Cara destructuring di atas hanya bekerja jika nama variabel baru untuk destrukturisasi itu sama dengan nama properti pada objek, jika tidak sama maka isi dari variabelnya adalah undefined.

Object destructuring memiliki beberapa fungsi yang sama dengan array destructuring yaitu sebagai berikut:

Menetapkan Default Value

Dengan default value, kita dapat menetapkan variabel walaupun key di dalam object tidak tersedia/undefined.

Menyimpan key ke variabel berbeda

Dalam destrukturisasi object, nama variabel baru untuk destrukturisasi harus sama dengan nama properti yang dimiliki object. Jika kita ingin mengubah nama variabelnya, caranya dengan menambahkan titik dua setelah nama properti objek diikuti nama variabel barunya seperti berikut.

Destructuring Deep Object

Tidak hanya object yang memiliki key biasa saja, destructuring juga dapat dilakukan pada object yang di dalamnya terdapat object contohnya sebagai berikut :

Memberikan key sisa object pada variabel

Sama seperti array destruction kita dapat menyimpan key tersisa yang tidak dimasukkan ke variabel ke dalam sebuah variabel rest parameter. Dari kode di bawah dapat dilihat bahwa semua key yang tersisa di object detailBuah akan dimasukkan ke dalam variabel rest.

Selesai.

Referensi:
https://medium.com/itpreneur-unsika/mengenal-destructuring-assignment-di-javascript-fef9052b3fab