Contoh Spread Operator JavaScript: 7 Penggunaan Praktis

Pernah nggak sih kamu harus menyalin isi array satu per satu cuma buat menggabungkannya ke array lain? Kalau iya, kamu pasti langsung lega begitu tahu ada spread operator JavaScript. Fitur yang diperkenalkan di ES6 (ECMAScript 2015) ini ditulis dengan tiga titik (…) dan cara kerjanya sederhana: membentangkan isi sebuah iterable — array, object, string, Map, atau Set — menjadi elemen-elemen individual. kita akan membahas contoh spread operator dalam JavaScript secara lengkap, mulai dari konsep dasar sampai kasus penggunaan yang sering dipakai developer di dunia nyata. Semua contoh bisa langsung kamu salin dan jalankan di console browser atau Node.js. Kita juga akan membahas batasan-batasannya, termasuk soal shallow copy yang sering bikin pemula bingung. Siap? Yuk mulai.

Jika baru memulai belajar coding, artikel Programming Roadmap: 3 Skill Wajib untuk Menjadi Front-End Developer bisa jadi panduan tambahan.

Apa Itu Spread Operator dan Kenapa Penting?

Spread operator (...) adalah sintaks yang membentangkan (spread) elemen-elemen dari sebuah iterable menjadi elemen individual. Alih-alih menyebut satu per satu, kamu bisa membuka isi sebuah collection sekaligus. Konsep ini terdengar abstrak, tapi sebenarnya sangat intuitif.

Bayangkan kamu punya kotak berisi sepuluh apel. Tanpa spread, kamu harus mengambil apel satu per satu dan menaruhnya di atas meja. Dengan spread, kamu cukup menuangkan seluruh isi kotak sekaligus — semua apel langsung terlihat dan bisa diakses. Itulah gambaran sederhana dari cara kerja spread operator.

Karena kemampuannya ini, spread operator dipakai di banyak kode produksi: dari manipulasi state di React, penggabungan data di Redux, sampai pembersihan data di backend Node.js. Kamu akan sering melihat pola [...items] atau {...object} di codebase modern.

Contoh 1: Mengirim Array ke Function dengan Spread

Salah satu kegunaan paling dasar adalah mengirim array sebagai argumen fungsi yang menerima parameter individual. Contoh paling sederhana adalah console.log():

const favorites = ["Seafood", "Salad", "Nugget", "Soup"]; // Tanpa spread operator console.log(favorites); // output: [ 'Seafood', 'Salad', 'Nugget', 'Soup' ] — array, bukan argumen terpisah // Dengan spread operator console.log(...favorites); // output: Seafood Salad Nugget Soup — 4 string terpisah

Penjelasan singkat:

• console.log(...favorites) — spread operator memecah array menjadi empat elemen terpisah. Setiap elemen dikirim sebagai argumen terpisah ke console.log(), sehingga output-nya adalah string yang dipisahkan spasi, bukan array.

Spread operator bekerja sama persis seperti menulis ini secara manual:

// Spread operator ...favorites SAMA DENGAN menulis: console.log(favorites[0], favorites[1], favorites[2], favorites[3]); // output: Seafood Salad Nugget Soup

Bayangkan kalau array-nya punya 100 elemen — kamu harus menulis favorites[0], favorites[1], ..., favorites[99]. Dengan spread, cukup ...favorites dan selesai. Ini contoh nyata bagaimana spread membuat kode lebih ringkas dan mudah dirawat.

Contoh 2: Menggabungkan Array Tanpa concat()

Penggunaan paling populer dari spread adalah menggabungkan dua array menjadi satu. Sebelum ES6, kamu harus memakai metode concat(). Sekarang cukup dengan notasi array dan spread:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"]; const others = ["Cake", "Pie", "Donut"]; // Cara lama: menggunakan concat() const allFavoritesConcat = favorites.concat(others); console.log(allFavoritesConcat); // output: [ 'Seafood', 'Salad', 'Nugget', 'Soup', 'Cake', 'Pie', 'Donut' ] // Cara baru: menggunakan spread operator const allFavoritesSpread = [...favorites, ...others]; console.log(allFavoritesSpread); // output: [ 'Seafood', 'Salad', 'Nugget', 'Soup', 'Cake', 'Pie', 'Donut' ] // PERHATIKAN: tanpa spread operator, hasilnya nested array! const nestedArray = [favorites, others]; console.log(nestedArray); // output: [[ 'Seafood', 'Salad', 'Nugget', 'Soup' ], [ 'Cake', 'Pie', 'Donut' ]]

Ada tiga hal penting dari contoh di atas:

• [...favorites, ...others] — setiap ... “membongkar” isi array menjadi elemen individu, lalu array baru menyusunnya kembali menjadi satu array datar (flat).
• favorites.concat(others) — metode lama yang hasilnya sama, tapi lebih verbose.
• Tanpa spread, [favorites, others] justru membuat array berisi dua array — bukan menggabungkan isinya. Ini kesalahan umum yang sering membingungkan pemula: yang terjadi adalah nested array, bukan flat array.

Contoh 3: Spread dengan Math.max() dan Math.min()

