JavaScript spread operator over a variable number of arguments?

Question

The JavaScript spread operator can combine arrays like this:

const a = [1,2,3];
const b = [4,5,6];
console.log([...a,...b]);

Can I also use it when the number of arguments is unknown at "compile time"?

In the following example I didn't know how to use the spread operator so I used reduce and concat.

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.reduce((a,b)=>a.concat(b)));

Is this the intended way or can I use the spread operator in some way with a variable number of arguments like those?

Answer 1

If you don't know how many things you're spreading, you can't write the code to spread them with .... It's just like + in that way: You can add three things together (a + b + c), but if you don't know how many you're adding, you can't directly write the code for it.

Your reduce could use spread rather than concat (but keep reading):

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.reduce((a,b)=>[...a, ...b]));

But both that and concat are inefficient (which may or may not matter) because they create a new array and re-copy the elements that have already been copied for every input. If efficiency is a constraint, just use a simple loop:

const arrays = [[1,2,3],[4,5,6]];
const result = [];
for (const entry of arrays) {
  result.push(...entry);
}
console.log(result);

Or if you really like doing it in a single expression, you can shoehorn it into a reduce (because basically any array operation can be shoehorned into a reduce):

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.reduce((acc,entry) => {
  acc.push(...entry);
  return acc;
}, []));

I'm with Brian Terlson, though: For me, reduce is overused.

In closing, for this specific issue, we're getting flat now:

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.flat());

Answer 2

This is the most concise I can think of:

console.log(...[].concat(...arrays));

The innermost spread will give all the arrays as arguments to concat without the need for reduce.

Another way is using the ES2019 Array.prototype.flat:

console.log(...arrays.flat())

EDIT: I just noticed you're outputting it as an array. Change to console.log([].concat(...arrays)) and console.log(arrays.flat()) for that :)

Answer 3

You can use array.flat instead, if you don't pass the parameter depth is considered as 1 and you can manually define depth or you can use Infinity to cover any depths

const arrays = [[1,2,3],[4,5,6]];
console.log(arrays.flat());