Belajar JavaScript Dasar #12: Destructuring & Restructuring

• Apa Itu Destructuring?
• Destructuring Array
  • Tanpa destructuring
  • Dengan destructuring
• Skip Item di Array
• Destructuring + Rest pada Array
• Destructuring Object
  • Tanpa destructuring
  • Dengan destructuring
• Mengganti Nama Variable Saat Destructuring
• Destructuring + Rest pada Object
• Apa Itu Restructuring?
• Contoh Restructuring ke Array
• Kesimpulan

Halo teman-teman semuanya, di artikel kali ini, kita akan belajar tentang Destructuring dan Restructuring di JavaScript, yaitu fitur modern yang bikin kode kita lebih bersih, simpel, dan elegan.

Apa Itu Destructuring?

Destructuring adalah fitur ES6 yang memungkinkan kita untuk mengambil nilai dari array atau object dan menyimpannya ke dalam variable dengan cara yang cepat dan praktis. Kalau biasanya kita akses properti satu-satu, dengan destructuring cukup sekali deklarasi!

Destructuring Array

• Tanpa destructuring

  const angka = [1, 2, 3];
  
  const satu = angka[0];
  const dua = angka[1];
  const tiga = angka[2];
  
  console.log(satu, dua, tiga); 
  // Output: 1 2 3
  

• Dengan destructuring

  const angka = [1, 2, 3];
  
  const [satu, dua, tiga] = angka;
  
  console.log(satu, dua, tiga); 
  // Output: 1 2 3
  

  Lebih cepat dan bersih, kan?

Skip Item di Array

Kalau mau melewati elemen tertentu:

const angka = [1, 2, 3, 4];

const [pertama, , ketiga] = angka;

console.log(pertama); // 1
console.log(ketiga);  // 3

Tanda koma , digunakan untuk skip item.

Destructuring + Rest pada Array

Gabungkan dengan rest parameter:

const warna = ["merah", "biru", "hijau", "kuning"];

const [warna1, ...warnaLain] = warna;

console.log(warna1);      // merah
console.log(warnaLain);   // ["biru", "hijau", "kuning"]

Destructuring Object

• Tanpa destructuring

  const user = {
    nama: "Rudi",
    umur: 30
  };
  
  const nama = user.nama;
  const umur = user.umur;
  
  console.log(nama, umur);
  

• Dengan destructuring

  const user = {
    nama: "Rudi",
    umur: 30
  };
  
  const { nama, umur } = user;
  
  console.log(nama, umur);
  

Mengganti Nama Variable Saat Destructuring

Kadang kita mau pakai nama variable yang berbeda:

const user = {
  nama: "Rina",
  umur: 28
};

const { nama: namaLengkap, umur: usia } = user;

console.log(namaLengkap); // Rina
console.log(usia);        // 28

Destructuring + Rest pada Object

Mengambil sebagian properti dan sisanya dikumpulkan:

const siswa = {
  nama: "Ayu",
  umur: 17,
  kelas: "12 IPA"
};

const { nama, ...infoLain } = siswa;

console.log(nama);      // Ayu
console.log(infoLain);  // { umur: 17, kelas: '12 IPA' }

Apa Itu Restructuring?

Restructuring adalah kebalikan dari destructuring, kita menggabungkan beberapa variable menjadi satu object atau array.

Contoh:

const nama = "Budi";
const umur = 20;

const user = { nama, umur };

console.log(user);
// Output: { nama: 'Budi', umur: 20 }

Tanpa perlu nama: nama, umur: umur, cukup tulis sekali kalau nama property dan variable sama.

Contoh Restructuring ke Array

const angka1 = 1;
const angka2 = 2;
const angka3 = 3;

const angka = [angka1, angka2, angka3];

console.log(angka);
// Output: [1, 2, 3]

Kesimpulan

Dengan destructuring dan restructuring, kita bisa membuat kode JavaScript lebih singkat, rapi, dan mudah dibaca!

Pada artikel berikutnya, kita semua akan belajar tentang Template Literals di dalam JavaScript.

Terima Kasih