Spread Operator Adalah: Fungsi Tiga Titik (...) di JavaScript untuk Pemula

Spread operator adalah sintaks tiga titik (...) di JavaScript yang “membuka” isi sebuah array atau object menjadi elemen-elemen terpisah. Bayangkan kamu punya sekotak pensil, lalu kamu tumpahkan isinya ke atas meja: sekarang setiap pensil berdiri sendiri, tidak lagi terbungkus dalam kotak. Itulah yang dilakukan spread operator: ia mengeluarkan isi array atau object sehingga bisa disalin, digabung, atau dimasukkan ke tempat lain dengan sangat ringkas. Fitur ini diperkenalkan sejak ES6 (2015) dan sekarang jadi salah satu sintaks yang paling sering kamu tulis setiap hari, terutama saat belajar React.

Panduan ini mulai dari nol: cara kerjanya pada array dan object, perbedaannya dengan rest parameter yang bentuknya identik tapi maknanya berlawanan, kenapa spread membantu menghindari bug “reference”, sampai contoh-contoh praktis yang benar-benar kamu pakai di proyek nyata. Semua contoh memakai istilah dan komentar berbahasa Indonesia supaya gampang dicerna.

Apa Itu Spread Operator?

Spread operator adalah operator berupa tiga titik (...) yang diletakkan tepat di depan sebuah array atau object untuk menyebarkan (spread) isinya. Alih-alih memperlakukan array sebagai satu kesatuan utuh, spread operator “membongkar” array itu menjadi nilai-nilai individual di posisi di mana ia ditulis.

Lihat perbedaannya secara langsung:

const angka = [1, 2, 3]

console.log(angka)     // [1, 2, 3]  → satu array utuh
console.log(...angka)  // 1 2 3      → tiga nilai terpisah

Baris pertama mencetak array sebagai satu objek. Baris kedua, dengan ..., seolah-olah kamu menulis console.log(1, 2, 3), array-nya dibongkar menjadi tiga argumen. Konsep sederhana inilah yang membuka banyak sekali pola berguna, dan kamu bisa mempelajarinya lebih dalam lewat pelajaran spread & rest interaktif di Hyper Sheets yang bisa langsung dikerjakan di browser.

Spread Operator pada Array

Inilah penggunaan yang paling sering kamu temui. Ada tiga pola utama: menyalin, menggabung, dan menambah elemen.

Menyalin array. Ini kegunaan yang paling perlu dikuasai pemula. Perhatikan cara yang benar:

const frontend = ['HTML', 'CSS', 'JavaScript']

// Menyalin dengan spread, membuat array BARU
const salinan = [...frontend]

console.log(salinan)  // ['HTML', 'CSS', 'JavaScript']

Menggabungkan dua array atau lebih menjadi satu array baru:

const frontend = ['HTML', 'CSS']
const library = ['React', 'Vue']

const semua = [...frontend, ...library]
console.log(semua)  // ['HTML', 'CSS', 'React', 'Vue']

Menambah elemen sambil tetap membuat array baru. Pola ini dipakai terus di React, karena kamu tidak boleh mengubah state secara langsung:

const buah = ['apel', 'mangga']

// Tambah di akhir
const tambahAkhir = [...buah, 'jeruk']
// ['apel', 'mangga', 'jeruk']

// Tambah di awal
const tambahAwal = ['pisang', ...buah]
// ['pisang', 'apel', 'mangga']

Perhatikan bahwa di semua contoh di atas, array asli (frontend, buah) tidak pernah berubah. Spread selalu menghasilkan array baru, dan itulah yang membuatnya aman.

Spread Operator pada Object

Sejak ES2018, spread juga bekerja pada object dengan pola yang mirip: menyalin dan menggabungkan properti.

const user = { nama: 'Budi', umur: 22 }

// Menyalin object
const salinan = { ...user }

// Menggabung dua object
const alamat = { kota: 'Bandung', provinsi: 'Jawa Barat' }
const lengkap = { ...user, ...alamat }
// { nama: 'Budi', umur: 22, kota: 'Bandung', provinsi: 'Jawa Barat' }

Ada satu aturan penting saat menggabung object: jika ada key yang sama, nilai yang ditulis paling akhir yang menang. Ini justru sangat berguna untuk memperbarui satu properti tanpa mengubah object asli:

const user = { nama: 'Budi', umur: 22, kota: 'Bandung' }

