Memahami Konsep …args pada Fungsi JavaScript untuk Pemula

Pertama kali saya belajar bahasa pemrograman javascript saya dihadapkan dengan script seperti ini :

function checkArgs(...arguments){
    for(var i = 0; i < arguments.length; ++i)
        arguments[i] = arguments[i];
    arguments[3] = 4;
    for(var key in arguments)
        alert(key);
};
checkArgs(1, 2, 3);

Saya kemudian bertanya dari mana datangnya properties ‘arguments’. Mungkin teman-teman yang baru belajar javascript juga menemukan hal yang sama.

Apa itu ..args pada Javascript

Setelah dicari-cari dari berbagai literatur akhirnya saya menemukan jawabannya. Arguments adalah nilai yang ditampung dari seluruh argumen yang dikirimkan kepada sebuah fungsi. Pada Javascript ES5 penulisan argument adalah ‘arguments’ sedangkan pada javascript ES6 penulisan disingkat menjadi ‘args’.

Didalam coding terkadang kita sering lupa atau tidak teliti.

function sum (a,b){ //menerima 2 argumen
   return a+b; 
}
// kita malah mengirim 3 argumen
sum(2,3,4); // error

Pada contoh fungsi diatas kita tidak diperkenankan mengirim argumen melebihi jumlah data yang kita daftarkan, dalam bahasa lain fungsi diatas bersifat statis. Padahal dalam kasus lain kita ingin argumen yang kita kirimkan ke fungsi dapat bersifat dinamis. Nah pada contoh kasus tersebutlah kita bisa memanfaatkan ‘args’. Untuk lebih jelas mari kita buat codingannya.

explorer 1

function list (...args){
   return console.log(...args); // MU Juventus Arsenal
  }
list("MU","Juventus","Arsenal");

explorer 2

function list (...args){
   return console.log(args); // [MU, Juventus, Arsenal] tanpa ...
  }
list("MU","Juventus","Arsenal");

explorer 3

function sum (a,...args){
// kita bisa membaca argument dengan metode array
  return a+args[0]+args[1]; // 9
}
// 2 adalah argument yang deftar pada a, 
// sedangkan 3,4 terdaftar ke 'args'
sum(2,3,4);

explorer 4

expoler 5

//explorer dengan fungsi curry.
var add = function (name){
 return function (...args){
  return function (...args){
    console.log(name,...args,...args);
        } 
     }
}
var add2 = add("Rony")("MU")("England");
console.log(add2); // Rony MU England

explorer 6

var a = function (){
 console.log("fungsi a");
};
var b = function (){
 console.log("fungsi b");
};
var c = function (){
 console.log("fungsi c");
};
function tampung (...args){
 console.log(args)
}
tampung(a(),b(),c());
// fungsi a
// fungsi b
// fungsi c

Kesimpulan :

1. Fungsi ‘…args’ adalah nilai yang ditampung dari argument yang dikirim ke sebuah fungsi meski argumen tersebut tidak didaftarkan.
2. Fungsi ‘…args’ adalah solusi jika kita ingin membuat fungsi yang inputan datanya bersifat dinamis.
3. Dengan menambahkan fungsi ‘…args’ kita bisa mencegah error.
4. Meskipun ‘…args’ bisa dibaca dengan metode array, namun ‘…args’ sebanarnya bukanlah array. [penting!]

Artikel ini adalah catatan belajar penulis, sekaligus semoga artikel ini dapat bermanfaat bagi teman-teman. Kita tidak mesti nunggu expert dulu, baru kemudian berbagi. Saya yakin sekecil apapun yang kita bagikan pasti ada yang membutuhkan.