Belajar ES6 – Destructuring Assignment

Destructuring Assignment adalah sintax dari Javascript untuk mengeluarkan suatu data dari array atau property dari satu object menjadi satu variable yang dapat kita manfaatkan untuk keperluan tertentu.

Proses ini akan banyak kita gunakan untuk mendapatkan satu variable yang ada pada array atau object javascript tertentu. Salah satu contoh yang sederhana seperti kode dibawah ini.

var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]

Pada kode diatas adalah salah satu contoh sederhana mengeluarkan data array (list) menjadi variable tertentu ( a dan b)

adiputra@linux:~$ node
> var list = [1,2,3]
undefined
> var [a, , b] = list;
undefined
> console.log(a)
1
undefined
> console.log(b)
3
undefined
> [b, a] = [a, b]
[ 1, 3 ]
> console.log(a)
3
undefined
> console.log(b)
1

Dari potongan kode diatas, saya coba untuk melihat isi dari variable a dan b hasil dari extraksi list array.

Ini adalah salah satu feature dari ES6. Untuk menjalankan kode tersebut dengan syntax javascript yang lama (ES5) seperti kode dibawah ini.

var list = [ 1, 2, 3 ];
var a = list[0], b = list[2];
var tmp = a; a = b; b = tmp;

Lebih enak digunakan yang ES6 ya ๐Ÿ™‚

Kalau kita lihat ada kode memindahkan 2 variable yang sudah ada isi-nya dengan variable yang sama.

[b, a] = [a, b]

Kode tersebut disebut juga Swapping Variable. Proses Swapping ini bisa langsung dilakukan tanpa menggunakan variable temporary yang terlihat pada kode ES5 di atas.

Destructuring dari fungsi array

Kadang karena kita membutuhkan format data array hasil proses dari satu fungsi, kita ingin langsung map-kan variable hasil fungsi. Dengan ES6 bisa dilakukan dengan cara seperti kode berikut.

function f() {
  return [1, 2];
}

var a, b; 
[a, b] = f(); 
console.log(a); // 1
console.log(b); // 2

Terlihat kita buat satu fungsi f() lalu hasil keluaran dari fungsi f() tersebut adalah sebuah array dan langsung kita destructuring dengan variable a dan b. [a,b] = f();

Biasanya mungkin kita gunakan proses seperti kode ini ya

function f() {
  return [1, 2];
}

var resut;
var a, b; 
result = f();
a = result[0];
b = result[1]; 
console.log(a); // 1
console.log(b); // 2

Agak lebih panjang ya ๐Ÿ™‚

Selanjutnya saya coba melakukannya pada Object karena pada contoh di atas kita gunakan array untuk melakukan percobaan dalam proses Destructuring Assignment pada ES6. Contoh sederhana adalah kita membuat object dengan property yang ada pada object tersebut. Lalu property itu kita keluarkan.

adiputra@linux:~$ node
> var o = {p:42, q:true};
undefined
> var {p, q} = o;
undefined
> console.log(p);
42
undefined
> console.log(q);
true
undefined
>

Variable o adalah sebuat class object dengan property p dengan nilai 42 dan q dengan nilai ‘true’.

Cara lama yang mungkin kita lakukan dahulu adalah membuat variable p dan q secara terpisah.

> var o = {p:42, q:true};
undefined
> var p = o.p;
undefined
> var q = o.q;
undefined
> console.log(p);
42
undefined
> console.log(q);
true

Lebih enak pake fitur ES6 ya? ๐Ÿ˜€


[crp]


Assign Nilai ke Variable Baru

Pada contoh diatas, kita bisa akses p dan q karena memang object tersebut mempunyai property p dan q. Mungkin ada beberapa kawan yang berpikir bisa tidak variable tersebut diganti dengan spesifik naming yang lebih enak dibaca?

Jawabnya bisa dong.

Berikut contohnya membuat variable baru untuk menyimpan property tersebut.

> var o = {p:42, q:true};
undefined
> var {p: foo, q: bar} = o;
undefined
> console.log(foo);
42
undefined
> console.log(bar);
true
undefined

Jadi kita bisa akses foo dan bar ya ๐Ÿ™‚

Default Value

Default value disini kita anggap adalah ketika kita ingin assign value dari satu object/array. Lalu ternyata tidak ada value yang sama maka variable yang kita assign berisi default value yang kita set sebelumnya. Bingung gak? hehe

Berikut contohnya biar ga bingung.

> var {a=10,b=5} = {a:3}
undefined
> console.log(a);
3
undefined
> console.log(b);
5
undefined

Pada kode tersebut kita ingin mengeluarkan nilai a dari object sebelah kanan. Namun karena object hanya berisi property a saja, tidak memiliki property b, maka default nilai b dimana adalah 5 akan tetap mengeluarkan nilai 5 karena pada object tersebut tidak memiliki property b.

Kalau cara lama mungkin seperti ini ya,

> obj = {a:3}
{ a: 3 }
> var a = 10;
undefined
> var b = 5;
undefined
> a = obj.a;
3
> console.log(a);
3
undefined
> console.log(b);
5
undefined

Sebagai catatan, jika terdapat nilai dari object adalah undefined. Maka default value pun akan terpanggil otomatis karena nilai tersebut undefined. Sebagai contoh kode ini.

var [x=1] = [undefined];
var {prop: y=2} = {prop: undefined};

console.log(x); // 1
console.log(y); // 2

 

Mendestruct object dan array dalam satu variable

Kadang dalam satu variable terdiri dari object dan array data. Namun karena kebutuhan tertentu kita ingin mengakses object dan salah satu property dari array yang ada pada variable tersebut.

Contohnya kita memiliki data seperti dibawah ini.

var orang = {
  nama: 'adiputra',
  pekerjaan: 'Programmer',
  anak: [
    {
      nama: 'Irsyad',
      umur: '4 tahun',
    }
  ]
}

Terdapat object orang dengan nama, pekerjaan dan anak sebagai property. Bagaimana kita ingin mengeluarkan property tersebut misalnya saya ingin mengeluarkan nama orang dan nama anaknya serta umur si anak.

Cara yang lama mungkin kode kita seperti ini ya.

var orang = {
  nama: 'adiputra',
  pekerjaan: 'Programmer',
  anak: [
    {
      nama: 'Irsyad',
      umur: '4 tahun',
    }
  ]
}

var nama_orang = orang.nama;
var nama_anak = orang[0].nama;
var umur_anak = orang[0].umur;

console.log(nama_orang);
console.log(nama_anak);
console.log(umur_anak);

Agak panjang ya..:)

Dengan ES6, kita dapat dengan mudah mengeluarkan data tersebut dengan perintah yang lebih pendek.

var orang = {
  nama: 'adiputra',
  pekerjaan: 'Programmer',
  anak: [
    {
      nama: 'Irsyad',
      umur: '4 tahun',
    }
  ]
}

var { nama: nama_orang, anak: [{nama: nama_anak}], anak: [{umur: umur_anak}] }
console.log(nama_orang);
console.log(nama_anak);
console.log(umur_anak);

Lebih pendek barisnya tapi agak lebih panjang ya dalam satu baris itu. hemm..

Seenggaknya nanti kawan-kawan tidak bingung ketika melihat kode seperti ini nanti di React atau Vue ataupun framework lainnya karena salah satu fitur ini banyak digunakan berdasarkan sumber situs iniย https://ponyfoo.com/articles/javascript-developer-survey-results

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: