Destructuring dan Spread Operator di JavaScript: Trik Kode Lebih Rapi

Meninggalkan Sintaks Jadul

Sebelum JavaScript diperbarui secara masif pada tahun 2015 (ES6), mengambil data dari sebuah Object atau menggabungkan Array membutuhkan banyak baris kode berulang. Sekarang, kita memiliki dua senjata utama yang membuat penulisan JavaScript (dan React) terasa seperti menulis puisi.

1. Destructuring (Membongkar Isi Objek)

Misalkan kamu mendapatkan data JSON dari API seperti ini:

const user = {
  nama: "Budi",
  umur: 25,
  alamat: "Jakarta"
};

Cara Kuno: Kamu harus memanggil user.nama atau user.umur berulang-ulang setiap kali membutuhkannya. Jika namanya panjang, ini sangat melelahkan.

Cara Modern (Destructuring): Kamu membongkar (mengekstrak) properti tersebut menjadi variabel mandiri dalam satu baris kode.

// Mengekstrak kunci 'nama' dan 'alamat' langsung dari dalam objek user
const { nama, alamat } = user;

console.log(nama);   // Output: Budi
console.log(alamat); // Output: Jakarta

Trik ini sangat sering kamu lihat di React ketika mengekstrak Props di parameter komponen: function Card({ judul, deskripsi }) { ... }.

2. Spread Operator / Tanda Titik Tiga (Menebarkan Isi)

Tanda ... disebut Spread Operator. Fungsinya adalah memecahkan/menebarkan isi dari sebuah Array atau Objek ke tempat baru.

Kasus 1: Menggabungkan Dua Array

Daripada menggunakan perulangan (looping), kamu bisa langsung menebarkan isi dua array menjadi satu array baru.

const ganjil = [1, 3, 5];
const genap = [2, 4, 6];

const semuaAngka = [...ganjil, ...genap]; 
// Hasil: [1, 3, 5, 2, 4, 6]

Kasus 2: Menduplikasi dan Menambah Isi Objek

Saat membuat fitur *Update Data* di Backend, kita sering butuh menyalin objek lama dan hanya menimpa satu isinya saja. Spread Operator melakukannya dengan sempurna.

const profilLama = { nama: "Siti", peran: "User" };

// Kita menebar isi profilLama, tapi menimpa peran-nya menjadi Admin
const profilBaru = { ...profilLama, peran: "Admin" };

console.log(profilBaru); 
// Hasil: { nama: "Siti", peran: "Admin" }

Menguasai dua sintaks ES6 ini akan memangkas jumlah baris kodemu hingga 30% dan membuatnya terlihat jauh lebih profesional!