Contoh Destructuring Array dan Penjelasannya Lengkap

Apa Itu Destructuring Array?

Pernahkah Anda merasa ribet harus mengambil nilai dari array satu per satu pakai index seperti arr[0], arr[1], arr[2]? Di JavaScript modern, ada fitur yang bikin pekerjaan itu jauh lebih ringkas: destructuring array.

Bagi yang sedang belajar JavaScript, topik ini merupakan materi esensial. Kunjungi blog Infanthree untuk tutorial programming lainnya. Gampangnya begini — bayangkan Anda punya kardus berisi 4 kotak makanan favorit. Tanpa destructuring, Anda harus membuka kardus, mengambil kotak pertama, lalu menulis namanya satu per satu. Dengan destructuring, Anda bisa langsung “membuka semua kotak sekaligus” dan menaruh isinya ke wadah yang sudah disiapkan.

Destructuring array mirip dengan destructuring object. Bedanya, object pakai tanda kurung kurawal { }, sedangkan array pakai tanda kurung siku [ ]. Selain itu, destructuring array bekerja berdasarkan posisi, bukan nama properti seperti pada object.

Mari kita lihat contoh dasarnya:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
const [firstFood, secondFood, thirdFood, fourthFood] = favorites;
console.log(firstFood); // "Seafood" (posisi ke-0)
console.log(secondFood); // "Salad" (posisi ke-1)
console.log(thirdFood); // "Nugget" (posisi ke-2)
console.log(fourthFood); // "Soup" (posisi ke-3)

Di baris kedua, JavaScript “membongkar” array favorites dan menempatkan setiap nilainya ke variabel lokal sesuai urutan deklarasi. Yang perlu diingat: nama variabel lokal bisa apa saja. Yang paling penting adalah urutannya.

Skip Index: Mengambil Nilai Tertentu Saja

Bagaimana kalau kita cuma butuh nilai di posisi tertentu? Caranya: biarkan posisi yang tidak diinginkan tetap kosong dengan menulis koma tanpa nama variabel di belakangnya.

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
const [, thirdFood] = favorites;
console.log(thirdFood); // "Nugget"

Perhatikan ada dua koma di awal deklarasi. Setiap koma mewakili satu index yang dilewati. Dua koma = skip dua index pertama, lalu thirdFood menangkap index ke-2. Contoh lain yang sering dipakai adalah saat Anda hanya membutuhkan elemen pertama dari array hasil fetch data.

Destructuring Assignment: Menukar Nilai Tanpa Variabel Sementara

Fitur destructuring assignment pada array sangat powerful — terutama untuk menukar nilai antar dua variabel. Sebelum ES6, kita harus pakai variabel penengah (temp). Dengan destructuring assignment, kita bisa menukar nilai dengan satu baris tanpa variabel sementara:

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

Di baris [a, b] = [b, a], JavaScript pertama-tama mengevaluasi sisi kanan [b, a] menjadi array baru [2, 1]. Setelah itu, array ini didestruksikan ke variabel a dan b di sisi kiri. Hasilnya? a jadi 2, b jadi 1 — tanpa perlu variabel temp.

Default Values: Mengatasi Index yang Kosong

Saat array destructuring tetapi ada variabel yang posisinya tidak terjangkau oleh array, maka variabel itu akan bernilai undefined. Kita bisa memberikan nilai default pada variabel untuk mengatasinya:

const favorites = ["Seafood"];
const [myFood, herFood = "Salad"] = favorites;
console.log(myFood); // "Seafood"
console.log(herFood); // "Salad" (nilai default)

Default values sangat berguna saat memproses data dari API yang kadang lengkap, kadang tidak. Misalnya saat mengambil data user yang nomor teleponnya tidak selalu tersedia.

Rest Elements: Mengumpulkan Sisa Nilai

Destructuring array juga mendukung rest elements menggunakan operator ... (spread/rest). Fitur ini memungkinkan kita mengumpulkan sisa elemen yang tidak diambil ke dalam satu array baru.

const buah = ["Apel", "Mangga", "Jeruk", "Pisang", "Anggur"];
const [pertama, kedua,...lainnya] = buah;
console.log(lainnya); // ["Jeruk", "Pisang", "Anggur"]

