Di artikel ini, kita akan membahas tentang rest parameter dan spread operator di JavaScript.

Rest Parameter

Rest parameter merupakan sintaks yang memungkinkan sebuah fungsi menerima argumen dalam jumlah yang tak terbatas atau dinamis. Semua argumen yang diterima fungsi tersebut akan dimasukkan ke dalam array.

Parameter yang diawali dengan elipsis (...) yang menandakan sebuah rest parameter.

Sintaks:

Keterangan:
  • ...params adalah sintaks rest parameter, kita dapat menggunakan nama apa pun sesuai keinginan. 

Contoh:

Pada contoh di atas, nilai dari parameter params berisi semua nilai argument yang kita berikan pada saat pemanggilan fungsi bilangan.

Rest Parameter Sebagai Parameter Terakhir

Rest parameter juga bisa digunakan saat ada parameter lain pada fungsi yang sama. Dalam hal ini, rest parameter akan mewakili sisa argument yang belum "dipetakan" ke parameter-parameter sebelumnya.

Rest parameter harus selalu menjadi parameter terakhir dalam sebuah fungsi, tidak boleh menjadi yang pertama atau ditengah, dan sebuah fungsi tidak boleh memiliki lebih dari satu rest parameter karena yang berikutnya dianggap sebagai parameter biasa.

Contoh:


Pada contoh di atas:
  • param1 mewakili argumen pertama, yaitu A,
  • param2 mewakili argument kedua, yaitu I,
  • params mewakili sisa argument, yaitu U, E, dan O.

Spread Operator

Spread operator merupakan sintaks yang memecah sebuah array menjadi elemen-elemennya (atau dalam kasus objek, memecah objek menjadi pasangan properti-nilai yang membentuknya).

Sintaks spread operator:


Pastikan sintaks spread berada di dalam kurung siku ([ ... ]) untuk array, atau kurung kurawal untuk objek { ... }.

Spread Operator Dengan Array

Spread operator memecah array menjadi elemen-element individu yang ada di dalamnya.

Contoh:

Pada contoh di atas, saat menggunakan spread operator pada array bilangan, outputnya bukan lagi array, melainkan element-element yang ada di dalam array bilangan.

Spread operator pada array memiliki beberapa kegunaan:
  • membuat array duplikat

Contoh di bawah ini, kita akan menduplikat elemen dari arrayAsli ke arrayDuplikat


Sekarang arrayDuplikat adalah array baru yang memiliki element-element yang sama dengan arrayAsli.

  • menggabungkan array (concatenate)

Kita dapat menggabungkan banyak array sebanyak yang kita mau. 

Contoh di bawah ini, kita akan array1 dan array2 ke array3.


Spread Operator Dengan Objek

Spread operator memecah objek menjadi pasangan properti-nilai yang ada di dalam object.

Spread operator pada array memiliki beberapa kegunaan:
  • menambah beberapa properti sekaligus

Contoh: kita akan menambah beberapa properti pada object mahasiswa di bawah ini.

Untuk menambahkan beberapa properti lainnya, kita bisa melakukan ini:

atau bisa juga lebih singkat dengan menggunakan spread operator seperti ini:


Mari kita lihat hasilnya pada contoh lengkapnya:

Pada contoh di atas, sekarang object mahasiswa memiliki properti alamat dan jurusan yang telah kita tambahkan menggunakan spread operator.
  • menggabungkan objek
Spread operator juga memungkinkan kita untuk menggabungkan dua (atau lebih) objek.

Contoh: kita memiliki dua object yaitu objek1 dan objek2 seperti berikut.


Sekarang kita akan menggabungan objek1 dan objek2 menjadi ke objekGabungan, caranya seperti ini:

Mari kita lihat hasilnya pada contoh lengkapnya:


Pada contoh di atas, kita telah menggabungkan objek1 dan objek2 ke objekGabungan menggunakan spread operator. Kita bisa lihat properti yang dimiliki objekGabungan adalah properti yang dimiliki objek1 dan objek2.

Selesai.

Referensi:
https://kodealgo.com/javascript/spread/
https://kodealgo.com/javascript/rest/