Contoh Destructuring Object dalam JavaScript: Panduan Lengkap

Mengapa Destructuring Object Itu Penting?

Pernahkah Anda menulis JavaScript dan merasa capek harus menulis objek.properti berulang-ulang kali? Misalnya, kalau punya objek user dengan banyak properti, dan Anda hanya butuh user.name, user.email, dan user.age — rasanya冗余 sekali harus mengaksesnya satu per satu.

Nah, di sinilah destructuring object hadir sebagai penyelamat. Destructuring adalah fitur ES6 yang memungkinkan kita mengekstrak nilai dari objek langsung ke variabel-variabel lokal dalam satu baris kode. Lebih singkat, lebih bersih, dan lebih mudah dibaca.

Ingin mempelajari JavaScript lebih dalam? Kunjungi Infanthree untuk panduan lengkap seputar pemrograman JavaScript, tips web development, dan tutorial teknologi terbaru.

Gampangnya begini: bayangkan Anda punya koper berisi baju, celana, dan topi. Destructuring itu seperti membuka koper dan mengambil item-item di dalamnya sekaligus, langsung diletakkan di tempat yang sudah ditentukan.

Sintaks Dasar Destructuring Object

Destructuring object pada ES6 menggunakan objek literal { } di sisi kiri dari operasi assignment:

const profile = {
 firstName: "John",
 lastName: "Doe",
 age: 18
};

// Destructuring: ekstrak properti ke variabel lokal
const {firstName, lastName, age} = profile;

console.log(firstName, lastName, age);
// Output: John Doe 18

Penjelasan per baris:

• Baris 1-5: Membuat objek profile dengan tiga properti: firstName, lastName, dan age.
• Baris 8: Destructuring! Tanda kurung kurawal { } di sisi kiri merepresentasikan objek yang akan didestruksikan. Nama variabel di dalamnya harus sama persis dengan nama properti objek.
• Baris 10: Saat destructuring dilakukan, firstName otomatis berisi nilai profile.firstName, lastName berisi profile.lastName, dan seterusnya.

Mengambil Sebagian Properti Saja

Kita tidak harus mengambil semua properti. Cukup destructuring properti yang kita butuhkan saja:

const profile = {
 firstName: "John",
 lastName: "Doe",
 age: 18
};

// Hanya mengambil lastName
const {lastName} = profile;
console.log(lastName); // Output: Doe

Yang menarik, properti yang tidak kita destructuring tetap tersimpan di objek aslinya — kita hanya membuat “salinan” nilainya ke variabel lokal.

Destructuring Assignment

Selain pada saat deklarasi variabel, destructuring juga bisa dilakukan pada variabel yang sudah dideklarasikan sebelumnya. Ini disebut destructuring assignment:

const profile = {
 firstName: "John",
 lastName: "Doe",
 age: 18
};

// Variabel sudah dideklarasikan sebelumnya
let firstName = "Dimas";
let age = 20;

// Menginisialisasi nilai baru melalui destructuring
({firstName, age} = profile);

console.log(firstName); // Output: John (bukan "Dimas" lagi)
console.log(age); // Output: 18

Penjelasan:

• Baris 8-9: Variabel firstName dan age sudah dideklarasikan dengan nilai awal “Dimas” dan 20.
• Baris 12: Destructuring assignment mengubah nilai kedua variabel tersebut dengan nilai dari profile. Perhatikan tanda kurung ( ) yang membungkus — ini wajib ada!
• Mengapa harus ada kurung? Kalau kita tulis {firstName, age} = profile tanpa kurung, JavaScript akan mengira kita membuat block statement (blok kode), bukan expression. Block statement tidak bisa berada di sisi kiri assignment.

Default Values

Saat mendestruksikan objek, kita bisa menetapkan nilai default untuk properti yang mungkin tidak ada di objek:

const profile = {
 firstName: "John",
 lastName: "Doe",
 age: 18
};

// isMale tidak ada di objek profile!
const {firstName, age, isMale = false} = profile;

console.log(firstName); // Output: John
console.log(age); // Output: 18
console.log(isMale); // Output: false (nilai default)

Penjelasan:

• Baris 9: isMale = false — tanda = di sini menetapkan nilai default. Karena properti isMale tidak ada di objek profile, variabel isMale akan menggunakan nilai default false.
• Cara kerja: Jika properti ditemukan, gunakan nilainya. Jika tidak ditemukan, gunakan nilai default.
• Tanpa default value: Jika kita tidak menetapkan default, isMale akan bernilai undefined.

Renaming: Mengganti Nama Variabel Lokal

Sampai sekarang kita tahu bahwa penamaan variabel lokal harus sama dengan properti objek. Tapi ES6 menyediakan sintaks untuk mengganti nama variabel lokal:

const profile = {
 firstName: "John",
 lastName: "Doe",
 age: 18
};

// Renaming: nama variabel lokal berbeda dari nama properti
const {firstName: localFirstName, lastName: localLastName, age: localAge} = profile;

console.log(localFirstName); // Output: John
console.log(localLastName); // Output: Doe
console.log(localAge); // Output: 18

// console.log(firstName); // ❌ Error! firstName tidak didefinisikan

Penjelasan:

• Sintaks: namaProperti: namaVariabelLokal — bagian sebelum tanda : adalah nama properti di objek, bagian sesudahnya adalah nama variabel lokal yang akan dibuat.
• Penting: Setelah renaming, Anda hanya bisa menggunakan nama variabel lokal (localFirstName), bukan nama properti asli (firstName).
• Kapan berguna? Saat nama properti konflik dengan variabel lain yang sudah ada, atau saat Anda ingin nama yang lebih deskriptif.