Operator rest harus selalu di posisi terakhir dalam destructuring pattern. Contoh praktis adalah saat memproses log data di mana Anda ingin memisahkan header dari isi data tanpa harus tahu panjang array-nya.

Menggunakan Destructuring Array pada Data Bersarang

Destructuring juga bisa diterapkan pada array bersarang (nested array). Caranya cukup pakai tanda kurung siku lagi di posisi yang sesuai:

const makanan = [
 ["Nasi Goreng", 25000],
 ["Mie Ayam", 20000]
];
const [[menu1, harga1], [menu2, harga2]] = makanan;
console.log(menu1); // "Nasi Goreng"
console.log(harga1); // 25000

Kombinasi dengan Function Parameters

Destructuring array bisa langsung digunakan sebagai parameter fungsi. Ini sering ditemukan saat memproses data dari REST API atau library tertentu:

function tampilkanLokasi([latitude, longitude]) {
 console.log(`Lat: ${latitude}, Lng: ${longitude}`);
}
tampilkanLokasi([-6.2088, 106.8456]);

Anda juga bisa menggabungkan dengan default values pada parameter untuk menangani kasus data yang tidak lengkap.

Contoh Praktis: Memproses Data Pengguna

Saat membangun aplikasi web, Anda sering mendapatkan data pengguna dalam format array dari database atau API. Dengan destructuring, Anda bisa mengekstrak data tersebut dengan sangat mudah dan efisien.

// Simulasi data dari database
const dataUser = ["John Doe", "john@email.com", 25, "Jakarta"];

// Destructuring untuk mendapatkan semua data
const [nama, email, usia, kota] = dataUser;

// Tampilkan profil pengguna
console.log(`Profil Pengguna:`);
console.log(`Nama: ${nama}`);
console.log(`Email: ${email}`);
console.log(`Usia: ${usia} tahun`);
console.log(`Kota: ${kota}`);

Pendekatan ini jauh lebih elegan dibanding harus mengakses setiap data dengan index seperti dataUser[0], dataUser[1], dst. Kode menjadi lebih mudah dibaca dan dipelihara.

Common Mistakes yang Sering Terjadi

Sebelum kita masuk ke daftar kesalahan umum, penting untuk dipahami bahwa destructuring array adalah fitur yang sangat powerful namun juga bisa menjadi sumber bug jika tidak digunakan dengan hati-hati. Banyak developer pemula yang terburu-buru menggunakannya tanpa memahami bagaimana cara kerjanya di balik layar, sehingga menghasilkan kode yang sulit di-debug.

Berikut beberapa kesalahan umum yang sering dialami developer saat pertama kali menggunakan destructuring array:

• Jumlah variabel tidak cocok dengan array: Jika array punya 3 elemen tapi Anda mendeklarasikan 5 variabel, dua variabel terakhir akan bernilai undefined. Gunakan default values untuk mengatasinya.
• Lupa operator rest harus di posisi terakhir: Menulis const [...sisa, last] = arr akan error.
• Menggunakan destructuring dengan undefined: Jika variabel yang didestruksi bernilai undefined atau null, akan terjadi error. Pastikan data yang didestruksi benar-benar array.
• Salah paham urutan index: Ingat, destructuring array menggunakan indeks numerik mulai dari 0, bukan nama seperti pada object destructuring.

Tips Debugging Destructuring

Ketika destructuring tidak berjalan sesuai harapan, coba langkah berikut: log variabel sebelum destructuring, gunakan Array.isArray() untuk memastikan tipe data, dan perhatikan panjang array dengan .length.

const data = undefined;
if (Array.isArray(data)) {
 const [a, b] = data;
 console.log(a, b);
} else {
 console.log("Data bukan array!");
}

Kapan Harus Menggunakan Destructuring?

Destructuring array sangat berguna dalam beberapa skenario:

• Memproses data dari API — saat response API berupa array, destructuring memudahkan ekstraksi data.
• Menukar nilai variabel — tanpa variabel penengah, kode jadi lebih bersih.
• Extract data dari function return — banyak fungsi JavaScript mengembalikan array, destructuring membantu memecahnya.
• Membuat default values — menghindari undefined saat data tidak lengkap.

