JavaScript - Destructuring Bersarang

Hai teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan mengemban perjalanan yang menarik ke dalam dunia destructuring bersarang. Jangan khawatir jika ini terdengar sedikit menakutkan - saya berjanji bahwa pada akhir pelajaran ini, Anda akan dapat mendestructuring struktur bersarang seperti seorang profesional!

Destructuring Bersarang

Sebelum kita melompat ke lubuk dalam, mari kita singkatkan apa itu destructuring. Bayangkan Anda memiliki sebuah kotak (objek atau array) penuh dengan barang-barang menarik, dan Anda ingin mengambil item tertentu. Destructuring seperti mencapai ke dalam kotak itu dan mengambil tepat apa yang Anda butuhkan dalam satu gerakan. Bagus, kan?

Sekarang, destructuring bersarang adalah saat kita memiliki kotak didalam kotak, dan kita ingin mengambil item dari kotak dalam itu juga. Itu seperti boneka Rusia bersarang data!

Marilah kita mulai dengan beberapa contoh sederhana dan tingkatkan perjalanan kita.

Destructuring Objek Bersarang

Bayangkan Anda sedang membuat permainan video, dan Anda memiliki objek pemain dengan beberapa informasi bersarang. Ini adalah cara kita dapat mendestructuringnya:

const player = {
name: "Mario",
game: "Super Mario Bros",
details: {
age: 35,
occupation: "Plumber"
}
};

const { name, details: { age } } = player;

console.log(name);  // Output: Mario
console.log(age);   // Output: 35

Dalam contoh ini, kita mencapai ke dalam objek player, mengambil name dari tingkat atas, dan kemudian masuk ke objek details untuk mengambil age. Seperti mengatakan, "Berikan saya nama, dan oh, sementara Anda di sana, ambil usia dari dalam details."

Marilah kita coba sesuatu yang sedikit lebih kompleks:

const game = {
title: "Final Fantasy VII",
platform: "PlayStation",
characters: {
protagonist: {
name: "Cloud Strife",
weapon: "Buster Sword"
},
antagonist: {
name: "Sephiroth",
weapon: "Masamune"
}
}
};

const { title, characters: { protagonist: { name: heroName, weapon: heroWeapon } } } = game;

console.log(title);       // Output: Final Fantasy VII
console.log(heroName);    // Output: Cloud Strife
console.log(heroWeapon);  // Output: Buster Sword

Disini, kita mencapai dua tingkat! Kita mengambil title dari tingkat atas, kemudian masuk ke characters, kemudian ke protagonist, dan akhirnya mengambil name dan weapon. Kita juga mengubah namanya menjadi heroName dan heroWeapon untuk klarifikasi.

Destructuring Array Bersarang

Array juga dapat bersarang! Marilah kita lihat contohnya:

const coordinates = [10, 20, [30, 40]];

const [x, y, [z, w]] = coordinates;

console.log(x);  // Output: 10
console.log(y);  // Output: 20
console.log(z);  // Output: 30
console.log(w);  // Output: 40

Dalam kasus ini, kita mendestructuring array bersarang. Item ketiga dari array coordinates adalah array itu sendiri, jadi kita gunakan pasangan kurung siku lain untuk mendestructuringnya.

Marilah kita coba sesuatu yang lebih kompleks:

const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];

const [[a, b, c], [d, e, f], [g, h, i]] = matrix;

console.log(a, e, i);  // Output: 1 5 9

Disini, kita mendestructuring matriks 3x3. Setiap array bersarang dalam pola mendestructuring sesuai dengan baris dalam matriks kita.

Array Dalam Objek – Destructuring Bersarang

Sekarang, mari kitacampur hal-hal. Apa bila kita memiliki array didalam objek?

const student = {
name: "Alice",
age: 20,
grades: [85, 90, 92]
};

const { name, grades: [firstGrade, ...otherGrades] } = student;

console.log(name);         // Output: Alice
console.log(firstGrade);   // Output: 85
console.log(otherGrades);  // Output: [90, 92]

Dalam contoh ini, kita mengambil name dari objek, dan kemudian mendestructuring array grades. Kita mengambil nilai pertama secara terpisah, dan kemudian menggunakan operator sisipan (...) untuk mengumpulkan nilai yang tersisa ke dalam array baru.

Objek Dalam Array – Destructuring Bersarang

Akhirnya, mari kita lihat mendestructuring objek didalam array:

const team = [
{ name: "John", role: "Developer" },
{ name: "Jane", role: "Designer" },
{ name: "Jack", role: "Manager" }
];

const [{ name: firstName }, , { role }] = team;

console.log(firstName);  // Output: John
console.log(role);       // Output: Manager

Disini, kita mendestructuring objek pertama dan ketiga dalam array. Kita mengambil name dari objek pertama (dan mengubah namanya menjadi firstName), melewatkan objek kedua (perhatikan koma tambahan), dan kemudian mengambil role dari objek ketiga.

Tabel Metode

Berikut adalah tabel yang menggabungkan metode yang kita pelajari:

Metode	Deskripsi	Contoh
Destructuring Objek	Ekstrak nilai dari objek	const { name, age } = person;
Destructuring Array	Ekstrak nilai dari array	const [x, y] = coordinates;
Destructuring Objek Bersarang	Ekstrak nilai dari objek bersarang	const { details: { age } } = player;
Destructuring Array Bersarang	Ekstrak nilai dari array bersarang	const [x, [y, z]] = nestedArray;
Destructuring Campur	Gabungkan destructuring objek dan array	const { grades: [firstGrade] } = student;
Renaming	Assign nilai destructured ke nama variabel lain	const { name: firstName } = person;
Operator Sisipan	Kumpulkan nilai yang tersisa ke dalam array	const [first, ...rest] = numbers;

Dan begitu saja, teman-teman! Anda telah meningkatkan keterampilan JavaScript Anda dengan destructuring bersarang. Ingat, latihan membuat sempurna, jadi jangan takut untuk meng eksperimenkan konsep ini dalam kode Anda sendiri. Selamat berkoding!

Credits: Image by storyset