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.gantengconst 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} = programmerconst 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] = arrconsole.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] = hewanconsole.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
}
]
} = bukuconsole.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"