Rest Parameter JavaScript: Sintaks dan Contoh Penggunaan

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.

Kebalikan dari sintaks spread, alih-alih "mengeluarkan" elemen dari array, rest parameter memasukkan argumen yang diterima fungsi ke dalam array.

Misalnya, katakanlah kita ingin membuat fungsi yang dapat menjumlahkan angka dalam jumlah yang tidak tentu.

Jika kita membuatnya tanpa rest parameter, ini merepotkan karena jumlah parameter fungsi harus sesuai dengan argumen.

Mari kita lihat contoh berikut.

const sum = (a, b, c) => a + b + c;

const result1 = sum(1, 2, 3);
console.log(result1); // 6

const result2 = sum(1, 2, 3, 5);
console.log(result2); // 6

Fungsi sum hanya bisa menerima tiga argumen, lebih dari itu sisanya tidak akan dianggap atau tidak masuk ke dalam badan fungsi.

Mari kita gunakan sintaks rest parameter agar fungsi sum dapat menerima argumen dalam jumlah yang tidak tentu.

const sum = (...args) => args.reduce((prev, curr) => prev + curr);

const result1 = sum(1, 2, 3);
console.log(result1); // 6

const result2 = sum(1, 2, 3, 4);
console.log(result2); // 10

const result3 = sum(1, 2, 3, 4, 5, 6);
console.log(result3); // 21

Mari kita pelajari lebih lanjut mulai dari sintaks hingga contoh penggunaannya agar kita bisa menggunakannya dalam kondisi yang tepat.

1. Sintaks
2. Contoh
   1. Menggunakan Rest Parameter
   2. Menggunakan Rest Parameter dengan Parameter Biasa
   3. Membuat Fungsi Penjumlahan dengan Rest Parameter

Sintaks

function fn(...args) {
  // ....
}

...args adalah sintaks rest parameter, kita dapat menggunakan nama apa pun sesuai keinginan.

Kita bisa menggunakan rest parameter di berbagai jenis fungsi.

Contoh

Menggunakan Rest Parameter

Mari kita buat contoh sederhana penggunaannnya dan melihat isinya di dalam badan fungsi.

Contoh berikut memanggil fungsi myFn dengan argumen empat argumen.

Karena fungsi tersebut menggunakan rest parameter, semua nilai atau argumen yang kita kirim saat memanggil fungsi dimasukkan ke dalam array.

Itu artinya ketika kita ingin mengolah nilai tersebut di dalam badan fungsi, kita harus memperlakukannya seperti array normal.

const myFn = (...args) => {
  console.log(args);
};

myFn(1, 2, 3, 4);
// output: [ 1, 2, 3, 4 ]

Meskipun kita hanya mengirim satu argumen, nilai tersebut akan tetap dimasukkan ke dalam array.

Kalau tidak ada nilai yang dikirim maka menjadi array kosong.

Mari kita buktikan.

const myFn = (...args) => {
  console.log(args);
};

myFn(1);
// output: [ 1 ]

myFn();
// output: []

Menggunakan Rest Parameter dengan Parameter Biasa

Kita juga bisa menggabungkannya dengan parameter biasa.

Tapi perlu diperhatikan, rest parameter harus selalu menjadi parameter terakhir dan tidak boleh lebih dari satu.

Contoh berikut menggunakan parameter biasa a dan b, diikuti ...args.

Parameter a akan mengambil argumen pertama (1), b argumen kedua (2) dan rest parameter ...args mengambil sisanya.

const myFn = (a, b, ...args) => {
  console.log(a);
  console.log(b);
  console.log(args);
};

myFn(1, 2, 3, 4, 5, 6);
/* output:
1
2
[ 3, 4, 5, 6 ]
*/

Rest parameter harus selalu menjadi parameter terakhir dalam sebuah fungsi, tidak boleh menjadi yang pertama atau ditengah, harus diakhir.

Mari kita buktikan.

const myFn = (...args, a, b) => {
  console.log(a);
  console.log(b);
  console.log(args);
};

myFn(1, 2, 3, 4, 5, 6);
// SyntaxError: Rest parameter must be last formal parameter

Fungsi tidak boleh memiliki lebih dari satu rest parameter karena yang berikutnya dianggap sebagai parameter biasa, oleh karena itu mengembalikan pesan kesalahan yang sama.

Mari kita buktikan.

const myFn = (a,  b, ...args1, ...args2) => {
  console.log(a);
  console.log(b);
  console.log(args1);
  console.log(args2);
};

myFn(1, 2, 3, 4, 5, 6);
// SyntaxError: Rest parameter must be last formal parameter

Membuat Fungsi Penjumlahan dengan Rest Parameter

Mari kita buat fungsi penjumlahan dengan jumlah nilai (argumen) yang tidak tentu. Kita akan mengolah nilai rest parameter di dalam badan fungsi.

Ingat, kita harus memperlakukan rest parameter seperti array karena semua nilai yang dikirim akan dimasukkan ke dalam array.

Di sini kita menggunakan method array reduce untuk menjumlahkan semua nilai yang dikirim

const sum = (...rest) => {
  return rest.reduce((prev, curr) => prev + curr);
};

const result1 = sum(1, 2, 3, 4, 5);
console.log(result1); // 15

const result2 = sum(5, 5, 5, 5, 5);
console.log(result2); // 25

const result3 = sum(20, 10, 50, 30);
console.log(result3); // 110