ARRAY DESCTRUCTURE

Destructuring pada JavaScript adalah sintaksis yang memungkinkan kita untuk memecah objek atau array dan menyimpan nilai-nilai tersebut dalam variabel secara langsung. Di tutorial ini, kita akan membahas tentang destrukturisasi array.

Konsep Destructuring

Sebelum ES6, jika kita ingin menetapkan nilai dari elemen array ke dalam variabel, kita harus melakukan hal ini satu per satu. Misalnya:

var arr = [1, 2, 3];
var a = arr[0];
var b = arr[1];
var c = arr[2];

Namun, dengan ES6 kita dapat melakukan hal yang sama dengan lebih sederhana, yakni menggunakan destrukturisasi array.

var arr = [1, 2, 3];
var [a, b, c] = arr;

Pada contoh di atas, nilai dari elemen array arr dipisahkan dan disimpan dalam variable a, b, dan c secara sekaligus.

Penggunaan Destructuring pada Array

Destructuring array di JavaScript dapat digunakan dalam beberapa kasus, seperti Assignment tanpa Deklarasi, Default Values, Pemisahan nilai dari array nested, dan melewati nilai pada fungsi.

Assignment Tanpa Deklarasi

Di JavaScript, kamu bisa melakukan assignment ke variabel yang sudah ada sebelumnya tanpa mencoba mendeklarasikannya lagi.

let x, y;
[x, y] = [1, 2];
console.log(x); // 1
console.log(y); // 2

Default Values

Dengan destructuring array, kamu bisa menetapkan nilai default untuk variabel jika elemen array tidak ada atau undefined.

let [a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

Nested Array Destructuring

Juga bisa digunakan untuk array yang bertingkat atau nested.

let [a, [b, [c, d]]] = [1, [2, [[[3, 4], 5], 6]]];

console.log(a); // 1
console.log(b); // 2
console.log(c); // [[3, 4], 5]
console.log(d); // 6

Melewati Nilai pada Fungsi

Anda bisa melewati nilai dari variabel kepada fungsi menggunakan destrukturisasi array.

function foo([a, b]) {
  console.log(a); // 1
  console.log(b); // 2
}

foo([1, 2]);

Dalam hal ini, penggunaan destructuring array sangat bermanfaat untuk membuat kode JavaScript kamu lebih efisien dan mudah dibaca.