MDN JS Array.prototype.slice.call example explanation

Question

I'm trying to understand how to read the code below (taken from MDN's article on Array.prototype.slice) to understand what happens when it runs.

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

My understanding is that the return statement gets a reference to the Array.protoype.slice method. This leads to my first question, "if this is a reference to the slice method, why doesn't it need to be invoked, e.g. Array.prototype.slice().call(arguments)?"

Assuming that this is a call to the slice method, and since there is no argument being immediately passed into it, my second question is "is JS 'seeing' the call method chained to slice and then trying to resolve a value to pass to slice from the call(arguments) method?"

If this is the case, is this method chaining and is this how JS performs chaining operations: from left to right and when there is no argument explicity passed to a method, it tries to resolve a value from a subsequent method to return implicitily to the "empty" callee on the left? Thanks.

Pointy · Accepted Answer · 2016-06-23 15:32:05Z

3

Why doesn't it need to be invoked? — because, as you say, it's a reference, and that's all that's desired. The code wants a reference to the function, not a result returned from calling the function.
Is JS 'seeing' the call method chained to slice and then trying to resolve a value to pass to slice from the call(arguments) method? — well I'm not sure what that means. The reference to the .slice() function is used to get access to the .call() method (inherited from the Function prototype). That function (slice.call) is invoked and passed the arguments object as its first parameter. The result is that slice will be invoked as if it were called like arguments.slice() — which is not possible directly, as the .slice() function isn't available that way.

Overall, what the code is doing is "borrowing" the .slice() method from the Array prototype and using it as if the arguments object were an array.

Sometimes you'll see that written like this:

return [].slice.call(arguments);

It's a little shorter, and it does the same thing (at the expense of the creation of an otherwise unused array instance).

answered Jun 23, 2016 at 15:32

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lance-p Over a year ago

Thanks. I wasn't understanding this: > The result is that slice will be invoked as if it were called like arguments.slice() But your explanation helps me better understand what JS is doing here. Thanks to the other responses below, which are also helpful!

Anirudh Modi · Accepted Answer · 2016-06-23 15:50:22Z

call in javascript is a way of invoking a method within the function, which hard binds the context of this within a function to the parameter passed to it..For more detail regarding callgo through the link below

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

If you want to know more about this and why call is being used, I highly recommend you to go through this github repo:

https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch1.md

Secondly, by default every regular function expression in JS has an arguments object, which is an iterable which is nothing but the list of parameters passed to that function.

function foo()
{
console.log(arguments); //1,2
}
foo(1,2)

More about arguments

https://www.google.co.in/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=arguments%20in%20javascript

And if you want to learn JS properly, blindly go through this repo:

https://github.com/getify/You-Dont-Know-JS

gen_Eric · Accepted Answer · 2016-06-23 15:35:28Z

Have a look at the docs for Function.prototype.call():

The call() method calls a function with a given this value and arguments provided individually.

Since .call is a part of Function.prototype, every function has it as a property, including Array.prototype.slice (or [].slice).

According to the docs for Array.prototype.slice:

If begin is undefined, slice begins from index 0. If end is omitted, slice extracts through the end of the sequence (arr.length).

It's getting a reference to the Array.prototype.slice property (function) and running its .call function. The 1st parameter to call is the context (or this value) and any other parameters are passed to the chained method. .slice() doesn't require any parameters and without any it just returns the elements as an array.

So, what's happening is that it's taking arguments - which is not actually an array, just an "array-like" object (with numeric properties and a .length property) - and running .slice() on it like it was an array. This makes it r"convert" arguments into an array.

Collectives™ on Stack Overflow

MDN JS Array.prototype.slice.call example explanation

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related