Destructuring merupakan fitur pada ES6 yang mempermudahkan untuk mengolah nilai dari array maupun properti dari object pada javascript. Destructure ini sering sekali kita gunakan baik ketika development di client side maupun server. Selanjutnya kita akan lebih mengenal “apa itu destructuring object”.
Kenapa Pakai Destructuring?
Untuk mempermudah memahaminya, kita akan langsung menuju pada implementasi yang biasa kita lakukan.
Cara diatas masih sah sah saja untuk digunakan. Namun, kita akan mengalami kesulitan ketika object yang akan kita akses adalah nested object yang lebih kompleks lagi. Bayangkan saja, berapa banyak dot notation (.) yang akan kita gunakan. Dan hal itu juga berisiko lebih banyak terjadi typo yang menyebabkan kita mendapatkan error .
Cara diatas tidak efektif karena :
- Jika nested object lebih kompleks, sangat memungkinkan untuk typo.
- Penulisan kode menjadi lebih banyak, padahal kita hanya membutuhkan beberapa data saja.
Oleh karena itu, destructuring solusinya
Apa itu destructuring object?
Destructuring adalah memecah komponen yang kompleks menjadi komponen yang lebih kecil. Hal ini untuk mempermudah dalam pengolahan komponen tersebut sesuai dengan kebutuhan kita. Destructuring dapat melakukan hal yang sama seperti kode diatas, namun dengan pendekatan yang lebih mudah dipahami dan lebih ringkas.
Jika kita menggunakan destructuring pada kode diatas, maka implementasinya adalah sebagai berikut :
Dimana dengan baris kode yang lebih sedikit, kita bisa mendapatkan hasil yang sama. Itulah destructuring object.
Kemudian terdapat beberapa poin penting dalam implementasi object destructuring :
1.Property to variable
const { title } = book;
2.Multiple properties
const { title, author } = book;
3.Default value
const { title = 'Laskar Pelangi', author } = book;
4.Alias
const { title: bookTitle } = book;
5.Deep property
const { prop: { deepProp }} = object;
6.Dynamic property name
const { [propName]: myProp} = object;
Dari 6 implementasi object destructuring diatas, poin 1– 4 adalah implementasi yang paling sering digunakan.
Kesimpulan
Dengan adanya destructuring object, kita dapat lebih mudah dalam mengolah properti objek dan mendapatkan value dari objek tersebut. Selain syntaxnya yang ringkas dan mudah dipahami, kita dapat menghindari typo dalam pemecahan struktur objek.
Destructuring object merupakan solusi yang tepat untuk memecah suatu objek, dan dapat juga diterapkan pada array.
Sekian dulu artikel desctructuring object ini. See you in the next sharing!
Discussion
Maaf mba, itu contoh kodenya kebalik
yang terbalik di bagian mana mas?