Spread dan Rest Operator di JavaScript

Dalam perkembangan JavaScript modern (ES6 dan seterusnya), terdapat dua fitur yang sangat berguna dalam pengolahan data, yaitu spread operator dan rest operator. Keduanya menggunakan simbol yang sama, yakni tiga titik (...), tetapi memiliki fungsi dan konteks penggunaan yang berbeda. Pemahaman terhadap kedua operator ini akan membantu pengembang menulis kode yang lebih ringkas, efisien, dan mudah dibaca.

1. Spread Operator

Pengertian

Spread operator digunakan untuk “menguraikan” atau menyebarkan elemen dari sebuah iterable (seperti array atau objek) ke dalam elemen individual.

Operator ini sering digunakan untuk:

• Menyalin array atau objek
• Menggabungkan array atau objek
• Mengirim elemen array sebagai argumen fungsi

---

A. Spread pada Array

1. Menyalin Array

const angka = [1, 2, 3];
const salinan = [...angka];

console.log(salinan); // [1, 2, 3]

Dengan menggunakan spread operator, kita membuat salinan array tanpa mereferensikan array asli.

2. Menggabungkan Array

const array1 = [1, 2];
const array2 = [3, 4];

const gabungan = [...array1, ...array2];
console.log(gabungan); // [1, 2, 3, 4]

Cara ini lebih ringkas dibandingkan menggunakan metode concat().

---

B. Spread pada Objek

Spread operator juga dapat digunakan untuk menggabungkan atau menyalin properti objek.

const user = {
  nama: "Andi",
  umur: 25
};

const userBaru = {
  ...user,
  pekerjaan: "Programmer"
};

console.log(userBaru);
// { nama: "Andi", umur: 25, pekerjaan: "Programmer" }

Jika terdapat properti dengan nama yang sama, maka nilai terakhir akan menimpa nilai sebelumnya.

---

C. Spread sebagai Argumen Fungsi

function tambah(a, b, c) {
  return a + b + c;
}

const angka = [1, 2, 3];
console.log(tambah(...angka)); // 6

Array diuraikan menjadi argumen individual untuk fungsi.

---

2. Rest Operator

Pengertian

Rest operator digunakan untuk mengumpulkan beberapa elemen menjadi satu array atau objek. Operator ini biasanya digunakan dalam parameter fungsi atau dalam proses destrukturisasi.

---

A. Rest pada Parameter Fungsi

Rest operator memungkinkan fungsi menerima jumlah argumen yang tidak terbatas.

function jumlahkan(...angka) {
  return angka.reduce((total, nilai) => total + nilai, 0);
}

console.log(jumlahkan(1, 2, 3, 4)); // 10

Semua argumen akan dikumpulkan menjadi array bernama angka.

---

B. Rest pada Destrukturisasi Array

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

const [pertama, kedua, ...sisanya] = angka;

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

Rest operator mengumpulkan elemen yang tersisa ke dalam sebuah array.

---

C. Rest pada Destrukturisasi Objek

const user = {
  nama: "Budi",
  umur: 30,
  kota: "Jakarta"
};

const { nama, ...detailLainnya } = user;

console.log(nama); // "Budi"
console.log(detailLainnya);
// { umur: 30, kota: "Jakarta" }

Properti yang tidak disebutkan akan dikumpulkan ke dalam objek baru.

---

3. Perbedaan Spread dan Rest Operator

Meskipun menggunakan simbol yang sama (...), perbedaannya terletak pada konteks penggunaannya:

Spread Operator	Rest Operator
Menguraikan elemen	Mengumpulkan elemen
Digunakan saat memanggil fungsi atau membuat objek/array baru	Digunakan dalam parameter fungsi atau destrukturisasi
Memperluas iterable	Menggabungkan sisa nilai

Secara sederhana:

• Spread = menyebarkan
• Rest = mengumpulkan

---

4. Kesimpulan

Spread dan rest operator merupakan fitur penting dalam JavaScript modern yang mempermudah manipulasi data, baik pada array maupun objek. Spread operator digunakan untuk menguraikan elemen, sedangkan rest operator digunakan untuk mengumpulkan elemen yang tersisa. Meskipun menggunakan sintaks yang sama, pemahaman terhadap konteks penggunaannya sangat penting agar tidak terjadi kesalahan dalam implementasi.

Dengan memahami kedua operator ini, pengembang dapat menulis kode yang lebih bersih, efisien, dan mudah dipelihara.