Dalam JavaScript modern (ES6+), ada satu simbol yang sangat serbaguna: tiga titik (...). Tergantung pada konteks penggunaannya, simbol ini bisa menjadi Spread Operator atau Rest Parameter.
Walaupun terlihat sama, fungsi keduanya berlawanan:
- Spread: untuk menyebarkan elemen.
- Rest: untuk mengumpulkan elemen.
Mari kita bahas satu per satu dengan contoh sederhana.
🚀 Spread Operator (...)
1. Menyalin Array
1const angka = [1, 2, 3];
2const salinan = [...angka];
3
4console.log(salinan); // [1, 2, 3]
5
1const angka = [1, 2, 3];
2const salinan = [...angka];
3
4console.log(salinan); // [1, 2, 3]
5
2. Menggabungkan Array
1const satu = [1, 2];
2const dua = [3, 4];
3
4const gabung = [...satu, ...dua];
5
6console.log(gabung); // [1, 2, 3, 4]
7
1const satu = [1, 2];
2const dua = [3, 4];
3
4const gabung = [...satu, ...dua];
5
6console.log(gabung); // [1, 2, 3, 4]
7
3. Menyalin atau Menambahkan Properti Object
1const user = { nama: "Ari", umur: 25 };
2const userLengkap = { ...user, kota: "Surabaya" };
3
4console.log(userLengkap); // { nama: "Ari", umur: 25, kota: "Surabaya" }
5
1const user = { nama: "Ari", umur: 25 };
2const userLengkap = { ...user, kota: "Surabaya" };
3
4console.log(userLengkap); // { nama: "Ari", umur: 25, kota: "Surabaya" }
5
4. Menyebarkan String menjadi Array
1const teks = "Halo";
2const karakter = [...teks];
3
4console.log(karakter); // ['H', 'a', 'l', 'o']
5
1const teks = "Halo";
2const karakter = [...teks];
3
4console.log(karakter); // ['H', 'a', 'l', 'o']
5
📦 Rest Parameter (...)
Kebalikan dari spread: rest digunakan untuk mengumpulkan sisa nilai ke dalam array.
1. Dalam Parameter Fungsi
1function hitungJumlah(...angka) {
2 return angka.reduce((total, nilai) => total + nilai, 0);
3}
4
5console.log(hitungJumlah(1, 2, 3, 4)); // 10
6
1function hitungJumlah(...angka) {
2 return angka.reduce((total, nilai) => total + nilai, 0);
3}
4
5console.log(hitungJumlah(1, 2, 3, 4)); // 10
6
2. Destructuring dengan Sisa Nilai
1const [pertama, ...sisa] = [10, 20, 30, 40];
2
3console.log(pertama); // 10
4console.log(sisa); // [20, 30, 40]
5
1const [pertama, ...sisa] = [10, 20, 30, 40];
2
3console.log(pertama); // 10
4console.log(sisa); // [20, 30, 40]
5
3. Rest di Object
1const user = { nama: "Lia", umur: 23, hobi: "membaca" };
2const { nama, ...lainnya } = user;
3
4console.log(nama); // Lia
5console.log(lainnya); // { umur: 23, hobi: "membaca" }
6
1const user = { nama: "Lia", umur: 23, hobi: "membaca" };
2const { nama, ...lainnya } = user;
3
4console.log(nama); // Lia
5console.log(lainnya); // { umur: 23, hobi: "membaca" }
6
⚠️ Tips Penggunaan
- Gunakan spread saat ingin menyalin atau menggabungkan.
- Gunakan rest saat ingin mengelompokkan sisa data.
- Spread dan rest tidak bisa digunakan di luar array atau object literal.
✨ Kesimpulan
Spread dan rest operator membuat manipulasi data di JavaScript lebih fleksibel dan modern. Keduanya sangat membantu dalam berbagai situasi — dari menggabungkan array, menyalin object, hingga menangani parameter fungsi dinamis.
Setelah memahami destructuring dan operator ..., kamu telah menyelesaikan bagian penting dari JavaScript Modern. Artikel berikutnya akan membahas Template Literal, fitur lain yang membuat penulisan string di JavaScript jadi lebih ekspresif.