Pernah gak kamu pengen mindahin semua isi tas ke tas baru tanpa harus mindahin barangnya satu-satu? Di JavaScript, kita punya Spread Operator. Simbolnya cuma tiga titik berturut-turut: ....
🧩 Apa yang Akan Dipelajari
- Memahami cara kerja "menyebarkan" (spreading) isi data.
- Menyalin (Copy) Array dan Object dengan aman.
- Menggabungkan (Merge) beberapa Array atau Object jadi satu.
- Mengubah String menjadi Array dalam sekejap.
⚙️ Persiapan
- Gunakan Console browser (F12).
- Pastikan sudah paham materi Array & Object dari bab sebelumnya.
🚀 Langkah-Langkah
1. Menyalin (Copy) Array
Dulu, kalau kita mau nyalin array, kita sering terjebak "referensi" (kalau satu diubah, dua-duanya berubah). Dengan spread, kita bikin salinan yang benar-benar baru.
const buahLama = ["Apel", "Pisang"];
const buahBaru = [...buahLama, "Jeruk"];
console.log(buahBaru); // Hasil: ["Apel", "Pisang", "Jeruk"]
Penjelasan: Tiga titik ...buahLama artinya "ambil semua isi di dalam buahLama dan keluarin di sini".
2. Menggabungkan (Merge) Array
Mau gabungin daftar belanjaan dari dua toko berbeda? Gampang banget!
const tokoA = ["Susu", "Roti"];
const tokoB = ["Kopi", "Gula"];
const semuaBelanjaan = [...tokoA, ...tokoB];
console.log(semuaBelanjaan); // Hasil: ["Susu", "Roti", "Kopi", "Gula"]
3. Spread pada Object
Sama kayak Array, kita bisa gabungin atau update data di Object dengan sangat elegan.
const userDasar = { nama: "Kay", role: "User" };
const userUpdate = { ...userDasar, role: "Admin", hp: "Xiaomi 15" };
console.log(userUpdate);
// Hasil: { nama: "Kay", role: "Admin", hp: "Xiaomi 15" }
Tips: Kalau ada kunci (key) yang sama (seperti role), maka nilai yang paling terakhir (di kanan) yang akan menang.
4. String ke Array
Tiga titik ini juga bisa "memecah" kata menjadi huruf-huruf individual.
const kata = "HALO";
const huruf = [...kata];
console.log(huruf); // Hasil: ["H", "A", "L", "O"]
💡 Tips Tambahan
- Immutability: Spread operator sangat disarankan dalam framework modern (seperti React) karena kita tidak mengubah data asli, melainkan membuat data baru. Ini bikin aplikasimu lebih minim bug.
- Beda dengan Rest Parameter: Kalau tiga titik di input fungsi, itu namanya Rest Parameter (buat ngumpulin data). Kalau di luar, itu Spread (buat nyebarin data).
❗ Troubleshooting
Masalah: Kenapa spread operator saya bikin error di browser lama? Solusi: Spread operator adalah fitur ES6 (JavaScript modern). Kalau kamu harus dukung browser purba seperti Internet Explorer, kamu butuh alat bernama Babel untuk mengubahnya jadi kode versi lama. Tapi buat belajar di Chrome/Edge sekarang, ini aman banget!
🎯 Kesimpulan
Tiga titik sakti (...) adalah cara tercepat untuk memanipulasi Array dan Object tanpa ribet. Kamu bisa nyalin, nambah, dan gabungin data cuma dalam satu baris kode. Kodemu sekarang makin kelihatan "profesional"!