// Perbarui umur saja, sisanya ikut apa adanya
const updated = { ...user, umur: 23 }
// { nama: 'Budi', umur: 23, kota: 'Bandung' }

Karena umur: 23 ditulis setelah ...user, ia menimpa umur: 22 yang lama. Pola “spread lalu timpa satu properti” ini adalah cara standar memperbarui state object di React.

Coba Sendiri: Spread Operator Interaktif

Teori memang lebih gampang menempel kalau kamu melihatnya bergerak. Ganti-ganti mode (Array atau Object) dan pilih operasinya di bawah, lalu perhatikan bagaimana kode ... menghasilkan data baru sementara data awalnya tetap utuh:

Setelah bermain dengan demo di atas, kamu akan lebih peka melihat kapan spread dibutuhkan: setiap kali kamu ingin menyalin atau menggabung tanpa merusak data lama.

Perbedaan Spread Operator dan Rest Parameter

Ini bagian yang paling sering membuat pemula bingung, karena spread operator dan rest parameter menggunakan simbol yang sama persis: .... Bedanya bukan pada bentuk, tapi pada lokasi dan arah kerja-nya.

• Spread membongkar: ia mengeluarkan isi array/object ke tempat lain. Ditulis saat kamu memanggil fungsi atau membuat array/object baru.
• Rest mengumpulkan: ia memasukkan sisa argumen menjadi satu array. Ditulis di parameter fungsi atau saat destructuring.

Cara paling gampang mengingat: kalau ... berada di sisi kanan (nilai yang disebar) berarti spread; kalau berada di sisi kiri (tempat menampung) berarti rest.

// SPREAD, membongkar array jadi argumen terpisah
const angka = [5, 2, 9]
console.log(Math.max(...angka))  // 9  (sama seperti Math.max(5, 2, 9))

// REST, mengumpulkan banyak argumen jadi satu array
function jumlahkan(...semuaAngka) {
  return semuaAngka.reduce((total, n) => total + n, 0)
}
console.log(jumlahkan(1, 2, 3, 4))  // 10

Ringkasannya dalam tabel:

Kenapa Spread Operator Penting? (Masalah Reference)

Bagi kamu yang bertanya “kenapa tidak menyalin array dengan = saja?”, jawabannya ada di sini. Di JavaScript, array dan object adalah tipe reference: variabelnya menyimpan “alamat” ke data, bukan salinan data itu sendiri. Jadi menyalin dengan = tidak benar-benar menyalin:

const asli = ['a', 'b', 'c']
const salahSalin = asli   // ini BUKAN salinan!

salahSalin.push('d')
console.log(asli)  // ['a', 'b', 'c', 'd']  ← asli ikut berubah! 😱

Karena salahSalin dan asli menunjuk ke array yang sama, mengubah salah satu mengubah keduanya. Ini sumber bug yang sangat halus dan membuat pusing. Spread memecahkan masalah ini karena ia membuat array/object yang benar-benar baru:

const asli = ['a', 'b', 'c']
const salinanBenar = [...asli]  // array baru, alamat berbeda

salinanBenar.push('d')
console.log(asli)          // ['a', 'b', 'c']       ← aman, tidak berubah
console.log(salinanBenar)  // ['a', 'b', 'c', 'd']

Konsep reference ini bagian dari cara JavaScript menyimpan data di memori. Kalau ingin memahaminya lebih dalam, ulas kembali panduan JavaScript untuk pemula yang membahas tipe primitif versus reference secara lengkap.

Contoh Praktis Sehari-hari

Supaya makin nyata, berikut beberapa pola spread yang benar-benar kamu pakai di proyek:

Menyalin dan urutkan tanpa merusak data asli. Method sort() mengubah array aslinya, jadi salin dulu dengan spread:

const nilai = [80, 95, 70]
const terurut = [...nilai].sort((a, b) => b - a)
// terurut: [95, 80, 70], sedangkan `nilai` tetap [80, 95, 70]

Mengubah NodeList atau string menjadi array asli. Spread bekerja pada apa pun yang bisa diiterasi:

const kata = 'halo'
console.log([...kata])  // ['h', 'a', 'l', 'o']

Mencari nilai maksimum/minimum dari array:

const suhu = [28, 31, 26, 30]
console.log(Math.max(...suhu))  // 31
console.log(Math.min(...suhu))  // 26

Menggabungkan default dengan pengaturan pengguna, pola konfigurasi yang sangat umum:

const defaultConfig = { tema: 'terang', bahasa: 'id', notif: true }
const pilihanUser = { tema: 'gelap' }

const config = { ...defaultConfig, ...pilihanUser }
// { tema: 'gelap', bahasa: 'id', notif: true }

Spread berkaitan erat dengan destructuring; keduanya fitur ES6 yang sering dipakai bersama. Kalau kamu ingin memahami interaktivitas seperti ini dari nol sebelum masuk ke React, belajar React dari nol menunjukkan bagaimana spread dipakai untuk mengelola state secara aman.

Kesalahan Umum Saat Memakai Spread Operator

Beberapa jebakan yang sering menimpa pemula:

1. Mengira spread membuat salinan dalam (deep copy). Seperti dijelaskan di atas, spread hanya menyalin satu tingkat. Object bersarang tetap berbagi reference.

2. Salah urutan saat menimpa properti. Kalau kamu ingin menimpa nilai, properti barunya harus ditulis setelah spread. { umur: 23, ...user } justru akan ditimpa balik oleh user, bukan sebaliknya.

3. Memakai spread pada null atau undefined di array. [...null] akan error. Tapi menariknya, { ...null } untuk object tidak error dan menghasilkan {}. Perbedaannya kecil, tapi perlu diingat.

4. Menyalin object hanya untuk membacanya. Kalau kamu hanya mau membaca nilai, tidak perlu menyalin. Spread untuk menyalin hanya diperlukan saat kamu akan mengubah data dan ingin menjaga aslinya tetap utuh.

FAQ Seputar Spread Operator

Apa itu spread operator dengan bahasa sederhana?

Spread operator adalah tiga titik (...) yang “membuka” isi array atau object menjadi elemen-elemen terpisah. Gunanya paling sering untuk menyalin data ([...arr]), menggabungkan beberapa array/object jadi satu ([...a, ...b]), atau menambah elemen sambil membuat data baru, semua tanpa mengubah data aslinya.

Apa perbedaan spread operator dan rest parameter?

Simbolnya sama persis (...), tapi arahnya berlawanan. Spread membongkar/menyebar isi array ke tempat lain (dipakai saat memanggil fungsi atau membuat array baru). Rest mengumpulkan banyak argumen menjadi satu array (dipakai di parameter fungsi). Ingat: ... di sisi nilai = spread; ... di sisi penampung = rest.

Kapan spread operator diperkenalkan di JavaScript?

Spread untuk array diperkenalkan di ES6 (ECMAScript 2015). Sedangkan spread untuk object baru hadir di ES2018 (ES9). Sekarang keduanya sudah didukung penuh oleh semua browser modern, jadi aman dipakai tanpa khawatir kompatibilitas.

Apakah spread operator mengubah array aslinya?

Tidak. Inilah keunggulan utamanya. Spread selalu membuat array atau object baru, sehingga data asli tetap utuh. Sifat “tidak mengubah data lama” (immutability) ini yang membuat spread jadi pola wajib saat mengelola state di React.

Apa itu shallow copy pada spread operator?

Shallow copy berarti spread hanya menyalin data satu tingkat teratas. Kalau di dalam array/object ada array/object lain yang bersarang, isi bersarang itu masih berbagi reference dengan aslinya. Untuk menyalin data bersarang secara penuh (deep copy), kamu perlu teknik lain seperti structuredClone().

Bisakah spread dipakai untuk menyalin string?

Bisa. Karena string bisa diiterasi, [...'halo'] menghasilkan ['h', 'a', 'l', 'o']. Ini cara ringkas mengubah string menjadi array karakter tanpa memakai split('').

Langkah Selanjutnya

Setelah menguasai spread operator, konsep-konsep berikut akan terasa jauh lebih mudah karena saling terkait:

1. Destructuring: mengekstrak nilai dari array/object dengan ringkas; sering dipakai bersama rest parameter.
2. Array methods (map, filter, reduce): kombinasi maut dengan spread untuk mengolah data secara aman dan deklaratif.
3. React state: di sinilah spread paling sering dipakai; setiap update state memakai pola [...arr] atau { ...obj }.

Spread operator kelihatan sepele, tapi akan kamu tulis hampir setiap hari. Untuk latihan bertahap dengan umpan balik langsung, kerjakan materi spread & rest di Hyper Sheets. Makin sering kamu menulis ..., makin alami rasanya.