Spread operator sangat membantu untuk fungsi variadic — fungsi yang menerima jumlah argumen tidak tetap, seperti Math.max() dan Math.min():

const numbers = [12, 32, 90, 12, 32]; // Tanpa spread operator — harus akses manual per indeks console.log(Math.max(numbers[0], numbers[1], numbers[2], numbers[3], numbers[4])); // output: 90 // Dengan spread operator — otomatis semua elemen dicek console.log(Math.max(...numbers)); // output: 90 // Begitu juga dengan Math.min() console.log(Math.min(...numbers)); // output: 12

Keunggulannya jelas:

• Kamu tidak perlu tahu berapa banyak elemen di dalam array. Cukup ...numbers dan JavaScript otomatis membentangkan semua elemen sebagai argumen terpisah.
• Kode lebih ringkas dan mudah dibaca — tidak perlu akses manual per indeks seperti numbers[0], numbers[1], dan seterusnya.
• Jika elemen ditambah atau dikurangi dari array, kode tidak perlu diubah sama sekali.

Contoh 4: Menyalin Array dengan Spread (Shallow Copy)

Spread juga bisa dipakai untuk menyalin array tanpa mengubah array asli. Ini penting dalam konsep immutability — prinsip dasar di banyak framework modern seperti React dan Redux. Kamu bisa membaca definisi resmi immutable di glossary MDN.

const original = [1, 2, 3, 4, 5]; // Menyalin array menggunakan spread operator const copy = [...original]; // Mengubah array copy copy.push(6); console.log(original); // output: [1, 2, 3, 4, 5] — TIDAK BERUBAH! console.log(copy); // output: [1, 2, 3, 4, 5, 6] console.log(original === copy); // output: false — ini objek berbeda!

Penjelasan:

• [...original] membuat array baru yang berisi elemen-elemen yang sama, tapi merupakan objek terpisah di memori. Ini disebut shallow copy.
• Mengubah copy tidak akan mempengaruhi original, karena keduanya referensi berbeda ke objek array yang berbeda.
• Operator === pada objek membandingkan referensi, bukan isi. Karena copy adalah array baru, hasilnya false.

Shallow Copy vs Deep Copy

Peringatan penting: spread hanya melakukan shallow copy. Jika array berisi object atau array bersarang, referensi ke object tersebut tetap sama. Untuk deep copy, gunakan structuredClone() atau JSON.parse(JSON.stringify()):

// Contoh shallow copy vs deep copy const original = [{ name: "Budi" }, { name: "Ani" }]; // Shallow copy dengan spread — object di dalam masih referensi yang sama! const shallowCopy = [...original]; shallowCopy[0].name = "Budi Santoso"; console.log(original[0].name); // "Budi Santoso" — ikut berubah! // Deep copy dengan structuredClone const deepCopy = structuredClone(original); deepCopy[1].name = "Ani Wijaya"; console.log(original[1].name); // "Ani" — TIDAK berubah!

Contoh 5: Spread pada Object (ES2018)

Sejak ES2018, spread juga bisa digunakan pada object untuk menggabungkan atau menyalin properti:

const user = { name: "Budi", age: 25 }; const address = { city: "Jakarta", country: "Indonesia" }; // Menggabungkan dua object const fullProfile = { ...user, ...address }; console.log(fullProfile); // output: { name: 'Budi', age: 25, city: 'Jakarta', country: 'Indonesia' } // Mengoverride properti — properti yang sama akan ditimpa oleh yang terakhir const updatedUser = { ...user, age: 26, email: "budi@email.com" }; console.log(updatedUser); // output: { name: 'Budi', age: 26, email: 'budi@email.com' } // Menyalin object tanpa mengubah yang asli const userCopy = { ...user }; userCopy.age = 30; console.log(user); // output: { name: 'Budi', age: 25 } — tidak berubah console.log(userCopy); // output: { name: 'Budi', age: 30 }

Penjelasan:

• { ...user, ...address } — membentangkan semua properti dari user, lalu menambahkan properti dari address. Hasilnya object gabungan.
• Jika ada properti dengan nama yang sama, yang diletakkan belakangan akan menimpa yang sebelumnya. Ini cara update properti secara immutable tanpa mengubah object asli.
• Ini pola yang sangat umum di React: setState({...prevState, newValue: value}).

Contoh 6: Spread dengan Function Arguments dan Method Array

Spread memungkinkan kamu mengirim array sebagai argumen fungsi tanpa unpack manual satu per satu:

function sum(a, b, c) { return a + b + c; } const angka = [10, 20, 30]; // Tanpa spread — harus akses manual per indeks console.log(sum(angka[0], angka[1], angka[2])); // output: 60 // Dengan spread — otomatis diunpack menjadi 3 argumen console.log(sum(...angka)); // output: 60 // Ini juga bisa dipakai untuk push(), splice(), dan method array lainnya const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; arr1.push(...arr2); console.log(arr1); // output: [1, 2, 3, 4, 5, 6]

Pola ini berguna ketika kamu punya array data yang perlu dikirim ke fungsi yang menerima argumen individual. push() dengan spread juga menjadi cara cepat menggabungkan array langsung tanpa membuat array baru.

