Setelah memahami dasar-dasar JavaScript dan asynchronous programming, sekarang kita masuk ke topik JavaScript modern (ES6+). Salah satu fitur paling berguna dan sering digunakan adalah destructuring.
Destructuring memungkinkan kita untuk mengambil nilai dari array atau properti dari object dan menyimpannya ke dalam variabel dengan cara yang lebih singkat dan mudah dibaca.
🔹 Destructuring Array
Biasanya, jika kita ingin menyimpan nilai dari array ke dalam variabel:
1const angka = [10, 20, 30];
2
3const a = angka[0];
4const b = angka[1];
5const c = angka[2];
6
7console.log(a, b, c); // 10 20 30
8
1const angka = [10, 20, 30];
2
3const a = angka[0];
4const b = angka[1];
5const c = angka[2];
6
7console.log(a, b, c); // 10 20 30
8
Dengan destructuring:
1const angka = [10, 20, 30];
2
3const [a, b, c] = angka;
4
5console.log(a, b, c); // 10 20 30
6
1const angka = [10, 20, 30];
2
3const [a, b, c] = angka;
4
5console.log(a, b, c); // 10 20 30
6
📌 Kita cukup membungkus nama variabel dalam tanda kurung siku [].
🔹 Destructuring Object
Untuk object, caranya sedikit berbeda karena kita menggunakan kurung kurawal {}:
1const user = {
2 nama: "Rina",
3 umur: 28,
4 kota: "Bandung"
5};
6
7const { nama, umur, kota } = user;
8
9console.log(nama); // Rina
10console.log(umur); // 28
11console.log(kota); // Bandung
12
1const user = {
2 nama: "Rina",
3 umur: 28,
4 kota: "Bandung"
5};
6
7const { nama, umur, kota } = user;
8
9console.log(nama); // Rina
10console.log(umur); // 28
11console.log(kota); // Bandung
12
📌 Nama variabel harus sama persis dengan nama properti dalam object.
🧠 Memberi Nama Lain Saat Destructuring
Kadang, kita ingin memberi nama variabel yang berbeda:
1const user = {
2 nama: "Dian",
3 umur: 30
4};
5
6const { nama: userName, umur: userAge } = user;
7
8console.log(userName); // Dian
9console.log(userAge); // 30
10
1const user = {
2 nama: "Dian",
3 umur: 30
4};
5
6const { nama: userName, umur: userAge } = user;
7
8console.log(userName); // Dian
9console.log(userAge); // 30
10
🧩 Default Value
Jika properti tidak ada, kita bisa menetapkan nilai default:
1const user = { nama: "Tono" };
2
3const { nama, umur = 25 } = user;
4
5console.log(nama); // Tono
6console.log(umur); // 25 (default karena tidak ada di object)
7
1const user = { nama: "Tono" };
2
3const { nama, umur = 25 } = user;
4
5console.log(nama); // Tono
6console.log(umur); // 25 (default karena tidak ada di object)
7
🧪 Destructuring di Fungsi
Kita juga bisa melakukan destructuring langsung pada parameter fungsi:
1function tampilkanUser({ nama, umur }) {
2 console.log(`Nama: ${nama}, Umur: ${umur}`);
3}
4
5const user = { nama: "Sari", umur: 21 };
6
7tampilkanUser(user);
8
1function tampilkanUser({ nama, umur }) {
2 console.log(`Nama: ${nama}, Umur: ${umur}`);
3}
4
5const user = { nama: "Sari", umur: 21 };
6
7tampilkanUser(user);
8
✨ Kesimpulan
Destructuring adalah fitur JavaScript modern yang membuat penulisan kode lebih ringkas, bersih, dan mudah dibaca. Dengan destructuring, kamu bisa mengekstrak data dari array dan object dengan cara yang lebih efisien — sangat bermanfaat dalam pengembangan web modern, terutama saat bekerja dengan data API atau props di framework seperti React.