javascript functions and arguments object, is there a cost involved

Question

It is common place to see code like that around the web and in frameworks:

var args = Array.prototype.slice.call(arguments);

In doing so, you

Answer 1

Here's some q&d testing. Using predefined arguments seems to be the fastest, but it's not always feasible to do this. If the arity of the function is unknown beforehand (so, if a function can or must receive a variable amount of arguments), I think calling Array.prototype.slice once would be the most efficient way, because in that case the performance loss of using the arguments object is the most minimal.

Answer 2

No one's done testing on this in a while, and all the links are dead. Here's some fresh results:

function loop(){
  var res = []
  for(var i = 0, l = arguments.length; i < l; i++){
    res.push(arguments[i])
  }
}

function loop_variable(){
  var res = []
  var args = arguments
  for(var i = 0, l = args.length; i < l; i++){
    res.push(args[i])
  }
  return res
}

function slice(){
    return Array.prototype.slice.call(arguments);
}

function spread(){
    return [...arguments];
}

function do_return(){
    return arguments;
}

function literal_spread(){
    return [arguments[0],arguments[1],arguments[2],arguments[3],arguments[4],arguments[5],arguments[6],arguments[7],arguments[8],arguments[9]];
}

I tested these here: https://jsben.ch/li38F, as do_return(0,1,2,3,4,5,6,7,8,9) and so on. Here are my results on my Ryzen 2700X:

	Firefox 84.0	Chromium 87.0
do_return	98%	100%
loop_variable	81%	96%
spread	54%	36%
loop	80%	96%
literal_spread	100%	99%
slice	77%	87%

Answer 3

The arguments has two problems: one is that it's not a real array. The second one is that it can only include all of the arguments, including the ones that were explicitly declared. So for example:

function f(x, y) {
    // arguments also include x and y
}

This is probably the most common problem, that you want to have the rest of the arguments, without the ones that you already have in x and y, so you would like to have something like that:

var rest = arguments.slice(2);

but you can't because it doesn't have the slice method, so you have to apply the Array.prototype.slice manually.

I must say that I haven't seen converting all of the arguments to a real array just for the sake of performance, only as a convenience to call Array methods. I'd have to do some profiling to know what is actually faster, and it may also depend faster for what, but my guess would be that there's not much of a difference if you don't want to call the Array methods in which case you have no choice but to convert it to a real array or apply the methods manually using call or apply.

The good news is that in new versions of ECMAScript (Harmony?) we'll be able to write just this:

function f(x, y, ...rest) {
   // ...
}

and we'll be able to forget all of those ugly workarounds.

Answer 4

I would argue against the accepted answer.
I edited the tests, see here: http://jsperf.com/arguments-performance/6
I added the test for slice method and a test for memory copy to preallocated array. The latter is multiple times more efficient in my computer.
As You can see, the first two memory copy methods in that performance test page are slow not due to loops, but due to the push call instead.
In conclusion, the slice seems almost the worst method for working with arguments (not counting the push methods since they are even not much shorter in code than the much more efficient preallocation method).
Also it might be of interest, that apply function behaves quite well and does not have much performance hit by itself.

First existing test:

function f1(){
    for(var i = 0, l = arguments.length; i < l; i++){
        res.push(arguments[i])
    }
}

Added tests:

function f3(){
    var len = arguments.length;
    res = new Array(len);
    for (var i = 0; i < len; i++)
         res[i] = arguments[i];
}

function f4(){
    res = Array.prototype.slice.call(arguments);
}

function f5_helper(){
    res = arguments;
}
function f5(){
    f5_helper.apply(null, arguments);
}

function f6_helper(a, b, c, d){
    res = [a, b, c, d];
}
function f6(){
    f6_helper.apply(null, arguments);
}