Nested Destructuring

Objek bisa memiliki properti yang juga berisi objek (nested). Destructuring bisa menangani hal ini:

const user = {
 id: 101,
 name: {
 first: "John",
 last: "Doe"
 },
 address: {
 city: "Jakarta",
 country: "Indonesia"
 }
};

// Nested destructuring
const {name: {first, last}, address: {city}} = user;

console.log(first); // Output: John
console.log(last); // Output: Doe
console.log(city); // Output: Jakarta

Penjelasan:

• Baris 14: name: {first, last} berarti “dari properti name, ekstrak first dan last“. Ini seperti membuka kotak di dalam kotak.
• Baris 16-18: Kita bisa langsung mengakses first, last, dan city tanpa perlu menulis user.name.first berulang kali.

Destructuring dengan Function Parameters

Destructuring juga sangat powerful saat digunakan sebagai parameter fungsi:

// Tanpa destructuring — parameter harus diakses satu per satu
function greetTanpa(user) {
 return `Halo, ${user.name.first} ${user.name.last} dari ${user.address.city}!`;
}

// Dengan destructuring — langsung ambil yang dibutuhkan
function greet({name: {first, last}, address: {city}}) {
 return `Halo, ${first} ${last} dari ${city}!`;
}

const user = {
 name: {first: "John", last: "Doe"},
 address: {city: "Jakarta"}
};

console.log(greetTanpa(user)); // Halo, John Doe dari Jakarta!
console.log(greet(user)); // Halo, John Doe dari Jakarta!

Penjelasan:

• Baris 8: Parameter fungsi greet menggunakan destructuring langsung di definisi fungsi. Ini membuat kode lebih deklaratif — Anda langsung tahu properti mana yang dibutuhkan fungsi.
• Keuntungan: Tidak perlu menulis user.name.first di dalam fungsi. Lebih singkat, lebih rapi.

Kapan Harus Menggunakan Destructuring Object?

Destructuring object sangat berguna dalam beberapa skenario pengembangan. Pertama, saat Anda perlu mengekstrak banyak properti dari objek untuk digunakan dalam fungsi atau blok kode. Kedua, saat menerima data dari API yang memiliki struktur bersarang, destructuring memudahkan Anda mengambil hanya data yang diperlukan tanpa harus menulis path akses yang panjang.

Ketiga, destructuring juga efektif digunakan saat bekerja dengan library atau framework seperti React, di mana fitur ini sering digunakan untuk mengambil props dari komponen. Misalnya, const {name, age, email} = user jauh lebih bersih dibandingkan harus mengakses user.name, user.age, dan user.email secara terpisah di berbagai tempat dalam kode.

Rest Pattern dengan Destructuring

Selain mengambil properti tertentu, kita juga bisa mengumpulkan sisa properti yang tidak diambil menggunakan rest:

const profile = {
 firstName: "John",
 lastName: "Doe",
 age: 18,
 email: "john@example.com",
 phone: "08123456789"
};

// Ambil firstName dan age, sisanya masuk ke 'others'
const {firstName, age,...others} = profile;

console.log(firstName); // Output: John
console.log(age); // Output: 18
console.log(others); // Output: {lastName: "Doe", email: "john@example.com", phone: "08123456789"}

Penjelasan:

• Sintaks ...others: Operator spread/rest mengumpulkan semua properti yang tidak di-destructuring ke dalam objek baru bernama others.
• berguna saat: Anda ingin memisahkan beberapa properti dari sisanya, misalnya saat membuat salinan objek dengan modifikasi.

Destructuring Object vs Destructuring Array

Penting untuk memahami perbedaan antara destructuring object dan destructuring array. Destructuring array menggunakan tanda kurung siku [ ] dan bergantung pada urutan elemen, sedangkan destructuring object menggunakan tanda kurung kurawal { } dan bergantung pada nama properti.

Misalnya, const [a, b] = [1, 2] menghasilkan a = 1 dan b = 2 berdasarkan urutan. Sementara const {x, y} = {x: 10, y: 20} menghasilkan x = 10 dan y = 20 berdasarkan nama properti. Keduanya bisa digabungkan dalam satu operasi, misalnya saat mengolah data dari API yang mengembalikan array of objects yang perlu diproses lebih lanjut.

Kesalahan Umum yang Sering Terjadi

• Salah penamaan variabel: Jika nama variabel tidak sama dengan nama properti, hasilnya akan undefined. Pastikan nama persis sama (case-sensitive!).
• Lupa tanda kurung saat destructuring assignment: {firstName} = profile tanpa kurung akan error karena JavaScript mengira itu block statement.
• Mengakses properti setelah renaming: Setelah renaming, properti asli tidak bisa diakses — hanya nama baru yang berlaku.

Rangkuman

• Destructuring object memungkinkan kita mengekstrak properti objek ke variabel lokal dalam satu baris.
• Sintaks dasar: const {properti1, properti2} = objek;
• Default values ({properti = nilaiDefault}) digunakan saat properti mungkin tidak ada.
• Renaming ({properti: namaBaru}) untuk mengganti nama variabel lokal.
• Nested destructuring bisa menangani objek bertingkat.
• Rest pattern (...others) mengumpulkan sisa properti yang tidak di-destructuring.

Pelajari lebih lanjut tentang Destructuring Assignment di MDN Web Docs

Hal yang sering ditanyakan seputar Destructuring Object JavaScript