Cara Menggunakan Rest Parameter di JavaScript
Apa itu Rest Parameter
Rest parameter memunginkan kita mengoper parameter sebanyak yang kita inginkan pada sebuah fungsi.
Rest parameter sekilas terlihat mirip dengan dengan spread operator, namun rest parameter berbeda dan bahkan melakukan hal yang berkebalikan dengan spread operator.
Meski rest parameter dan spread operator menggunakan notasi yang sama, yaitu tiga buah tanda titik “…”, namun penggunaan keduanya berbeda.
Rest parameter digunakan pada saat pendeklarasian fungsi, sedangkan spread operator digunakan pada saat fungsi dipanggil.
Berbeda dengan spread operator yang berfungsi mengesktrak elemen-elemen yang ada di dalam sebuah array, rest parameter berfungsi untuk mengubah kumpulan nilai-nilai yang terpisah menjadi sebuah array.
Cara Menggunakan Rest Parameter di JavaScript
Misalnya kita memiliki sebuah fungsi yang akan menghitung total nilai dari satu kelas, namun setiap kelas memiliki jumlah siswa yang berbeda-beda.
Pada kasus ini kita bisa menggunakan rest parameter sebagai parameter dari fungsi tersebut, seperti berikut:
function nilaiTotal(...nilai){
let total;
nilai.forEach( cur => {
total += cur;
});
return total;
}
let nilasKelasA = nilaiTotal(80, 100, 60, 90, 75, 90, 90, 90, 80);
console.log(nilaiKelasA);
let nilasKelasB = nilaiTotal(90, 90, 70, 80, 90, 85, 70, 90, 90, 80, 90, 60, 70, 70, 60);
console.log(nilaiKelasB);
Pada contoh potongan kode diatas, kita menggunakan rest parameter pada parameter dari fungsi tersebut; yaitu “nilai” yang ditandai dengan penggunaan tiga buah tanda titik pada parameter tersebut.
Dengan menggunakan rest parameter tersebut, kita bisa mengoper sebanyak apapun parameter kepada fungsi tersebut untuk digunakan.
Parameter-parameter tersebut – dari yang sebelumnya berbetuk single value – akan diubah menjadi dalam format array yang berisi nilai-nilai tunggal tersebut.
Sehingga pada saat digunakan di dalam fungsi, rest parameter tersebut adalah sebuah array.
Sebagai contoh, pada potongan kode diatas kita dua kali memanggil fungsi “nilaiTotal” yang menggunakan rest parameter.
Pada pemanggilan pertama, yaitu pada variable “nilaiKelasA” kita mengoper sebanyak 9 parameter.
Sedangkan pada pemanggilan kedua, yaitu pada variable “nilaiKelasB” kita mengoper sebanyak 15 parameter. Kita bisa mengoper dengan jumlah berapapun pada rest parameter.
Perbandingan Kemudahan Penggunaan Rest Parameter dengan Metode Manual
Fitur baru pada rest parameter tersebut yang hadir pada ES6 sangat memudahkan, baik pada contoh kasus diatas maupun kasus-kasus lainnya.
Sebelumnya untuk melakukan tersebut dengan menggunakan ES5, kita harus melakukan hal seperti berikut:
function nilaiTotal() {
var total;
var nilai = Array.prototype.slice.call(arguments);
nilai.forEach( function( cur ) {
total += cur;
});
return total;
}
var nilasKelasA = nilaiTotal(80, 100, 60, 90, 75, 90, 90, 90, 80);
console.log(nilaiKelasA);
var nilasKelasB = nilaiTotal(90, 90, 70, 80, 90, 85, 70, 90, 90, 80, 90, 60, 70, 70, 60);
console.log(nilaiKelasB);
Seperti pada contoh potongan kode diatas, untuk mengatasi masalah sebelumnya dengan menggunakan ES5, kita harus mengambil parameter yang dioper pada fungsi tersebut menggunakan keyword “arguments” agar bisa mengambil semua parameter, bukan melalui parameter secara default.
Kemudian kita juga harus mengubah sebuah parameter tersebut secara manual ke dalam sebuah array.
Hal ini akan jauh lebih sulit jika kita juga mengiper argument lain. Misalnya seperti pada fungsi diatas, kita juga akan mengoper parameter lain yaitu nama kelas sehingga nanti fungsi tersebut akan mengembalikan string nama kelas dengan total nilai dari siswa pada kelas tersebut.
Untuk mengatasi masalah tersebut, pada ES5 kita harus melakukannya seperti berikut:
function nilaiTotal(namaKelas) {
var total;
var nilai = Array.prototype.slice.call(arguments, 1);
nilai.forEach( function( cur ) {
total += cur;
});
return “Total nilai dari kelas ” + namaKelas + “ adalah ” total;
}
var nilasKelasA1 = nilaiTotal(“A1”, 80, 100, 60, 90, 75, 90, 90, 90, 80);
console.log(nilaiKelasA1);
Seperti pada potogan kode diatas, pada saat memanggil atau menggunakan fungsi tersebut kita bukan hanya mengoper nilai, tapi juga mengoper nama kelas sebagai parameter pertama.
Masalahnya adalah parameter nama kelas juga merupakan bagian dari parameter, sehingga pada saat menggunakan keyword “arguments” di dalam fungsi tersebut untuk menggunakan nilai, parameter nama kelas juga menjadi ikut bagian dari dalam argument tersebut.
Untuk mengatasi hal ini, pada method slice yang akan mengubah semua parameter yang dioper pada fungsi tersebut, kita harus menambahkan parameter angkat satu “1” agar parameter pertama tidak dimasukkan ke dalam array yang berisi kumpulan nilai dari siswa di kelas tersebut.
Hal ini memang bisa diatas dengan ES5, namun pada ES6 dengan menggunakan rest parameter kita bisa melakukannya dengan cara yang lebih simple, ringkas dan mudah dibaca.
Kita bisa menambahkan parameter nama kelas sebagai parameter pertama, kemudian menggunakan rest parameter sebagai parameter yang akan menampung berapapun jumlah nilai seperti berikut:
function nilaiTotal(namaKelas, ...nilai){
let total;
nilai.forEach( cur => {
total += cur;
});
return `Total nilai dari kelas ${namaKelas} adalah ${total}`;
}
let nilasKelasA1 = nilaiTotal(“A1”, 80, 100, 60, 90, 75, 90, 90, 90, 80);
console.log(nilaiKelasA1);
Dengan menggunakan rest parameter kita bisa melakukannya dengan cara yang lebih mudah, namun bukan masalah jika kamu lebih suka melakukannya dengan cara sebelumnya pada ES5.