Namun, ada kalanya destructuring tidak cocok digunakan. Jika array memiliki banyak elemen (lebih dari 5), atau jika Anda hanya butuh satu elemen tertentu, mengakses langsung dengan index mungkin lebih readable. Gunakan judgment Anda — yang terpenting adalah kode yang mudah dipahami oleh tim Anda.

Best Practices untuk Destructuring Array

Gunakan const untuk destructuring, manfaatkan default values, gunakan rest elements untuk fleksibilitas, dan jangan paksa destructuring untuk array sangat panjang. Pertimbangkan untuk mengakses index langsung atau pakai object jika array punya 10+ elemen.

Studi Kasus: Destructuring dalam Kehidupan Nyata

Mari kita lihat bagaimana destructuring array digunakan dalam skenario dunia nyata. Misalnya, Anda sedang membangun aplikasi e-commerce yang menampilkan daftar produk dari API. Setiap produk dikirim sebagai array berisi [id, nama, harga, stok].

// Data produk dari API
const produk = [101, "Laptop ASUS", 8500000, 15];

// Destructuring untuk mengambil data yang dibutuhkan
const [id, nama, harga, stok] = produk;

console.log(`Produk: ${nama}`);
console.log(`Harga: Rp${harga.toLocaleString()}`);
console.log(`Stok tersisa: ${stok} unit`);
// Output:
// Produk: Laptop ASUS
// Harga: Rp8.500.000
// Stok tersisa: 15 unit

Dalam kasus ini, destructuring membuat kode lebih mudah dibaca dan dipahami. Daripada harus menulis produk[0], produk[1], dst, kita langsung mendapat variabel dengan nama yang jelas.

Contoh lain adalah saat memproses response dari API cuaca. Biasanya API mengembalikan data dalam format array atau nested array, dan destructuring memudahkan kita untuk mengekstrak data yang dibutuhkan tanpa harus mengakses index satu per satu.

Mengapa Destructuring Array Penting Dipelajari?

Destructuring array bukan sekadar fitur syntactic sugar yang membuat kode lebih pendek. Fitur ini memiliki dampak nyata terhadap kualitas dan keterbacaan kode JavaScript Anda. Dalam proyek nyata, Anda seringkali menerima data dalam bentuk array dari API, database, atau library pihak ketiga. Tanpa destructuring, Anda harus menulis banyak baris kode untuk mengekstrak nilai dari array tersebut.

Misalnya, saat memproses respons dari REST API yang mengembalikan data dalam bentuk array seperti [statusCode, responseData, headers], destructuring memungkinkan Anda langsung memisahkan ketiga komponen tersebut dalam satu baris. Ini tidak hanya menghemat penulisan kode, tapi juga membuat niat programmer lebih jelas bagi siapa saja yang membaca kode tersebut.

Bayangkan Anda bekerja dalam tim yang terdiri dari 5-10 developer. Ketika semua orang konsisten menggunakan destructuring untuk kasus yang tepat, kode base menjadi lebih mudah dipelajari oleh anggota baru. Mereka tidak perlu menghabiskan waktu untuk memahami pola pengambilan nilai array yang berbeda-beda di setiap file. Konsistensi ini mengurangi bug dan mempercepat proses onboarding.

Selain itu, banyak library modern seperti React, Vue.js, dan Axios mengembalikan data dalam bentuk array atau tuple. Memahami destructuring akan membuat pengalaman Anda dengan library-library tersebut jauh lebih smooth dan produktif. Anda tidak akan merasa asing ketika membaca dokumentasi atau contoh kode yang menggunakan pola destructuring.

Rangkuman

Untuk membantu Anda mengingat, berikut poin-poin penting tentang destructuring array:

• Destructuring array bekerja berdasarkan posisi index, berbeda dengan object yang berdasarkan nama properti.
• Skip index bisa dilakukan dengan menulis koma kosong tanpa nama variabel.
• Default values mencegah variabel bernilai undefined.
• Rest elements mengumpulkan sisa elemen ke dalam array baru.
• Menukar nilai jadi sangat mudah: [a, b] = [b, a] tanpa variabel sementara.
• Nested destructuring memungkinkan pembongkaran array bersarang.

Selengkapnya bisa Anda baca di MDN Web Docs: Destructuring Assignment.

Hal yang sering ditanyakan seputar Destructuring Array JavaScript