.slice.call vs .push in javascript

Question

One of my friends uses [].slice.call() to fill an array with matched elements.

I wonder how this works. I just know the Array.prototype.push to fill an array.

Also I have seen there is a difference in both techniques to fill an array.

So my questions are:

• How does Array.prototype.slice help to fill an array?
• What are the roles of Array.prototype.slice and Array.prototype.push to make objects and arrays?

Fiddle

var arr=[];
var arr=[].slice.call($('[id^=name]'));
//arr.push($('[id^=name]'))
console.log(arr)

Answer 1

The .slice() method of arrays returns a shallow copy of a portion of an array. It's written as a method on the Array prototype, so the array it operates on is the array in whose context it's invoked. Normally that'd be something like this:

var newArray = oldArray.slice(2, 4);

When you call the .slice() method with .call(), you can control the value of this explicitly. In your friend's code, he's passing a jQuery object as the this value. Because there are no other parameters, .slice() returns a shallow copy of the jQuery object in its entirety, as a new array. (Like some other similar methods, .slice() will work on anything that looks like an array: basically, anything that has a .length property and numerically-indexed properties of interest. A jQuery object fits that description.)

However, since jQuery already has a built-in method to return a plain array of all matched elements, your friend should not bother doing that anymore:

var plainArray = $('[id^=name]').get();

That does exactly the same thing. Using .slice() isn't wrong, but it's kind-of pointless.

Answer 2

How about $('[id^=name]').get()?

The [].slice.call method leverages the array-like length and numeric key properties of jQuery objects to re-use the intentionally generic methods of Array.prototype. The method Array.prototype.slice is documented by the standard to return a new Array object by performing a specific algorithm that accesses numeric-keyed properties in sequence of the this object - regardless of its type - assigning the values to sequential elements of the new Array.

I wouldn't use either approach, because jQuery has get(), which is documented to return an array of the elements matched. Why use a more obscure or less direct approach?