views:

946

answers:

3

I came across the following code:

var f = function () {
    var args = Array.prototype.slice.call(arguments).splice(1);

    // some more code 
};

Basically, the result in args is an array that is a copy of the arguments without its first element.

But what I can't understand exactly is why f's arguments (which is an object that holds the function's inputted arguments into an array-like object) object is being passed to the slice method and how slice(1) is removing the first element (positioned at index 0).

Can anyone please explain it for me?

P.S. The code is from this partial application function

+7  A: 

<Note>
The actual code from that linked answer is:

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

i.e. "slice", not "splice"
</Note>

First of all, the slice method is often used to make a copy of the array it's called on:

var a = ['a', 'b', 'c'];
var b = a.slice();  // b is now a copy of a
var c = a.slice(1); // c is now ['b', 'c']

So the short answer is that the code is basically emulating:

arguments.slice(1); // discard 1st argument, gimme the rest

However you can't do that directly. The special arguments object (available inside the execution context of all JavaScript functions), although Array-like in that it supports indexing via the [] operator with numeric keys, is not actually an Array; You can't .push onto it, .pop off it, or .slice it, etc.

The way the code accomplishes this is by "tricking" the slice function (which again is not available on the arguments object) to run in the context of arguments, via Function.prototype.call:

Array.prototype.slice // get a reference to the slice method
                      // available on all Arrays, then...
  .call(              // call it, ...
    arguments,        // making "this" point to arguments inside slice, and...
    1                 // pass 1 to slice as the first argument
  )

Array.prototype.slice.call(arguments).splice(1) accomplishes the same thing, but makes an extraneous call to splice(1), which removes elements from the array returned from Array.prototype.slice.call(arguments) starting at index 1 and continuing to the end of the array. splice(1) doesn't work in IE (it's technically missing a 2nd parameter telling it how many items to remove that IE and ECMAScript require).

Crescent Fresh
Sorry for the code difference, but I copied the code I had pasted here http://stackoverflow.com/questions/373157/how-can-i-pass-a-reference-to-a-function-with-parameters from the answer I linked to in this question, but the author changed the script in the meantime. Once again, sorry about that
Andreas Grech
@Andreas: check mah updatez
Crescent Fresh
Great answer! +1
Joseph Silvashy
@Crescent Flesh, I changed the link in my question to point to the original code
Andreas Grech
Crescent Fresh, in the Flesh. @Andreas, yes I saw that. I believe my closing paragraph addresses `splice(1)` too, yes?
Crescent Fresh
yup, indeed you do ;-)
Andreas Grech
...once again heh, sorry about that...about your nick this time hah; I'm just too tired.........
Andreas Grech
Something is bugging me and I have to put it out: `slice()` is supposed to take an argument. It works parameterless in all browsers today that's why I left it in my answer. But technically the last example `Array.prototype.slice.call(arguments)` is suppose to be `Array.prototype.slice.call(arguments, 0)` (i.e. pass 0 as the first argument to the slice function). It essentially defaults to 0 if omitted (again, in all browsers).
Crescent Fresh
+2  A: 
var args = Array.prototype.slice.call(arguments).splice(1);

First takes a copy of arguments(*), then removes all but the first item from it (in a non-standard way), and assigns those items being removed to args.

The extra array being produced, then altered and thrown away is quite redundant. It would be better to say — as the version in the answer you linked to indeed does:

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

Partial function application is also a feature of the function.bind method, being standardised by ECMAScript Fifth Edition. Until browsers have implemented it, you can pick up an a fallback JS-native version from the bottom of this answer.

*: array.slice() is the normal idiom for copying an array, and array.slice(1) for taking the tail. It has it be called explicitly through the Array.prototype because arguments is not an Array, even though it looks just like one, so doesn't have the normal array methods. This is another of JavaScript's weird mistakes.

You quite often see people using the Array.prototype methods on objects that aren't Arrays; the ECMAScript Third Edition standard goes out of its way to say this is OK to do for the arguments array-like, but not that you may also do it on other array-likes that may be host objects, such as NodeList or HTMLCollection. Although you might get away with calling Array.prototype methods on a non-Array in many browsers today, the only place it is actually safe to do so is on arguments.

bobince
A: 

The returned value of a splice is an array of the elements that were removed, but the original array (or array-like object), is truncated at the splice index.

Making a copy with slice preserves the original arguments array, presumably for use later in the function.

In this case the same result can be had with args = [].slice.call(arguments, 1)

function handleArguments(){
 var A= [].slice.call(arguments).splice(1);
 //arguments is unchanged
 var s= 'A='+A+'\narguments.length='+arguments.length;

 var B= [].splice.call(arguments, 1);
 // arguments now contains only the first parameter
 s+= '\n\nB='+B+'\narguments.length='+arguments.length;
 return s;
}

// test
alert(handleArguments(1, 2, 3, 4));

returned value:
//var A= [].slice.call(arguments).splice(1);
A=2,3,4
arguments.length=4

//var B= [].splice.call(arguments, 1);
B=2,3,4
arguments.length=1
kennebec