Destructuring Assignment pada javascript

Dalam setiap penulisan artikel saya selalu merujuk pada dokumentasi resmi sebelum mencari beberapa artikel yang terkait.

Nah dalam artikel ini pun lebih banyaknya saya ambil ke sumber utama.

Langsung saja perhatikan kode di bawah ini.

const programmer = {
   nama: "muhammad iqbal",
   hobi: "ngopi",
   umur: 24,
   ganteng: true
}
const nama = programmer.nama
const hobi = programmer.hobi
const umur = programmer.umur
const ganteng = programmer.ganteng
const person = function(){
 return `${nama}, hobinya ${hobi}, umur ${umur}, dia ganteng? ${ganteng}!`
}
console.log(person())
output 
> "muhammad iqbal, hobinya ngopi, umur 24, dia ganteng? true!"

coba bandingkan dengan kode berikut ini. Output yang dihasilkan juga sama.

const programmer = {
   nama: "muhammad iqbal",
   hobi: "ngopi",
   umur: 24,
   ganteng: true
}
const {nama, hobi, ganteng, umur} = programmer
const person = function(){
 return `${nama}, hobinya ${hobi}, umur ${umur}, dia ganteng? ${ganteng}!`
}
console.log(person())
output 
> "muhammad iqbal, hobinya ngopi, umur 24, dia ganteng? true!"

Dari kode diatas setidaknya kita telah menghemat 3 baris kode dan membuat kode lebih mudah dan enak untuk di baca.

Dengan penggunaan destructuring assignment kita tidak perlu mendeklarasikan variable untuk mengambil value pada masing-masing key objek di ‘programmer’.

Inilah keunggulan dari destructuring pada ECMAscript 6.

Destructuring Assigment lebih tepatnya membongkar isi dari tipe data array maupun object.

Waktu pertama kali saya menggunakan fitur ini dalam pembelajaran membuat aplikasi prakiraan cuaca. Saya sangat senang mentor saya menerangkan untuk menggunakan destructuring. Sehingga code dari program yang saya bangun jadi lebih clean dan nyaman untuk di baca.

Array Destructuring

Destructuring juga dapat dilakukan dalam array. perhatikan kode berikut ini

let arr = ['sapi', 'kambing', 'naga']
let [sapi, kambing, naga] = arr
console.log(sapi)
console.log(kambing)
console.log(naga)
output:
> "sapi" 
> "kambing" 
> "naga"

yang menjadi pertanyaannya adalah kenapa harus di masukan kedalam dustructuring jika dapat di lakukan seperti ini.

let arr = ['sapi', 'kambing', 'naga']
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
output:
> "sapi" 
> "kambing" 
> "naga"

saya akan memberikan beberapa alasan.

Memang betul dapat di lakukan secara langsung ke element array. Namun jika element tersebut akan di gunakan dalam beberapa baris kode yang lainnya maka value tersebut harus dideklarasikan menjadi elemen. Sehingga hasilnya penulisan kode menjadi repetitiv (berulang).

let arr = ['sapi', 'kambing', 'naga']
let sapi = arr[0]
let kambing = arr[1]
let naga = arr[2]
console.log(sapi)
console.log(kambing)
console.log(naga)
console.log(`${naga} itu dimakan sama ${kambing}`)
output:
> "sapi" 
> "kambing" 
> "naga"
> "naga itu dimakan sama kambing"

Pengembalian Array dalam Fungsi

// didalam fungsi terdapat array 
function kambing(){
    return ["punya jenggot", "punya tanduk"]
}
let [jenggot, tanduk] = kambing()
console.log(jenggot)
console.log(tanduk)
output:
> "punya jenggot"
> "punya tanduk"

Mengabaikan Beberapa Nilai

Point selanjutnya adalah ketika kita bekerja dengan banyak data. Tentunya kita tidak perlu menginisialisasi setiap data array. Hanya untuk menggunakan beberapa nilai saja.

Karna dengan menggunakan destructuring kita dapat mengabaikan nilai yang tidak kita perlukan . sebagai contoh

// didalam fungsi terdapat array 
function kambing(){
    return ["punya jenggot", "punya mata","punya tanduk"]
}
//mengabaikan element[1] => "punya mata"
let [jenggot, , tanduk] = kambing()
console.log(jenggot)
console.log(tanduk)
output:
> "punya jenggot"
> "punya tanduk"

Atau bisa mengabaikan semua data dengan

// didalam fungsi terdapat array 
function kambing(){
    return ["punya jenggot", "punya mata","punya tanduk"]
}
//mengabaikan semua data pada element 
let [, ,] = kambing()

Menempatkan rest opertator pada array

let hewan = ["naga", "kalajengking", "mantan", "singa"]
let [naga, ...binatang] = hewan
console.log(naga)
console.log(binatang)
output: 
> "naga"
> Array ["kalajengking", "mantan", "singa"]

Object Destructuring

Destructuring juga dapat di lakukan kedalam objek. Perhatikan kode berikut ini

const user = {
    nama: "muhammad iqbal",
    ganteng: true 
};

const {nama, ganteng} = user;

console.log(nama); // 42
console.log(ganteng); // true

Mengganti nama variable dalam destructuring

Kita dapat mengganti nama variable didalam destructuring. Dalam kasus dibawah ini kita menukar nama objek yang sebelumnya ‘p’ menjadi ‘tinggi’ dan ‘q’ menjadi ‘benar’

const o = {p: 42, q: true};
const {p: tinggi, q: benar} = o;

console.log(tinggi); // 42
console.log(benar); // true

Default values

const {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

Unpacking fields from objects Melalui sebagai sebuah parameter fungsi

const user = {
  age: 17,
  displayName: 'm.iq',
  fullName: {
    firstName: 'muhammad',
    lastName: 'iqbal'
  }
};
function userId({age}) {
  return `age is ${age}`;
}
function whois({displayName, fullName: {lastName: last, firstName: name}}) {
  return `${displayName} is first name: ${name} and last name: ${last}`;
}
console.log(userId(user))
console.log(whois(user))
output: 
> "age is 17"
> "m.iq is first name: muhammad and last name: iqbal"

Setting sebuah Default Value pada Parameter function

function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) {
  console.log(size, coords, radius);
}

drawChart({
  coords: {x: 18, y: 30},
  radius: 30
})
output: 
> "big" Object { x: 18, y: 30 } 30

Destructuring bercabang objek dan array

let buku = {
 judul: "kupinang kau dengan bismillah",
   terbit: [
      {
     penerbit: "muhammad iqbal",
        tahun: 2014,
      }
    ]
}
let {
 judul: revisiJudul, 
    terbit: [
      {
       tahun: tahunTerbit
      }
    ]
} = buku
console.log(revisiJudul)
console.log(tahunTerbit)
output: 
> "kupinang kau dengan bismillah"
> 2014

Pattern Rest di dalam object destructuring

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

Memadukan Array dan Objek Destructuring

const props = [
  { id: 1, name: 'muhammad'},
  { id: 2, name: 'iqbal'},
  { id: 3, name: 'muhammad iqbal'}
];

const [,, { name }] = props;

console.log(name); // "muhammad iqbal"