JavaScript modern terus berkembang, terutama sejak hadirnya ES6 yang membawa banyak fitur baru untuk mempermudah pengembangan aplikasi. Salah satu fitur yang sangat powerful adalah spread operator (...) dan rest operator (...). Meskipun keduanya terlihat mirip, fungsi dan penggunaannya berbeda, dan memahami perbedaan ini sangat penting agar kode lebih bersih, efisien, dan mudah dirawat.
Spread operator memungkinkan kita untuk “menyebarkan” elemen array atau properti object ke dalam struktur baru, sedangkan rest operator digunakan untuk mengumpulkan sisa elemen atau parameter menjadi sebuah array. Kedua fitur ini mempermudah pengelolaan data, manipulasi array dan object, serta membuat penulisan kode lebih ringkas.
Dalam artikel ini, kita akan membahas spread dan rest operator secara lengkap mulai dari konsep dasar, penggunaan pada array dan object, hingga best practice. Panduan ini dirancang khusus untuk pemula, tapi tetap relevan untuk developer menengah maupun yang ingin meningkatkan kualitas kode mereka dengan JavaScript modern ES6.
Setelah membaca artikel ini, kamu akan mampu:
- Memahami konsep dasar spread dan rest operator
- Menggunakan spread operator untuk menyalin atau menggabungkan array dan object
- Memanfaatkan rest parameter untuk function secara efektif
- Membedakan penggunaan spread vs rest operator dalam berbagai skenario
- Menerapkan praktik terbaik (best practice) untuk menulis kode JavaScript yang lebih bersih dan efisien
Mari kita mulai perjalanan memahami fitur spread dan rest operator di JavaScript ini langkah demi langkah, agar kamu bisa langsung mempraktikkannya dalam proyek nyata.
Daftar isi
Baca juga: Destructuring Array dan Object di JavaScript
Apa Itu Spread & Rest Operator?
Dalam JavaScript modern, spread operator dan rest operator menggunakan sintaks yang sama, yaitu ..., namun keduanya memiliki fungsi berbeda tergantung konteks penggunaannya. Memahami perbedaan ini adalah langkah penting sebelum mulai menggunakannya dalam kode.
Spread Operator
Spread operator digunakan untuk “menyebarkan” elemen dari array atau properti dari object ke dalam array/object baru atau ke dalam argument function. Dengan kata lain, spread operator memecah struktur data menjadi elemen individual.
Contoh Array:
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // [1, 2, 3, 4, 5]Code language: JavaScript (javascript)Contoh Object:
const user = { name: "Aris", age: 25 };
const newUser = { ...user, country: "Indonesia" };
console.log(newUser); // { name: "Aris", age: 25, country: "Indonesia" }Code language: JavaScript (javascript)Manfaat utama:
- Menyalin array atau object tanpa merubah yang asli (immutable copy)
- Menggabungkan beberapa array atau object dengan mudah
- Menyebarkan data ke function atau struktur baru
Rest Operator
Rest operator digunakan untuk mengumpulkan sisa elemen menjadi sebuah array ketika kita tidak ingin menulis semua elemen satu per satu. Rest biasanya digunakan di parameter function atau destructuring assignment.
Contoh Parameter Function:
function sum(...numbers) {
return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10Code language: JavaScript (javascript)Contoh Destructuring Array:
const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest); // [20, 30, 40]Code language: JavaScript (javascript)Contoh Destructuring Object:
const user = { name: "Aris", age: 25, country: "Indonesia" };
const { name, ...otherProps } = user;
console.log(name); // Aris
console.log(otherProps); // { age: 25, country: "Indonesia" }Code language: JavaScript (javascript)Manfaat utama:
- Mengumpulkan data yang tidak diketahui jumlahnya
- Membuat function lebih fleksibel dengan parameter variabel
- Memudahkan pemisahan property atau elemen dari array/object
Perbedaan Inti Spread vs Rest
| Fitur | Spread Operator | Rest Operator |
|---|---|---|
| Sintaks | ...array / ...object | ...parameter |
| Fungsi | Memecah array/object menjadi elemen individual | Mengumpulkan elemen sisa menjadi array |
| Biasanya digunakan di | Array, object, argument function | Parameter function, destructuring |
| Contoh | [...arr1, ...arr2] | function sum(...nums) |
- Spread operator → menyebarkan elemen/properti untuk membuat array/object baru atau mengirim ke function.
- Rest operator → mengumpulkan sisa elemen/properti menjadi array dalam destructuring atau function.
- Keduanya menggunakan sintaks
..., namun konteks penggunaannya menentukan perannya. - Pemahaman dasar ini akan menjadi fondasi untuk praktik manipulasi data array dan object pada
Spread Operator pada Array
Spread operator pada array memungkinkan kita untuk menyalin, menggabungkan, atau menyisipkan elemen array dengan cara yang sangat ringkas dan efisien. Fitur ini menjadi salah satu peningkatan sintaks ES6 yang wajib dikuasai oleh pengembang JavaScript modern.
Menyalin Array (Shallow Copy)
Sebelum ES6, menyalin array biasanya menggunakan slice() atau loop. Dengan spread operator, proses ini jauh lebih mudah.
const numbers = [1, 2, 3, 4];
const copyNumbers = [...numbers];
console.log(copyNumbers); // [1, 2, 3, 4]
// Mengubah array asli tidak memengaruhi copy
numbers.push(5);
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(copyNumbers); // [1, 2, 3, 4]Code language: JavaScript (javascript)Catatan: Ini hanya shallow copy, artinya jika ada nested array, referensi tetap sama.
const nested = [[1, 2], [3, 4]];
const copyNested = [...nested];
nested[0][0] = 99;
console.log(copyNested); // [[99, 2], [3, 4]]Code language: JavaScript (javascript)Menggabungkan Array
Sebelum ES6, kita menggunakan concat() untuk menggabungkan array. Spread operator membuatnya lebih ringkas.
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]Code language: JavaScript (javascript)Kamu juga bisa menambahkan elemen tambahan di tengah:
const merged = [...arr1, 10, ...arr2];
console.log(merged); // [1, 2, 10, 3, 4]Code language: JavaScript (javascript)Menyisipkan Elemen di Array
Dengan spread operator, menyisipkan elemen di posisi tertentu menjadi mudah:
const fruits = ['Apple', 'Banana', 'Cherry'];
const newFruits = ['Mango', ...fruits, 'Orange'];
console.log(newFruits); // ['Mango', 'Apple', 'Banana', 'Cherry', 'Orange']Code language: JavaScript (javascript)Mengubah Array Tanpa Mutasi
Spread operator sangat berguna untuk membuat immutable array — array baru tanpa mengubah yang asli.
const scores = [80, 90, 70];
const updatedScores = [...scores, 100];
console.log(scores); // [80, 90, 70]
console.log(updatedScores); // [80, 90, 70, 100]Code language: JavaScript (javascript)Ini sangat penting dalam framework modern seperti React, di mana state sebaiknya tidak diubah langsung.
Copy & Merge Array Multi-level
Kamu bisa menggabungkan beberapa array sekaligus:
const a = [1, 2];
const b = [3, 4];
const c = [5, 6];
const mergedAll = [...a, ...b, ...c];
console.log(mergedAll); // [1, 2, 3, 4, 5, 6]Code language: JavaScript (javascript)Contoh Kasus Nyata
Menggabungkan hasil fetch API
const api1 = [1, 2, 3];
const api2 = [4, 5, 6];
const combined = [...api1, ...api2];
console.log(combined); // [1, 2, 3, 4, 5, 6]Code language: JavaScript (javascript)Menambahkan item baru ke state array di React
const [items, setItems] = useState(['a', 'b']);
setItems([...items, 'c']); // menambahkan item baruCode language: JavaScript (javascript)Menyisipkan nilai default ke array
const defaults = [0, 0];
const data = [1, 2];
const result = [...defaults, ...data]; // [0, 0, 1, 2]Code language: JavaScript (javascript)Dengan memahami penggunaan spread operator pada array, kita sudah bisa menyalin, menggabungkan, dan menyisipkan elemen secara efisien.
Spread Operator pada Object
Selain array, spread operator (...) juga sangat berguna saat bekerja dengan object. Fitur ini mempermudah menyalin, menggabungkan, atau memperbarui properti object tanpa mengubah object asli, sehingga lebih aman dan sesuai praktik modern.
Menyalin Object (Shallow Copy)
Spread operator memungkinkan kita membuat salinan object dengan cepat.
const user = { name: "Aris", age: 25 };
const copyUser = { ...user };
console.log(copyUser); // { name: "Aris", age: 25 }
// Mengubah object asli tidak mempengaruhi salinan
user.age = 30;
console.log(user); // { name: "Aris", age: 30 }
console.log(copyUser); // { name: "Aris", age: 25 }Code language: JavaScript (javascript)Catatan: Ini adalah shallow copy, jadi nested object masih berbagi referensi.
const nestedUser = { info: { city: "Jakarta" } };
const copyNested = { ...nestedUser };
nestedUser.info.city = "Bandung";
console.log(copyNested.info.city); // BandungCode language: JavaScript (javascript)Menambahkan Properti Baru
Kamu bisa menambahkan properti baru saat menyalin object:
const user = { name: "Aris", age: 25 };
const updatedUser = { ...user, country: "Indonesia" };
console.log(updatedUser); // { name: "Aris", age: 25, country: "Indonesia" }Code language: JavaScript (javascript)Mengubah Properti Object
Jika properti yang sama ada di object baru, nilainya akan ditimpa.
const user = { name: "Aris", age: 25 };
const modifiedUser = { ...user, age: 30 };
console.log(modifiedUser); // { name: "Aris", age: 30 }Code language: JavaScript (javascript)Menggabungkan Beberapa Object
Sebelum ES6, kita menggunakan Object.assign(). Spread membuatnya lebih singkat dan readable.
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }Code language: JavaScript (javascript)Catatan: Properti dengan nama sama akan ditimpa oleh object yang disebarkan terakhir (obj2).
Menghapus Properti dengan Rest + Spread
Spread operator juga bisa dikombinasikan dengan rest operator untuk menghapus properti tertentu.
const user = { name: "Aris", age: 25, country: "Indonesia" };
const { age, ...rest } = user;
console.log(rest); // { name: "Aris", country: "Indonesia" }Code language: JavaScript (javascript)Contoh Kasus Nyata
Memperbarui state object di React
const [user, setUser] = useState({ name: "Aris", age: 25 });
setUser({ ...user, age: 26 });Code language: JavaScript (javascript)Menggabungkan konfigurasi object
const defaultConfig = { debug: false, verbose: false };
const userConfig = { verbose: true };
const finalConfig = { ...defaultConfig, ...userConfig };
console.log(finalConfig); // { debug: false, verbose: true }Code language: JavaScript (javascript)Menyalin object sebelum manipulasi
const original = { x: 1, y: 2 };
const copy = { ...original };
console.log(original); // { x: 1, y: 2 }
console.log(copy); // { x: 1, y: 2 }
// Mengubah copy tidak mempengaruhi original
copy.y = 5;
console.log(original); // { x: 1, y: 2 }
console.log(copy); // { x: 1, y: 5 }Code language: JavaScript (javascript)Dengan memahami spread operator pada object, kamu bisa menyalin, memperbarui, dan menggabungkan object dengan cara yang lebih efisien, aman, dan sesuai praktik modern JavaScript.
Rest Parameter pada Function
Rest operator (...) sangat berguna saat digunakan pada parameter function. Fitur ini memungkinkan kita menangkap jumlah argumen yang tidak terbatas dalam bentuk array, sehingga fungsi menjadi lebih fleksibel dan bersih.
Konsep Dasar Rest Parameter
Sebelum ES6, menangani jumlah argumen yang tidak tetap biasanya menggunakan arguments object, yang memiliki keterbatasan karena bukan array asli dan tidak bisa menggunakan method array modern seperti map atau filter.
Dengan rest parameter, semua argumen tambahan akan dikumpulkan menjadi array nyata.
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10Code language: JavaScript (javascript)Rest Parameter vs Arguments Object
Arguments object:
function oldSum() {
console.log(arguments);
}
oldSum(1, 2, 3); // [Arguments] { '0': 1, '1': 2, '2': 3 }Code language: JavaScript (javascript)- Bukan array → tidak bisa langsung pakai
.map(),.filter(),.reduce(), dll. - Terbatas hanya untuk fungsi biasa (tidak tersedia di arrow function dengan cara sama).
Rest parameter:
function newSum(...nums) {
return nums.map(n => n * 2);
}
console.log(newSum(1, 2, 3)); // [2, 4, 6]Code language: JavaScript (javascript)- Array asli → bisa langsung pakai method array modern.
- Bisa digunakan di arrow function.
Contoh Rest Parameter di Function
Mengambil Argumen Tidak Terbatas
function greet(message, ...names) {
names.forEach(name => console.log(`${message}, ${name}!`));
}
greet("Hello", "Aris", "Budi", "Citra");
// Hello, Aris!
// Hello, Budi!
// Hello, Citra!Code language: JavaScript (javascript)Menggunakan Rest Parameter untuk Filter
function filterNumbers(min, ...numbers) {
return numbers.filter(n => n > min);
}
console.log(filterNumbers(5, 1, 6, 8, 3, 10)); // [6, 8, 10]Code language: JavaScript (javascript)Menggabungkan Rest dengan Parameter Lain
function introduce(greeting, name, ...hobbies) {
console.log(`${greeting}, my name is ${name}`);
console.log(`Hobbies: ${hobbies.join(", ")}`);
}
introduce("Hi", "Aris", "Coding", "Reading", "Gaming");
// Hi, my name is Aris
// Hobbies: Coding, Reading, GamingCode language: JavaScript (javascript)Best Practice Rest Parameter
- Gunakan hanya sebagai parameter terakhir di function, karena semua argumen setelah parameter lain akan dikumpulkan.
- Cocok untuk fungsi dengan argumen variabel.
- Kombinasikan dengan spread operator untuk memanggil function dengan array.
function sumAll(...nums) {
return nums.reduce((acc, n) => acc + n, 0);
}
const numbers = [1, 2, 3, 4];
console.log(sumAll(...numbers)); // 10Code language: JavaScript (javascript)- Hindari penggunaan rest parameter yang terlalu panjang untuk menjaga readability kode.
Dengan memahami rest parameter pada function, kamu bisa menulis fungsi yang lebih fleksibel, modern, dan efisien, tanpa tergantung pada arguments object lama.
Perbedaan Spread vs Rest Operator
Meskipun spread dan rest operator sama-sama menggunakan sintaks ..., keduanya memiliki fungsi yang berbeda. Memahami perbedaan ini sangat penting agar tidak terjadi kebingungan saat menulis kode JavaScript modern.
Fungsi Utama
| Operator | Fungsi |
|---|---|
Spread (...) | Menyebarkan elemen array atau properti object ke tempat baru. Digunakan untuk memecah struktur data. |
Rest (...) | Mengumpulkan sisa elemen atau parameter menjadi sebuah array. Digunakan untuk menggabungkan data yang tidak diketahui jumlahnya. |
Contoh Perbedaan Kontekstual
Spread Operator
Digunakan untuk menyalin, menggabungkan, atau menyebarkan elemen/properti.
Array:
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]Code language: JavaScript (javascript)Object:
const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 2 }Code language: JavaScript (javascript)Rest Operator
Digunakan untuk mengumpulkan elemen atau parameter yang tersisa.
Function:
function sum(...numbers) {
return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10Code language: JavaScript (javascript)Destructuring Array:
const [first, ...rest] = [10, 20, 30, 40];
console.log(first); // 10
console.log(rest); // [20, 30, 40]Code language: JavaScript (javascript)Destructuring Object:
const user = { name: "Aris", age: 25, country: "Indonesia" };
const { name, ...otherProps } = user;
console.log(name); // Aris
console.log(otherProps); // { age: 25, country: "Indonesia" }Code language: JavaScript (javascript)Ringkasan Perbedaan Spread vs Rest
| Fitur | Spread | Rest |
|---|---|---|
| Sintaks | ...array / ...object | ...parameter |
| Tujuan | Memecah array/object menjadi elemen/properti individual | Mengumpulkan sisa elemen/properti menjadi array |
| Digunakan di | Array, object, argument function | Parameter function, destructuring array/object |
| Contoh penggunaan | [...arr1, ...arr2], { ...obj1, ...obj2 } | function sum(...nums), [first, ...rest] |
| Efek | Membuat salinan atau gabungan baru | Mengumpulkan elemen yang tersisa ke array |
Tips Mudah Mengingatnya
- Spread → Menyebar / Pecah
- Rest → Kumpulkan / Sisa
Jadi, ingat konteks penggunaannya: apakah kita ingin memecah data atau mengumpulkan data? Itu akan menentukan apakah kita menggunakan spread atau rest.
Dengan memahami perbedaan ini, kamu sudah siap untuk menerapkan spread dan rest operator secara tepat dalam berbagai skenario, mulai dari manipulasi array/object hingga function dengan argumen variabel.
Studi Kasus Spread & Rest Operator
Agar lebih memahami penggunaan spread dan rest operator, mari kita lihat beberapa studi kasus nyata. Contoh ini dirancang agar sesuai dengan skenario pengembangan aplikasi modern, baik frontend maupun backend.
Menggabungkan Array dari API
Bayangkan kamu mendapatkan data dari dua API berbeda dan ingin menggabungkannya menjadi satu array.
const api1Data = ["Apple", "Banana"];
const api2Data = ["Cherry", "Mango"];
const allFruits = [...api1Data, ...api2Data];
console.log(allFruits); // ["Apple", "Banana", "Cherry", "Mango"]Code language: JavaScript (javascript)Manfaat:
- Tidak merusak array asli
- Sintaks lebih singkat dibanding concat()
Menyalin Object State di React
Dalam React, state harus immutable. Spread operator memungkinkan kita menyalin object state sebelum mengubahnya.
const [user, setUser] = useState({ name: "Aris", age: 25 });
// Update age
setUser({ ...user, age: 26 });
console.log(user); // { name: "Aris", age: 25 }Code language: JavaScript (javascript)Manfaat:
- Original state tetap utuh
- Update properti lebih aman
Mengambil Argumen Variabel dengan Rest
Jika sebuah function harus menerima jumlah parameter yang tidak tetap, gunakan rest parameter.
function multiply(multiplier, ...numbers) {
return numbers.map(n => n * multiplier);
}
console.log(multiply(2, 1, 2, 3)); // [2, 4, 6]Code language: JavaScript (javascript)Manfaat:
- Fungsi lebih fleksibel
- Bisa menerima jumlah argumen berapa pun
Menghapus Properti Object dengan Rest + Spread
Kamu ingin menghapus properti tertentu dari object tanpa merubah object asli.
const user = { name: "Aris", age: 25, country: "Indonesia" };
const { age, ...rest } = user;
console.log(rest); // { name: "Aris", country: "Indonesia" }Code language: JavaScript (javascript)Manfaat:
- Praktis untuk mengelola data yang kompleks
- Cocok untuk menghapus field sensitif sebelum dikirim ke API
Menyisipkan Elemen Baru ke Array
Kamu ingin menambahkan item baru di awal atau akhir array.
const numbers = [2, 3, 4];
const newNumbers = [1, ...numbers, 5];
console.log(newNumbers); // [1, 2, 3, 4, 5]Code language: JavaScript (javascript)Manfaat:
- Mudah menambah item tanpa loop
- Mendukung penulisan kode yang lebih clean dan readable
Menggabungkan Konfigurasi Object
Misalnya menggabungkan default config dengan config user.
const defaultConfig = { debug: false, verbose: false };
const userConfig = { verbose: true };
const finalConfig = { ...defaultConfig, ...userConfig };
console.log(finalConfig); // { debug: false, verbose: true }Code language: JavaScript (javascript)Manfaat:
- Sangat membantu pada aplikasi skala besar
- Mudah menimpa properti tertentu tanpa mengubah object asli
Kombinasi Spread & Rest
Kamu bisa menggabungkan keduanya untuk manipulasi data kompleks.
const fruits = ["Apple", "Banana", "Cherry"];
const [first, ...restFruits] = fruits;
const newFruits = ["Mango", ...restFruits, "Orange"];
console.log(newFruits); // ["Mango", "Banana", "Cherry", "Orange"]Code language: JavaScript (javascript)Manfaat:
- Menggabungkan fleksibilitas rest untuk menangkap sisa data
- Menggunakan spread untuk menyusun data baru
Kesimpulan
Spread dan rest operator adalah fitur ES6 JavaScript yang sangat powerful untuk manipulasi array dan object secara modern dan efisien. Spread operator (...) digunakan untuk menyebarkan elemen atau properti, sehingga kita bisa menyalin, menggabungkan, atau menyisipkan data tanpa merusak array atau object asli. Sementara itu, rest operator (...) digunakan untuk mengumpulkan elemen atau parameter yang tersisa menjadi sebuah array, membuat fungsi lebih fleksibel dan mudah diatur.
Dengan memahami dan menguasai kedua operator ini, kamu dapat menulis kode yang lebih bersih, efisien, dan maintainable. Baik untuk proyek kecil maupun aplikasi skala besar, penggunaan spread dan rest operator akan mempermudah manipulasi data, pengelolaan state, penggabungan konfigurasi, serta mempermudah penanganan fungsi dengan jumlah argumen variabel. Menguasai fitur ini adalah langkah penting dalam beralih ke JavaScript modern ES6 yang lebih produktif dan profesional.
