Ketika membaca kode JavaScript modern, pola sintaksis seperti const [a, b] = array atau const { name, age } = object sangat sering dijumpai. Fitur ini dikenal sebagai Destructuring Assignment, salah satu fitur paling praktis dan penting yang diperkenalkan pada standar ES6 (ECMAScript 2015).
Secara konsep, destructuring adalah sintaks praktis untuk mengekstrak (unpack) nilai dari struktur data seperti Array maupun Object, lalu menyimpannya langsung ke dalam variabel-variabel lokal secara terpisah tanpa perlu menulis pemanggilan berulang.
1. Array Destructuring
Array destructuring bekerja berdasarkan urutan posisi (indeks). Tanda kurung siku [ ... ] diletakkan di sisi kiri tanda penugasan (=).
Sintaks Dasar
Sebelum ES6, elemen array diambil satu per satu menggunakan nomor indeks:
const colors = ["Merah", "Hitam", "Biru"];
// Cara lama (ES5)
const first = colors[0];
const second = colors[1];
const third = colors[2];
// Cara modern ES6 Destructuring
const [c1, c2, c3] = colors;
console.log(c1); // Merah
console.log(c2); // Hitam
console.log(c3); // Biru
Variabel c1 otomatis mengambil elemen indeks 0, c2 mengambil indeks 1, dan seterusnya.
Melewati Elemen (Skipping Elements)
Jika hanya ingin mengambil elemen tertentu tanpa perlu mengambil elemen sebelumnya, cukup gunakan tanda koma tanpa nama variabel:
const fruits = ["Mangga", "Alpukat", "Stroberi"];
// Lewati elemen kedua
const [firstFruit, , thirdFruit] = fruits;
console.log(firstFruit); // Mangga
console.log(thirdFruit); // Stroberi
Menukar Nilai Variabel (Swapping Variables)
Sebelumnya, pertukaran dua variabel memerlukan variabel sementara (temporary variable). Dengan array destructuring, pertukaran nilai selesai dalam satu baris:
let width = 1920;
let height = 1080;
// Menukar isi variabel
[width, height] = [height, width];
console.log(width); // 1080
console.log(height); // 1920
Nilai Default pada Array
Jika jumlah variabel melebihi jumlah elemen array, variabel yang tidak memiliki pasangan akan bernilai undefined. Nilai cadangan (default value) dapat diberikan langsung untuk mencegahnya:
const score = [90];
const [matematika, fisika = 75] = score;
console.log(matematika); // 90
console.log(fisika); // 75 (nilai default terpakai karena elemen kedua tidak ada)
Nested Array Destructuring
Array bersarang (array di dalam array) dapat langsung dibongkar dengan mengikuti pola strukturnya:
const nestedArray = [1, [2, 3], 4];
const [firstValue, [secondValue, thirdValue], fourthValue] = nestedArray;
console.log(secondValue); // 2
console.log(thirdValue); // 3
Mengumpulkan Sisa Elemen dengan Rest Pattern (...)
Operator rest (...) digunakan untuk mengumpulkan sisa elemen ke dalam satu array terpisah. Parameter rest wajib ditempatkan di posisi paling akhir dalam kurung siku:
const rainbow = ["Merah", "Jingga", "Kuning", "Hijau", "Biru", "Nila", "Ungu"];
const [red, orange, ...otherColors] = rainbow;
console.log(red); // Merah
console.log(otherColors); // ["Kuning", "Hijau", "Biru", "Nila", "Ungu"]
2. Object Destructuring
Jika array berpatokan pada urutan indeks, object destructuring bekerja berdasarkan nama properti (key). Tanda kurung kurawal { ... } diletakkan di sisi kiri tanda penugasan (=).
Sintaks Dasar
const person = {
name: "John Doe",
age: 30,
city: "Jakarta"
};
// Cara ES6 Destructuring
const { name, age, city } = person;
console.log(name); // John Doe
console.log(age); // 30
console.log(city); // Jakarta
Variabel yang dideklarasikan harus memiliki nama yang sama dengan key yang ada pada objek sumber.
Mengubah Nama Variabel (Renaming / Aliasing)
Jika ingin menyimpan nilai properti ke variabel dengan nama baru, gunakan tanda titik dua (:):
const person = {
name: "John Doe",
age: 30
};
// Format: [nama_properti_asli]: [nama_variabel_baru]
const { name: fullName, age: years } = person;
console.log(fullName); // John Doe
console.log(years); // 30
Menetapkan Nilai Default pada Object
Nilai default dapat ditentukan jika ada kemungkinan suatu properti bernilai undefined atau tidak ada pada objek:
const person = {
name: "John Doe",
age: 30
};
const { name, role = "General User" } = person;
console.log(role); // General User
Penggantian nama variabel juga dapat digabungkan sekaligus dengan nilai default:
const { country: origin = "Indonesia" } = person;
console.log(origin); // Indonesia
Nested Object Destructuring
Membongkar objek yang berada di dalam objek lain dilakukan dengan menyusun tanda kurung kurawal bersarang:
const student = {
name: "Batman",
address: {
city: "Bandung",
zip: "40115"
}
};
const { name, address: { city, zip } } = student;
console.log(name); // Batman
console.log(city); // Bandung
console.log(zip); // 40115
Catatan: Pada kode di atas, variabel
addresssendiri tidak dibuat menjadi variabel terpisah; hanyacitydanzipyang menjadi variabel lokal.
Rest Syntax pada Object
Operator rest (...) pada objek akan mengumpulkan seluruh pasangan key-value yang belum diekstrak ke dalam sebuah objek baru:
const employee = {
name: "Patrick",
age: 25,
country: "Indonesia",
profession: "Software Engineer"
};
const { name, age, ...more } = employee;
console.log(name); // Patrick
console.log(more); // { country: "Indonesia", profession: "Software Engineer" }
Re-assignment pada Variabel yang Sudah Dideklarasikan
Jika melakukan destructuring pada variabel yang sudah dideklarasikan sebelumnya (tanpa kata kunci const, let, atau var), ekspresi penugasan harus dibungkus dengan tanda kurung biasa ( ... ):
let title, price;
// Wajib dibungkus tanda kurung:
({ title, price } = { title: "Monitor Ultra-Wide", price: 4500000 });
console.log(title); // Monitor Ultra-Wide
Tanpa tanda kurung pembungkus, JavaScript akan menginterpretasikan kurung kurawal { ... } di awal baris sebagai sebuah blok kode (block statement), bukan ekspresi penugasan, sehingga menyebabkan sintaks galat (syntax error).
3. Penerapan Praktis di Dunia Nyata
Destructuring pada Parameter Fungsi
Salah satu penggunaan destructuring yang paling populer adalah langsung pada parameter fungsi:
Tanpa Destructuring:
function greet(person) {
console.log(`Halo ${person.name}, umur ${person.age} tahun.`);
}
Dengan Destructuring:
function greet({ name, age, role = "Member" }) {
console.log(`Halo ${name}, umur ${age} tahun. Status: ${role}.`);
}
const user = { name: "Dipsy", age: 26 };
greet(user); // Output: Halo Dipsy, umur 26 tahun. Status: Member.
Mixed Destructuring (Kombinasi Array dan Objek)
Pada payload API yang kompleks, data sering kali berbentuk gabungan antara objek dan array. Destructuring dapat menggabungkan kedua pola tersebut sekaligus:
const course = {
title: "Belajar JavaScript ES6",
topics: ["Variabel", "Arrow Function", "Destructuring"]
};
const { title, topics: [firstTopic, ...otherTopics] } = course;
console.log(title); // Belajar JavaScript ES6
console.log(firstTopic); // Variabel
console.log(otherTopics); // ["Arrow Function", "Destructuring"]
Ringkasan Perbedaan
| Karakteristik | Array Destructuring | Object Destructuring |
|---|---|---|
| Sintaks Pembungkus | [ ... ] |
{ ... } |
| Dasar Pencocokan | Berdasarkan urutan posisi (indeks) | Berdasarkan nama properti (key) |
| Melewati Nilai | Menggunakan koma kosong (, ,) |
Cukup tidak menuliskan nama properti |
| Mengubah Nama Variabel | Bebas memberi nama saat deklarasi | Menggunakan format { originalKey: newName }
|
| Nilai Cadangan | [a = defaultVal] |
{ a = defaultVal } |
| Rest Operator | [a, ...restArray] |
{ a, ...restObject } |
Kesimpulan
JavaScript Destructuring yang diperkenalkan pada ES6 bukan sekadar pemanis sintaksis (syntactic sugar), melainkan cara modern untuk menulis kode yang lebih efisien, bersih, dan deklaratif.
Poin-poin penting yang perlu diingat:
- Perbedaan Mendasar: Array destructuring mengandalkan urutan posisi (indeks), sedangkan object destructuring mengandalkan kecocokan nama kunci (property key)
-
Keamanan Data: Penggunaan default values mencegah variabel bernilai
undefinedketika data yang diekstrak tidak tersedia. -
Fleksibilitas: Fitur pengubahan nama variabel (aliasing), pembongkaran bersarang (nested destructuring), serta operator rest (
...) mempermudah manipulasi data kompleks dalam satu langkah ringkas. - Penerapan Luas: Destructuring menjadi fondasi penting dalam ekosistem JavaScript modern, mulai dari pemrosesan respons API hingga pembuatan fungsi yang lebih bersih.
Menguasai destructuring akan sangat membantu meminimalkan kode repetitif (boilerplate), menurunkan risiko kesalahan ketik (typo), serta membuat alur pembacaan logika kode menjadi jauh lebih terstruktur.
Top comments (0)