Array Destructuring - JavaScript

boibolang

boibolang

Posted on January 20, 2024

Array Destructuring - JavaScript

Array destructuring adalah sebuah metode untuk mengekstrak (unpack) nilai array dan menyimpannya kedalam variabel lain. Syarat dari array destructuring adalah jumlah variabel harus sama dengan ukuran array, jika tidak maka akan bernilai undefined. Array destructuring tidak mengubah array asal. Berikut contohnya:

const array = [1,2,3,4,5];
const [x,y,z,a,b] = array;
console.log(a,b,x,y,z);
console.log(array);
Enter fullscreen mode Exit fullscreen mode

Hasilnya sebagai berikut:

result

Pada baris kedua kita membuat variable berupa array untuk menampung nilai variabel array. Ketika kita console.log variabel secara acak hasilnya benar. Dan ketika console.log variabel array asal hasilnya tetap sama.
Skip value, jika ada nilai yang tidak ingin ditampilkan maka cukup dikosongi saja variabelnya.

let [g,,h,i,j] = array;
console.log(g,h); // output: 1 3
Enter fullscreen mode Exit fullscreen mode

Nilai angka 2 dilewati karena tidak ada variabel penampung sehingga g=1 dan h=3.

Kita juga bisa menukar nilai sebagai berikut:

[g,h] = [j,i];
console.log(g,h) // output: 5 4
Enter fullscreen mode Exit fullscreen mode

Kita menukar nilai g=1 dengan j=5 dan h=3 dengan i=4 sehingga hasil akhir variabel g dan h adalah 5 dan 4.

Array destructuring juga bisa digunakan pada array bersarang (nested array) sebagai berikut:

let nested = [10,4,[5,7]];
let [c,,d] = nested;
console.log(c,d);
Enter fullscreen mode Exit fullscreen mode

Hasilnya sebagai berikut:

result
Pada contoh diatas kita juga mengaplikasikan skip value untuk nilai angka 4 sehingga yang muncul adalah variabel c dan d dengan variabel d merupakan penampung untuk array bersarang.

Kita juga bisa menggunakan default value pada variabel penampung sebagai berikut:

const [p=1, t=2, r=3] = [8,9];
console.log(p,t,r); // output: 8 9 3

const [m=1, m=2, o=3] = [,,9];
console.log(m,n,o); // output: 1 2 9
Enter fullscreen mode Exit fullscreen mode

Pada contoh pertama variable p dan t meskipun memiliki default value tapi nilainya akan digantikan oleh nilai pada array sebelah kanan. Karena array hanya memiliki 2 buah nilai maka variabel r membawa nilainya sendiri yaitu angka 3.

Pada contoh kedua variabel m dan n membawa nilainya masing-masing karena array sebelah kanan tidak memiliki nilai pada index ke 0 dan 1 (ingat index array dimulai dari 0).

💖 💪 🙅 🚩
boibolang
boibolang

Posted on January 20, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related