diskusi.tech (beta) Community

loading...
Cover image for Destructuring Javascript Object dalam ES6
Lentera Community

Destructuring Javascript Object dalam ES6

debbysa profile image Deby Silvia Agnes Originally published at debbysa23.Medium Updated on ・2 min read

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 :

  1. Jika nested object lebih kompleks, sangat memungkinkan untuk typo.
  2. 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

pic
Editor guide
Collapse
abdmmar profile image
Ammar

Maaf mba, itu contoh kodenya kebalik

Collapse
debbysa profile image
Deby Silvia Agnes Author

yang terbalik di bagian mana mas?