Array Destructuring - JavaScript
boibolang
Posted on January 20, 2024
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);
Hasilnya sebagai berikut:
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
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
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);
Hasilnya sebagai berikut:
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
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).
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
November 29, 2024