JavaScript - Penugasan Destructuring

Hai teman-teman pengembang JavaScript yang bersemangat! Hari ini, kita akan mendalamkan salah satu fitur paling kuat dan mudah digunakan dalam JavaScript modern: Penugasan Destructuring. Jangan biarkan nama yang keren ini membuat Anda takut – pada akhir pelajaran ini, Anda akan menjadi ahli dalam mendestructuring dan bertanya-tanya bagaimana Anda bisa hidup tanpanya!

Apa Itu Penugasan Destructuring?

Bayangkan Anda punya sebuah kotak hadiah yang diwrapping cantik. Destructuring adalah seperti membuka kotak itu dan mengambil item tertentu yang Anda inginkan, semua dalam satu gerakan cepat. Dalam istilah JavaScript, ini adalah cara yang bagus untuk menguraikan nilai dari array atau properti dari objek ke variabel yang berbeda. Keren, kan?

Ayo mulai dari dasar dan naik ke contoh yang lebih kompleks.

Penugasan Destructuring Array

Penugasan destructuring array memungkinkan Anda mengambil nilai dari array dan mengassign mereka ke variabel dalam satu baris kode. Itu seperti mencaripedo ke dalam tas campuran permen dan mengambil rasa yang Anda inginkan!

Penugasan Destructuring Dasar Array

const buah = ['apple', 'banana', 'cherry'];
const [buahPertama, buahKedua, buahKetiga] = buah;

console.log(buahPertama);  // Output: 'apple'
console.log(buahKedua); // Output: 'banana'
console.log(buahKetiga);  // Output: 'cherry'

Dalam contoh ini, kita menguraikan array buah ke tiga variabel terpisah. Urutan penting disini – buahPertama mendapat elemen pertama, buahKedua mendapat kedua, dan seterusnya.

Melompati Elemen

Apa bila Anda hanya ingin elemen tertentu? Tak masalah! Anda dapat melompati elemen yang Anda tidak butuhkan:

const warna = ['red', 'green', 'blue', 'yellow'];
const [warnaUtama, , , warnaAksen] = warna;

console.log(warnaUtama); // Output: 'red'
console.log(warnaAksen);  // Output: 'yellow'

Di sini, kita menggunakan koma untuk melompati elemen kedua dan ketiga. Itu seperti mengatakan ke pelayan JavaScript, "Saya akan memesan item pertama dan keempat di menu, silakan!"

Menggunakan Operator Rest

kadang-kadang Anda ingin mengambil beberapa item pertama secara individual dan kemudian mengumpulkan sisanya. Masuklah operator rest (...):

const angka = [1, 2, 3, 4, 5];
const [pertama, kedua, ...sisanya] = angka;

console.log(pertama);    // Output: 1
console.log(kedua);   // Output: 2
console.log(sisanya);  // Output: [3, 4, 5]

Operator rest seperti mengatakan, "Beri saya dua pertama, dan masukkan sisanya ke dalam kantong!"

Tukar Variabel

Ini adalah trik yang menarik – Anda dapat menggunakan destructuring untuk menukar variabel tanpa variabel sementara:

let panas = 'summer';
let dingin = 'winter';

[panas, dingin] = [dingin, panas];

console.log(panas);  // Output: 'winter'
console.log(dingin); // Output: 'summer'

Itu seperti trick sihir di mana Anda menukar isi dua gelas tanpa gelas ketiga!

Penugasan Destructuring Objek

Sekarang, ayo pindah ke penugasan destructuring objek. Ini sangat berguna saat bekerja dengan API atau struktur data kompleks.

Penugasan Destructuring Dasar Objek

const orang = {
name: 'Alice',
age: 30,
city: 'Wonderland'
};

const { name, age, city } = orang;

console.log(name); // Output: 'Alice'
console.log(age);  // Output: 30
console.log(city); // Output: 'Wonderland'

Di sini, kita menguraikan properti tertentu dari objek orang. Hal menariknya adalah, nama variabel harus cocok dengan nama properti (kecuali kita menentukan sebaliknya, yang kita lihat berikutnya).

Mengassign ke Nama Variabel Lain

Apa bila Anda ingin menggunakan nama variabel yang berbeda? Tak perlu khawatir:

const buku = {
title: 'The Hitchhiker's Guide to the Galaxy',
author: 'Douglas Adams',
year: 1979
};

const { title: namaBuku, author: penulis, year: tahunTerbit } = buku;

console.log(namaBuku);        // Output: 'The Hitchhiker's Guide to the Galaxy'
console.log(penulis);          // Output: 'Douglas Adams'
console.log(tahunTerbit); // Output: 1979

Itu seperti memberi nama panggilan pada properti yang Anda ekstrak!

Nilai Default

Kadang-kadang, objek mungkin tidak memiliki semua properti yang Anda cari. Anda dapat menentukan nilai default untuk menangani ini:

const mobil = {
make: 'Toyota',
model: 'Corolla'
};

const { make, model, year = 2023 } = mobil;

console.log(make);  // Output: 'Toyota'
console.log(model); // Output: 'Corolla'
console.log(year);  // Output: 2023

Jika year tidak ada di objek mobil, maka nilainya default ke 2023. Itu seperti memiliki rencana cadangan!

Destructuring Bertingkat

Objek dapat ditumpuk, dan begitu pula destructuring:

const siswa = {
name: 'Bob',
scores: {
math: 95,
english: 88,
science: 92
}
};

const { name, scores: { math, english, science } } = siswa;

console.log(name);    // Output: 'Bob'
console.log(math);    // Output: 95
console.log(english); // Output: 88
console.log(science); // Output: 92

Itu seperti membuka boneka Rusia – Anda menguraikan objek di dalam objek!

Menggabungkan Destructuring Array dan Objek

Anda bahkan dapat menggabungkan destructuring array dan objek untuk ekspresi yang sangat kuat:

const prakiraan = [
{ day: 'Monday', temp: 22 },
{ day: 'Tuesday', temp: 25 },
{ day: 'Wednesday', temp: 20 }
];

const [, { temp: suhuSelasa }] = prakiraan;

console.log(suhuSelasa); // Output: 25

Di sini, kita melompati objek pertama dalam array, kemudian menguraikan properti temp dari objek kedua, semua dalam satu gerakan!

Apa Selanjutnya?

Sekarang Anda telah menguasai seni mendestructuring, Anda akan menemukan ini sangat berguna dalam perjalanan JavaScript Anda. Ini adalah alat yang fantastik untuk bekerja dengan struktur data kompleks, membuat kode Anda lebih bersih dan mudah dibaca.

Berikut adalah tabel rujukan cepat dari metode destructuring yang kita pelajari:

Metode	Deskripsi
Destructuring Array	Menguraikan elemen array ke variabel
Melompati Elemen Array	Menggunakan koma untuk melompati elemen yang tidak diinginkan
Operator Rest dalam Array	Mengumpulkan elemen sisanya ke dalam array
Tukar Variabel	Menukar nilai variabel tanpa variabel sementara
Destructuring Objek	Menguraikan properti objek ke variabel
Mengassign ke Nama Variabel Lain	Mengassign properti objek ke nama variabel yang berbeda
Nilai Default	Menentukan nilai default untuk properti yang tak terdefinisi
Destructuring Bertingkat	Menguraikan objek di dalam objek

Ingat, latihan membuatah! Cobalah menggunakan destructuring dalam proyek Anda, dan segera saja itu akan menjadi kebiasaan Anda. Semoga coding Anda selalu sejahtera, dan variabel Anda selalu diuraikan dengan rapi! ??

Credits: Image by storyset