Apa itu destructuring pada JavaScript?

Pasti akan membingungkan untuk programmer yang belum lama mengenal JavaScript saat melihat variabel ataupun konstanta seperti di bawah ini:

const [firstName, lastName] = person;

Atau seperti ini:

const { firstName, lastName } = person;

Membingungkan bukan? jika membingungkan, maka artikel ini tepat untuk kamu.

Destructuring Array

let person = ["Rifki", "Ardiansyah"];
const [firstName, lastName] = person;
console.log(firstName);
console.log(lastName);

Hasilnya:

Rifki
Ardiansyah

Kenapa begitu?

Karena kita menggunakan array destructuring, maka nilai pada array person dipecah berdasarkan urutan:

1. firstName akan mengambil nilai pertama dari array (person[0]), yaitu Rifki
2. lastName akan mengambil nilai kedua (person[1]), yaitu Ardiansyah

Kalau ada lebih banyak data di array, kamu tinggal tambahkan variabel sesuai urutan. Misalnya:

let person = ["Rifki", "Ardiansyah", "Jakarta"];
const [firstName, lastName, city] = person;
console.log(city);

Hasilnya:

Jakarta

Lalu bagaimana jika ingin mengambil index ke-n saja pada sebuah array? kamu bisa melakukan seperti berikut:

let person = ["Rifki", "Ardiansyah", "Jakarta", "Male"];
const [, lastName, , gender] = person;

console.log(lastName);
console.log(country);

Hasilnya:

Ardiansyah
Male

Jika kamu perhatikan pada contoh di atas, kita tidak menuliskan firstName dan gender pada saat destructuring, namun tetap menuliskan tanda koma (,) Seperti itulah cara kita melompati beberapa index pada saat destruturing sebuah array.

Destructuring Object

Tidak hanya pada array saja, kamu juga dapat melakukan destructuring object pada JavaScript loh …

Contoh:

let people = { firstName: "Rifki", lastName: "Ardiansyah" };
const { firstName, lastName } = people;

console.log(firstName);
console.log(lastName);

Hasilnya:

Rifki
Ardiansyah

Sama seperti array destructuring bukan? yap, namun pada object property tidak peduli di ketik pada posisi keberapa (index) saat melakukan destructuring, melainkan peduli terhadap key property, perhatikan contoh di bawah ini:

let people = { firstName: "Rifki", lastName: "Ardiansyah" };
const { lastName, firstName } = people;

console.log(firstName);
console.log(lastName);

Hasilnya:

Rifki
Ardiansyah

Jika kita perhatikan diatas, firstName dan lastName sudah terbalik posisinya namun, tetap sama saja karena pada object destructuring yang dicari adalah key dari properti tersebut.

Lalu bagaimana jika ingin mengganti nama variablenya? gampang saja, kita hanya perlu menuliskan seperti berikut:

let people = { firstName: "Rifki", lastName: "Ardiansyah" };
const { firstName: namaDepan, lastName: namaBelakang } = people;

console.log(namaDepan);
console.log(namaBelakang);

Hasilnya:

Rifki
Ardiansyah

Array destructuring memudahkan pengelolaan data array dan objek dengan cara yang lebih ringkas dan efisien. Semoga penjelasan ini bermanfaat untuk menulis kode yang lebih "clean".

Terima kasih sudah membaca,

Rifki Ardiansyah.