Contoh Destructuring Array Dalam Javascript

Posted by By deongis 6 Menit Baca 8 Views
Destructuring Array serupa dengan destructuring object. Jika objek menggunakan tanda kurung kurawal { } sedangkan array menggunakan tanda kurung siku [ ].
Perbedaan lainnya adalah destructuring array bekerja berdasarkan posisi daripada penamaan propertinya. Berikut contoh dari destructuring array pada ES6:

  1. const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

  2.  

  3. const [firstFood, secondFood, thirdFood, fourthFood] = favorites;

  4.  

  5. console.log(firstFood);

  6. console.log(secondFood);

  7. console.log(thirdFood);

  8. console.log(fourthFood);

  9.  

  10. /* output:

  11. Seafood

  12. Salad

  13. Nugget

  14. Soup

  15. */


Contoh di atas merupakan proses destructuring array. Di dalam array tersebut (favorites) terdapat 4 (empat) nilai string yang masing-masing nilainya dimasukkan ke variabel lokal firstFood, secondFood, thirdFood, dan fourthFood. Nilai pada array yang dimasukkan ke variabel lokal dipilih berdasarkan posisi di mana ia dideklarasikan pada array notasi. 

  1. const [firstFood, secondFood, thirdFood, fourthFood] = favorites;


Sebenarnya nama dari variabel lokal bisa apa saja. Yang terpenting adalah urutan ketika deklarasi variabelnya saja.
Kita juga bisa memilih nilai pada index tertentu untuk didestruksikan pada array. Contohnya jika kita ingin mengambil nilai ketiga dari array, kita tidak perlu menyiapkan lokal variabel untuk menampung nilai array pertama, kedua, atau pun keempat. Kita bisa melakukannya dengan membiarkan index array yang kita tidak inginkan tetap kosong (tanpa menulis variabel lokal). Lebih lanjut, tanda koma tetap (,) tetap diperlukan untuk menunjukkan posisi index-nya seperti ini:

  1. const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

  2.  

  3. const [, , thirdFood ] = favorites;

  4.  

  5. console.log(thirdFood);

  6.  

  7. /* output:

  8. Nugget

  9. */



Destructuring Assignment

Kita juga bisa melakukan destructuring assignment pada array. Namun tidak seperti objek, kita tidak perlu membungkusnya pada tanda kurung. Contohnya seperti berikut:

  1. const favorites = ["Seafood", "Salad", "Nugget", "Soup"];

  2.  

  3. let myFood = "Ice Cream";

  4. let herFood = "Noodles";

  5.  

  6. [myFood, herFood] = favorites;

  7.  

  8. console.log(myFood);

  9. console.log(herFood);

  10.  

  11. /* output:

  12. Seafood

  13. Salad

  14. */


Array destructuring assignment sangat berguna ketika kita hendak menukar nilai antar dua variabel, sebelum ES6 untuk melakukan hal ini kita menggunakan cara manual menggunakan algoritma sorting seperti ini:

  1. var a = 1;

  2. var b = 2;

  3. var temp;

  4.  

  5. console.log("Sebelum swap");

  6. console.log("Nilai a: " + a);

  7. console.log("Nilai b: " + b);

  8.  

  9. temp = a;

  10. a = b;

  11. b = temp;

  12.  

  13. console.log("Setelah swap");

  14. console.log("Nilai a: " + a);

  15. console.log("Nilai b: " + b);

  16.  

  17. /* output

  18. Sebelum swap

  19. Nilai a: 1

  20. Nilai b: 2

  21. Setelah swap

  22. Nilai a: 2

  23. Nilai b: 1

  24. */


Untuk melakukan pertukaran nilai, kita membutuhkan variabel penengah. Pada contoh kode di atas variabel tersebut adalah temp. Variabel penengah dibutuhkan untuk menyimpan data sementara pada variabel yang akan ditukar. Hal ini menjadi kurang efektif karena kita harus membuat variabel baru yang sebenarnya hanya bersifat sementara.
Dengan array destructuring assignment kita bisa menukar nilai variabel dengan mudah dan tentu tanpa membuat variabel extra.  

  1. let a = 1;

  2. let b= 2;

  3.  

  4. console.log("Sebelum swap");

  5. console.log("Nilai a: " + a);

  6. console.log("Nilai b: " + b);

  7.  

  8. [a, b] = [b, a]

  9.  

  10. console.log("Setelah swap");

  11. console.log("Nilai a: " + a);

  12. console.log("Nilai b: " + b);

  13.  

  14. /* output

  15. Sebelum swap

  16. Nilai a: 1

  17. Nilai b: 2

  18. Setelah swap

  19. Nilai a: 2

  20. Nilai b: 1

  21. */



Default Values

Ketika melakukan array destructuring namun terdapat variabel yang posisinya tidak dapat terjangkau oleh array, maka variabel tersebut akan bernilai undefined. Contohnya:

  1. const favorites = ["Seafood"];

  2.  

  3. const [myFood, herFood] = favorites

  4.  

  5. console.log(myFood);

  6. console.log(herFood);

  7.  

  8. /* output:

  9. Seafood

  10. undefined

  11. */


Seperti objek, pada array destructuring kita juga dapat memberikan nilai default pada variabel yang tidak dapat terjangkau oleh array, sehingga nilai pada variabel tidak akan menjadi undefined.

  1. const favorites = ["Seafood"];

  2.  

  3. const [myFood, herFood = "Salad"] = favorites

  4.  

  5. console.log(myFood);

  6. console.log(herFood);