Pada tahun 2015, operator spread pertama kali diperkenalkan di JavaScript versi ES6. Dilambangkan dengan (…), kita dapat menggunakan operator spread untuk memperluas suatu iterable (array, string, map, set) ke dalam semua elemennya, atau membongkar semua elemen iterable sekaligus.
Mari kita lihat contoh berikut untuk contoh:
Dengan menggunakan array arrdi atas, mari kita asumsikan kita ingin membuat array baru dengan beberapa elemen di awal array. Tanpa operator spread, kita dapat melakukan ini dengan mengulang array, atau lebih buruk lagi, melakukannya secara manual. Misalnya, berikut ini menunjukkan bagaimana kami dapat mencapai hal ini tanpa operator spread:
Hasil dari badNewArr yang dibuat di atas akan terlihat seperti: [1,2,7,8,9]. Dengan menggunakan operator spread, kita dapat melakukannya dengan cara yang lebih efisien seperti di bawah ini:
Hasil array baru yang dibuat di atas akan terlihat seperti: [1,2,7,8,9]. Jika Anda perhatikan, hasil badNewArrdannewArradalah sama. Di newArr,apa yang dilakukan operator spread adalah mengambil semua elemen individual dari array arrdan menempatkan masing-masing salah satu elemen di newArr. Secara diagramatis, operator spread beroperasi sebagai berikut:
Mari kita lihat bagaimana sebuah array akan terlihat jika kita tidak menggunakan operator spread. Perhatikan potongan kode berikut:
Menjalankan perintah console.log(newArr)akan menghasilkan output: [1, 2, [7, 8, 9]]. Hal ini terjadi karena kita menyertakan array arr. Namun dengan operator spread, ini seperti kita mengeluarkan setiap elemen dari array dan menambahkannya secara manual ke array newArr.
Selain array, mari kita perhatikan contoh berikut:
Di sini kita telah membuat sebuah objek bernama restoran dengan kunci mainMenudengan nilai array.
Misalkan kita ingin membuat satu item makanan lagi di array mainMenu. Kami ingin susunan baru ditambah satu elemen makanan lagi. Jadi, kita dapat menggunakan operator spread untuk melakukan operasi sebagai berikut:
Saat Anda menjalankan perintah console.log(newMenu), outputnya adalah 4 elemen asli ditambah ikan sebagai berikut:
[“Nasi”, “Kacang”, “Kentang Goreng”, “Ayam”, “Ikan”]
Penting untuk dicatat bahwa kita sedang membuat array yang benar-benar baru newMenu. Kami tidak memanipulasi array restaurant.mainMenu.
Anda mungkin telah memperhatikan bahwa operator spread mirip dengan destrukturisasi, yang membantu kita mengeluarkan elemen dari array. Perbedaan besarnya di sini adalah operator spread mengambil semua elemen dari array dan tidak membuat variabel baru. Oleh karena itu, operator spread hanya dapat digunakan di tempat dimana kita dapat menulis nilai yang dipisahkan dengan koma.
Selain itu, operator spread juga dapat digunakan dalam fungsi. Mari kita lihat contoh berikut:
Saat fungsi test dipanggil, string a1 ditetapkan terlebih dahulu ke parameter a. Selanjutnya, arr disebarkan. Ada dua item dalam larik sehinggab2 danc3 akan ditetapkan ke parameter b dan c. Ketika penyebaran selesai, nilai string yang tersisa d4 diberikan ke parameter d fungsi.
Sebagai kesimpulan, penting untuk dicatat bahwa browser yang tidak mendukung JavaScript versi ES6 mungkin tidak mendukung penggunaan sintaksis penyebaran. Kunjungi Operator penyebaran JavaScript untuk mempelajari lebih lanjut.
