How does the second parameter of array.push in JavaScript work?

Question

I'm currently studying how Array.prototype.push() works on MDN web docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

On this page, the generalized syntax is expressed as

arr.push(element1[, ...[, elementN]])

, but what is the purpose of the second parameter (elementN)?

This page shows an example that adds up different kinds of sports, like

var sports = ['soccer', 'baseball'];
var total = sports.push('football', 'swimming');

console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
console.log(total);  // 4

, but what would be the first and second parameter if you wanted to do the following?

var teamSports = ['soccer', 'baseball', 'hockey', 'American football'];
var individualSports = ['weight lifting', 'track & field', 'boxing', 'wrestling']

// prepare an empty array
var allSports = []; 

// add all of the team sports 
allSports.push(???????)

// add all of the individual sports
allSports.push(????????)

// all the sports added to the array
console.log(allSports); // ['soccer', 'baseball', 'hockey', 'American football', 'weight lifting', 'track & field', 'boxing', 'wrestling']

[ADDITIONAL BACKGROUND BELOW (AFTER GETTING SOME ANSWERS AND COMMENTS)]

I thank those who answered or commented on my post. The main goal of my post was to figure out the meaning of [, elementN]] part, not "copying array items into another array".

My example

allSports.push(???????)

indeed involves "array items into another array", but I was simply trying to find out the general rule of push parameters by obtaining more examples.

On the MDN web docs page whose link I provided, the examples shown had just two parameters, like

var sports = ['soccer', 'baseball'];
var total = sports.push('football', 'swimming');

console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
console.log(total);  // 4

or

var vegetables = ['parsnip', 'potato'];
var moreVegs = ['celery', 'beetroot'];

// Merge the second array into the first one
// Equivalent to vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);

console.log(vegetables); // ['parsnip', 'potato', 'celery', 'beetroot']

As both of those examples had two parameters, I just assumed that push receives two parameters (which turned out to be a wrong presumption by a hindsight talk), and this is why my question was mainly about "how the 'second parameter' [, elementN] works". If there had been a few more examples like

var sports = ['soccer', 'baseball'];
var total = sports.push('football', 'swimming');

console.log(sports); // ['soccer', 'baseball', 'football', 'swimming']
console.log(total);  // 4

total = sports.push('weight lifting', 'track & field', 'boxing', 'wrestling')
console.log(sports); // ['soccer', 'baseball', 'football', 'swimming', 'weight lifting', 'track & field', 'boxing', 'wrestling']
console.log(total); // 8

, I wouldn't have assumed that push requires two parameters and [, elementN] is its second parameter, and I would have understood that push can take as many parameters as you want it to.

Another point to make is that I didn't know that

...

was also a part of code that is called spread operator. I just thought that you guys were 'omitting' some things by that expression. That also led to my misinterpretation.

`elementN` isn't the *second* parameter, it's the *last* - you can add as many elements as you want. For example `allSports.push(...individualSports)` — jonrsharpe, Jun 05 '19 at 13:37
Possible duplicate of [Copy array items into another array](https://stackoverflow.com/questions/4156101/copy-array-items-into-another-array) — Ivar, Jun 05 '19 at 13:38
@jonrsharpe Thank you for your comment. I added some more background info on my original post. — Sean2014, Jun 06 '19 at 06:13
@Ivar Thank you for your comment. I added some more background info on my original post. — Sean2014, Jun 06 '19 at 06:14

score 3 · Accepted Answer · answered Jun 05 '19 at 13:38

3

You can use spread operator.

allSports.push(...teamSports,...individualSports);

Working snippet

var teamSports = ['soccer', 'baseball', 'hockey', 'American football'];
var individualSports = ['weight lifting', 'track & field', 'boxing', 'wrestling']
var allSports = []; 
allSports.push(...teamSports,...individualSports);
console.log(allSports)

answered Jun 05 '19 at 13:38

Maheer Ali

35,834
5
42
73

Thank you for your explanation. So allSports.push(...teamSports) is equivalent to allSports.push('soccer', 'baseball', 'hockey', 'American football'), right? – Sean2014 Jun 06 '19 at 06:15
@ShinichiTakagi Yes absolutely. – Maheer Ali Jun 07 '19 at 11:32

score 1 · Answer 2 · edited Jun 05 '19 at 13:40

The Array.push() accepts multiple parameters therefore you should use the spread operator when you want to merge arrays.

Like so:

var teamSports = ['soccer', 'baseball', 'hockey', 'American football'];
var individualSports = ['weight lifting', 'track & field', 'boxing', 'wrestling']

// prepare an empty array
var allSports = [];

// add all of the team sports 
allSports.push(...teamSports)

// add all of the individual sports
allSports.push(...individualSports)

// all the sports added to the array
console.log(allSports);

How does the second parameter of array.push in JavaScript work?

2 Answers2

Working snippet