Mari kita bahas Javascript Destructuring

Mar 15, 2022

Didalam bahasa pemrograman javascript, kita mengenal 2 tipe data yang sering digunakan, yaitu Object dan Array, yang mana kedua tipe data ini memiliki kemampuan untuk menyimpan data lebih dari satu value


const firstName = "Irsan"
// menampung satu data yaitu "Irsan"

const lastName = "Sebastian"
// menampung satu data yaitu "Sebastian"

//Array
const Fullname = [
  "firstName": "Irsan",
  "lastName": "Sebastian"
]
// menampung lebih dari satu data yaitu "Irsan" dan "Sebastian"

//Object
const fullname = {
  "firstName": "Irsan",
  "lastName": "Sebastian"
}
// menampung lebih dari satu data yaitu "Irsan" dan "Sebastian"

dari potongan code sederhana diatas, gue akan menjelaskan secara manusiawi dan sederhana bahwa Object dan Array, adalah sebuah Kardus besar yang berisikan barang barang yang ingin kita simpan. tentunya ketika kita menyimpan sesuatu, maka suatu hari kita akan mengeluarkan barang yang kita simpan itu. pada code di atas apabila kita ingin mendapatkan value Irsan dari Konstanta fullName (Array), maka biasa yang diajarkan di sekolah atau di internet mungkin akan seperti ini


//Array
const fullName = ["Irsan", "Sebastian"]
const firstName = fullName[0]
const lastName = fullName[1]
console.log(firstName,'firstName') 
console.log(lastName,'lastName') 

//Object
const Fullname = {
  "firstName": "Irsan",
  "lastName": "Sebastian"
}
const firstName = fullName.firstName
const lastName = fullName.lastName
console.log(firstName,'firstName') 
console.log(lastName,'lastName')

prosesnya disini, kita langsung menembak angka 0, yang mana merupakan index pertama dari Array fullName tersebut, lalu kita menyimpan hasil daripada fullName[0] ke dalam Konstanta firstName. untuk Object Fullname kita memanggilnya dengan Fullname.firstName dan menyimpan hasilnya di Konstanta firstName.

Dengan Syntax Destructuring Assignment, kita akan mempermudah prosesnya menjadi seperti ini


//Array
const fullName = ["Irsan", "Sebastian"];
const [firstName, lastName] = fullName;
console.log(firstName, ‘firstName’) 
console.log(lastName, ‘lastName’) 

//Object
const Fullname = {
  "firstName": "Irsan",
  "lastName": "Sebastian"
}
const { firstName, lastName } = Fullname; 
console.log(firstName,'firstName') 
console.log(lastName,'lastName')

Nah dengan begini, maka kita sudah secara langsung melakukan proses refactory 1 baris code, yang tadinya kita harus assign ke Konstanta firstName lalu ditampilkan, dengan Destructuring Assignment kita mempersingkat proses tersebut tanpa memodifikasi atau mengutak atik Array tersebut. hanya sederhananya meng-copy secara cepat ke sebuah variable, prosesnya sama, namun cara penulisannya agak sedikit berbeda

“Destructuring” does not mean “destructive”. It’s called “destructuring assignment,” because it “destructurizes” by copying items into variables. But the array itself is not modified.

Anyway, masih banyak yang teknik atau magic yang bisa dilakukan dengan Destructuring Assigment dalam mempermudah kita menulis code. dan menurut pengalaman pribadi, teknik sederhana ini membantu gue dalam meningkatkan kualitas code serta harkat, martabat dan Pride diantara sesama rekan kerja engineer lainnya…. ( It’s true )

Sanoncode