Contoh Destructuring Array Dalam Javascript

Destructuring Array mirip dengan destructuring object. Bila objek memakai tanda kurung kurawal { } sedangkan array memakai tanda kurung siku [ ].

Perbedaan lainnya ialah destructuring array bekerja berdasarkan posisi ketimbang penamaan propertinya. Berikut contoh dari destructuring array pada ES6:

const favorites = [“Seafood”, “Salad”, “Nugget”, “Soup”

const [firstFood, secondFood, thirdFood, fourthFood] = favorites;console.log(firstFood);

console.log(secondFood);

console.log(thirdFood);console.log(fourthFood);

/* output:

1. Seafood

1. Salad

1. Nugget

1. Soup*/

Contoh di atas merupakan proses destructuring array. Di dalam array itu (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 dia dideklarasikan pada array notasi.

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

Sebetulnya nama dari variabel lokal bisa apa saja. Yang paling penting ialah urutan saat deklarasi variabelnya saja.

Kita juga dapat memilih nilai pada index tertentu untuk didestruksikan pada array. Misalnya bila kita mau mengambil nilai ketiga dari array, kita tidak harus mempersiapkan lokal variabel untuk menampung nilai array pertama, kedua, atau pun keempat. Kita dapat melakukannya dengan membiarkan index array yang kita tidak harapkan tetap kosong (tanpa menulis variabel lokal). Lebih jauh, tanda koma tetap (,) tetap dibutuhkan untuk menunjukkan posisi index-nya semacam ini:

1. const favorites = [“Seafood”, “Salad”, “Nugget”, “Soup”];
2. const [, , thirdFood ] = favorites;

1. console.log(thirdFood);

1. /* output:

1. Nugget*/

Destructuring Assignment

Kita juga dapat melakukan destructuring assignment pada array. Tetapi tidak seperti objek, kita tidak harus membungkusnya pada tanda kurung. Misalnya seperti berikut:

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

1. let myFood = “Ice Cream”;

1. let herFood = “Noodles”;

1. [myFood, herFood] = favorites;

1. console.log(myFood);

1. console.log(herFood);

1. /* output:

1. Seafood

1. Salad*/

Array destructuring assignment sangat berguna saat kita akan menukar nilai antar dua variabel, sebelum ES6 untuk melakukan hal ini kita memakai cara manual memakai algoritma sorting semacam ini:

1. var a = 1;

1. var b = 2;

1. 1. var temp;
1. console.log(“Sebelum swap”);

1. console.log(“Nilai a: “ + a);

1. console.log(“Nilai b: “ + b);

1. 1. temp = a;
1. a = b;

1. b = temp;

1. console.log(“Sesudah swap”);

1. 1. console.log(“Nilai a: “ + a);
1. console.log(“Nilai b: “ + b);

1. /* output

1. Sebelum swap

1. 1. Nilai a: 1
1. Nilai b: 2

1. Sesudah swap

1. Nilai a: 2

1. Nilai b: 1*/

Untuk melakukan pertukaran nilai, kita memerlukan variabel penengah. Dalam contoh kode di atas variabel itu ialah temp. Variabel penengah diperlukan untuk menyimpan data sementara pada variabel yang akan ditukar. Hal ini jadi kurang efektif sebab kita perlu membuat variabel baru yang sebetulnya cuma bersifat sementara.

Dengan array destructuring assignment kita dapat menukar nilai variabel dengan gampang dan tentu tanpa membuat variabel extra.

1. let a = 1;

1. let b= 2;
2. console.log(“Sebelum swap”);

1. console.log(“Nilai a: “ + a);

1. console.log(“Nilai b: “ + b);
2. [a, b] = [b, a]

1. console.log(“Sesudah swap”);

1. console.log(“Nilai a: “ + a);

1. console.log(“Nilai b: “ + b);
2. /* output

1. Sebelum swap

1. Nilai a: 1

1. Nilai b: 2

1. Sesudah swap
2. Nilai a: 2

1. Nilai b: 1*/

Default Values

Saat melakukan array destructuring tetapi terdapat variabel yang posisinya tidak bisa terjangkau oleh array, maka variabel itu akan bernilai undefined. Misalnya:

1. const favorites = [“Seafood”];
2. const [myFood, herFood] = favorites

1. console.log(myFood);

1. console.log(herFood);

1. /* output:
2. Seafood

1. undefined*/

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

1. const favorites = [“Seafood”];
2. const [myFood, herFood = “Salad”] = favorites

1. console.log(myFood);
1. console.log(herFood);