What's the difference between a regular push and an Array.prototype.push.apply

Question

I don't quite understand the difference between the following two lines of code. In my code, the line with "apply" works the way I want it to, and the line with just regular push doesn't.

So what is really going on when both of these are executed:

//this one does not work the way i want it to
$scope.items.push(result.data.stuff)

//this one works!
Array.prototype.push.apply($scope.items, result.data.stuff);

Edit: sorry for confusion, I fixed it so that it has the "push" method in there

Answer 1

New 1. That pushes the array onto items.

$scope.items = [1, 2];
result.data.stuff = [3, 4];
$scope.items.push(result.data.stuff);
$scope.items[0] === 1;
$scope.items[1] === 2;
$scope.items[2][0] === 3;
$scope.items[2][1] === 4;

Old 1. Drops the existing reference that was in $scope.items.

$scope.items = [1, 2];
result.data.stuff = [3, 4];
$scope.items = result.data.stuff;
$scope.items[0] === 3;
$scope.items[1] === 4;

2. Pushes all the items from result.data.stuff into $scope.items, keeping the existing items.

$scope.items = [1, 2];
result.data.stuff = [3, 4];
Array.prototype.push.apply($scope.items, result.data.stuff);
$scope.items[0] === 1;
$scope.items[1] === 2;
$scope.items[2] === 3;
$scope.items[3] === 4;

Answer 2

Array.prototype.push() is a method that adds one or more elements to the end of the array and returns the new length of the array. Array.prototype.push.apply() takes the original array and an array which contains elements to add to the original array.

Example for Array.prototype.push():

var numbers = [1, 5, 2, 8];
numbers.push(3, 4, 6, 7);
console.log(numbers); // [1, 5, 2, 8, 3, 4, 6, 7]

Example for Array.prototype.push() with nested arrays:

var foods = [['apples', 'pears']];
foods.push(['lettuce', 'celery']);
console.log(foods); // [['apples', 'pears'], ['lettuce', 'celery']]

Example for Array.prototype.push.apply():

var grades = [90, 88, 83, 85];
var more_grades = [79, 84, 81, 90];
Array.prototype.push.apply(grades, more_grades);
console.log(grades); // [90, 88, 83, 85, 79, 84, 81, 90]

Example for Array.prototype.push.apply() with nested arrays:

var sports = [['running', 'cycling']];
var other_sports = [['football', 'basketball']];
Array.prototype.push.apply(sports, other_sports);
console.log(sports);
// [['running', 'cycling'], ['football', 'basketball']]

References:

push

apply

Answer 3

push() will add on one index for every argument you pass in. It does not care what it is adding to the array. What every you tell to add it will add it to the end of the array.

When you use apply(), it will take the array that you have supplied as the second argument and convert it to multiple arguments. MDN explains it well, but it basically turns it into

yourArray.push(argument[0],argument[1],argument[2],argument[3]);

Answer 4

see:MDN:Function.prototype.apply();

Please note the note on this page:

Note: While the syntax of this function is almost identical to that of call(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object). All the items within the argsArray(second parameter) will be used for Array.prototype.push in order.It is the same to :

$scope.items.push.apply($scope.items, result.data.stuff);

Because $scope.items.push === Array.prototype.push and apply() accepts an array-like parameter but Function.prototype.call() accepts an arguments list;

Briefly speaking, apply will translate array-like parameter into pieces for that function.

Answer 5

I think $scope.items = result.data.stuff not equvivalent to Array.prototype.push.apply($scope.items, result.data.stuff);

because the first reallocates the array (clears the old elements)

try this:

$scope.items.push(result.data.stuff[0], result.data.stuff[1], ...);

or

$scope.items.push.apply($scope.items, result.data.stuff);

The above on equals to call Array.prototype.push.apply because $scope.items is an array (we think it)

there's an other joiner function:

$scope.items = $scope.items.concat(result.data.stuff);