JavaScript - Penstrukturan Berulang

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia penstrukturan berulang. Jangan khawatir jika itu terdengar sedikit menakutkan - saya berjanji, pada akhir pelajaran ini, Anda akan menstrukturkan bentuk berulang seperti seorang ahli!

Penstrukturan Berulang

Sebelum kita masuk ke dalam, mari kita mengingat secara cepat apa itu penstrukturan. Bayangkan Anda memiliki sebuah kotak (objek atau array) penuh dengan barang-barang menarik, dan Anda ingin mengambil item tertentu. Penstrukturan adalah seperti memasuki kotak itu dan mengambil tepat apa yang Anda butuhkan dalam satu gerakan. Bagus, kan?

Sekarang, penstrukturan berulang adalah ketika kita memiliki kotak didalam kotak, dan kita ingin mengambil item dari kotak dalam itu juga. Itu seperti boneka Rusia berulang data!

Mari kita mulai dengan beberapa contoh sederhana dan tingkatkan perannya.

Penstrukturan Objek Berulang

Bayangkan Anda sedang membuat permainan video, dan Anda memiliki objek pemain dengan beberapa informasi berulang. Berikut adalah cara kita mungkin menstrukturkannya:

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 objek player, mengambil name dari tingkat atas, dan kemudian masuk ke objek details untuk mengambil age. Itu seperti mengatakan, "Berikan saya nama, dan oh, sementara Anda di sana, ambil umur dari dalam details."

Mari 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

Di sini, kita masuk 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 kejelasan.

Penstrukturan Array Berulang

Array juga dapat berulang! Mari 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 menstrukturkan array berulang. Elemen ketiga dari array coordinates adalah array itu sendiri, jadi kita gunakan sepasang kurung siku lain untuk menstrukturkannya.

Mari 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

Di sini, kita menstrukturkan matriks 3x3. Setiap array berulang dalam pola penstrukturannya mengacu pada baris dalam matriks kita.

Array Dalam Objek – Penstrukturan Berulang

Sekarang, mari kita campur haluan. Apa bila kita memiliki array di dalam 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 menstrukturkan array grades. Kita mengambil nilai grade pertama secara terpisah, dan kemudian menggunakan operator rest (...) untuk mengumpulkan nilai grade yang tersisa ke dalam array baru.

Objek Dalam Array – Penstrukturan Berulang

Akhirnya, mari kita lihat penstrukturan objek di dalam 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

Di sini, kita menstrukturkan 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
Penstrukturan Objek	Ekstrak nilai dari objek	const { name, age } = person;
Penstrukturan Array	Ekstrak nilai dari array	const [x, y] = coordinates;
Penstrukturan Objek Berulang	Ekstrak nilai dari objek berulang	const { details: { age } } = player;
Penstrukturan Array Berulang	Ekstrak nilai dari array berulang	const [x, [y, z]] = nestedArray;
Penstrukturan Campuran	Gabung penstrukturan objek dan array	const { grades: [firstGrade] } = student;
Penamaan Ulang	Tetapkan nilai penstrukturan ke nama variabel yang berbeda	const { name: firstName } = person;
Operator Rest	Kumpulkan nilai yang tersisa ke dalam array	const [first, ...rest] = numbers;

Dan begitu juga, teman-teman! Anda telah meningkatkan keterampilan JavaScript Anda dengan penstrukturan berulang. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini dalam kode Anda sendiri. Selamat coding!

Credits: Image by storyset