Contoh 7: Menambah Elemen di Posisi Tertentu

Kegunaan spread yang sering terlupakan: menambahkan elemen baru di posisi tertentu dalam array tanpa mengubah array asli:

const original = [2, 3, 4]; // Menambah elemen di awal array const withNewFirst = [1, ...original]; console.log(withNewFirst); // output: [1, 2, 3, 4] // Menambah elemen di akhir array (sama dengan push, tapi immutable) const withNewLast = [...original, 5]; console.log(withNewLast); // output: [2, 3, 4, 5] // Menambah elemen di tengah array (posisi index 2) const middle = [...original.slice(0, 2), 99, ...original.slice(2)]; console.log(middle); // output: [2, 3, 99, 4] // Menghapus elemen tertentu secara immutable const removed = original.filter(item => item !== 3); console.log(removed); // output: [2, 4]

Penjelasan kode:

• [1, ...original] — menambah 1 di awal, lalu membentangkan semua elemen original setelahnya.
• [...original.slice(0, 2), 99, ...original.slice(2)] — memecah array menjadi bagian sebelum dan sesudah index 2, lalu menyisipkan 99 di tengah. slice() mengembalikan bagian array tanpa mengubah yang asli.
• filter() mengembalikan array baru berisi elemen yang lolos filter — cara immutable untuk menghapus elemen.

Spread pada String dan NodeList

Spread tidak hanya bekerja pada array dan object, tapi juga pada iterable lain. Contohnya string:

const kata = "Halo"; console.log([...kata]); // output: ['H', 'a', 'l', 'o']

Kamu juga bisa mengubah NodeList dari DOM menjadi array, sehingga method array seperti map() atau filter() bisa dipakai:

// Mengubah NodeList menjadi array const items = [...document.querySelectorAll('.item')]; items.forEach(item => console.log(item.textContent));

Ini pola yang sangat sering dipakai di front-end development sehari-hari.

Kesalahan Umum saat Menggunakan Spread

Beberapa kesalahan yang sering terjadi dan perlu kamu waspadai:

• Melupakan shallow copy: Spread tidak melakukan deep copy. Hati-hati jika array atau object berisi nested object — referensi ke object tersebut tetap sama. Gunakan structuredClone() untuk deep copy.
• Salah posisi spread: [...arr1, arr2] akan membuat array bersarang karena arr2 tidak di-spread. Pastikan pakai ...arr2 juga jika ingin flat array.
• Tidak bisa digunakan standalone: ...[1,2,3] adalah syntax error. Spread harus dalam konteks array literal [...arr], object literal {...obj}, atau function call fn(...arr).
• Performa untuk array sangat besar: Spread membuat array baru yang dialokasikan di memori. Untuk array dengan jutaan elemen, pertimbangkan pendekatan lain seperti iterator atau typed array.

Kapan Harus Pakai Spread Operator JavaScript?

Gunakan spread operator ketika kamu membutuhkan salah satu hal berikut:

• Menggabungkan array atau object tanpa mengubah yang asli (pendekatan immutable — prinsip penting di React, Redux, dan Vue).
• Menyalin array atau object secara cepat tanpa harus menggunakan Object.assign() atau concat().
• Mengirim array sebagai argumen fungsi yang menerima parameter individual — seperti Math.max(), Math.min(), atau fungsi custom kamu sendiri.
• Menambahkan, menghapus, atau mengubah elemen di posisi tertentu dalam array secara immutable.
• Mengkonversi iterable lain (seperti NodeList dari DOM) menjadi array.

Rangkuman

HTML CSS JavaScript basics

tutorial PHP dasar

Dengan memahami spread operator javascript, kamu bisa menulis kode yang lebih modern, readable, dan maintainable. Ini adalah salah satu skill wajib untuk front-end developer di era 2025.

Spread operator adalah fitur ES6 yang powerful, serbaguna, dan sudah menjadi bagian penting dari toolkit setiap developer JavaScript. Berikut poin-poin utama yang perlu diingat:

1. Spread operator (...) membentangkan isi iterable (array, object, string, Map, Set) menjadi elemen-elemen individual.
2. Sangat berguna untuk menggabungkan array tanpa concat() dan menyalin array/object tanpa mutasi.
3. Bisa dipakai dengan Math.max(), Math.min(), dan fungsi variadic lainnya.
4. Juga bekerja pada object untuk menggabungkan, menyalin, atau update properti secara immutable.
5. Ingat: spread hanya shallow copy — berhati-hatilah dengan object bersarang dan gunakan structuredClone() untuk deep copy jika diperlukan.

Spread operator membuktikan bahwa JavaScript modern jauh lebih elegan dibanding versi lamanya. Manfaatkan fitur ini untuk menulis kode yang lebih bersih, lebih mudah dibaca, dan sesuai prinsip pemrograman modern. Untuk referensi resmi lengkap, kamu bisa membaca dokumentasi Spread syntax di MDN Web Docs.

Hal yang sering ditanyakan seputar Spread Operator JavaScript