Spread Operator JavaScript: Sintaks dan Contoh Penggunaan
Sintaks spread (...) atau spread operator memungkinkan kita menyebarkan atau mengeluarkan elemen yang ada di dalam array atau properti objek ke tempat dimana nilai tersebut diharapkan.
Selain array dan objek, operator ini juga bisa digunakan untuk "mengeluarkan" karaketer tunggal di dalam string, tapi ini jarang dilakukan.
Jangan sampai tertukar dengan istilah Rest Parameter.
Sintaks spread biasanya disebut Rest Parameter ketika ditulis di dalam parameter fungsi dan menghasilkan array.
Mari kita lihat contoh sederhana.
Misalnya, kita ingin menggabungkan dua buah array menjadi satu, ini bisa dilakukan menggunakan method concat.
Tapi lebih ringkas dan mudah dibaca jika kita menggunakan sintaks spread.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]
Atau menggabungkan dua buah objek.
const obj1 = { nama: 'budi', umur: 20 };
const obj2 = { jenisKelamin: 'pria', pekerjaan: 'web developer' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3);
/* output:
{
nama: 'budi',
umur: 20,
jenisKelamin: 'pria',
pekerjaan: 'web developer'
}
*/
Mari kita pelajari lebih lanjut mulai dari sintaks hingga contoh penggunaannya, agar kita bisa menggunakannya ditempat yang tepat.
Sintaks
Array literal:
[...arr1, ...arr2, ...arrN];
Objek literal:
{...obj1, ...obj2, ...objN};
Pastikan sintaks spread berada di dalam kurung siku ([ ... ]) untuk array, atau kurung kurawal untuk objek { ... }, kecuali rest parameter.
Contoh Penggunaan pada Array
Ketika bekerja dengan data array, operator ini bisa menjadi alternatif untuk beberapa method array seperti push(), slice(), atau concat().
Menyalin Array
Sebelum sintaks spread diperkenalkan pada JavaScript ES6, kita biasanya menyalin array menggunakan method slice(), tapi sekarang jauh lebih mudah.
Berikut contoh menyalin elemen dari array arr1 ke arr2.
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2); // [ 1, 2, 3 ]
Menggabungkan Array
Selain menyalin, operator ini juga bisa digunakan sebagai alternatif method concat() untuk menggabungkan array.
Contoh berikut menggabungkan array arr1, arr2, dan arr3 ke dalam satu array arr4.
Kita dapat menggabungkan banyak array sebanyak yang kita mau.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = [...arr1, ...arr2, ...arr3];
console.log(arr4); // [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Urutan array dapat diatur sesuai keinginan, sehingga kita bisa mendapatkan perilaku yang sama seperti method pop() dan unsfhit().
Contoh Penggunaan pada Objek
Sama halnya seperti array, kita bisa menggunakan sintaks spread untuk menggabungkan, menyalin, atau menyisipkan objek literal.
Menyalin Objek
Sintaks spread bisa menjadi alternatif Object.assign() yang biasa digunakan untuk menyalin objek.
Contoh berikut menyalin objek obj1 ke obj2.
const obj1 = { nama: 'ucup', umur: 20 };
const obj2 = { ...obj1 };
console.log(obj2); // { nama: 'ucup', umur: 20 }
Menggabungkan Objek
Sama halnya seperti array, kita juga bisa menggunakan operator ini untuk menggabungkan dua atau lebih objek.
Contoh berikut menggabungkan objek obj1 dan obj2 menjadi satu objek obj3.
const obj1 = { nama: 'ucup', umur: 20 };
const obj2 = { jenisKelamin: 'pria', pekerjaan: 'web developer' };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3);
/* output:
{
nama: 'ucup',
umur: 20,
jenisKelamin: 'pria',
pekerjaan: 'web developer'
}
*/
Sama seperti array, kita bisa menggabungkan dan mengurutkan objek sesuai keinginan.