What is this demonstrating the spread syntax can do?

Question

Looking at this MDN page on spread syntax it uses this example:

function myFunction(v, w, x, y, z) {
  console.log(v);
  console.log(w);
  console.log(x);
  console.log(y);
  console.log(z);
}

const args = [0, 1];
myFunction(-1, ...args, 2, ...[3]);

I know ...args copies the value of the items of args (0, 1).

Looking at ...[3] I see if I log it it resolves to 3. But what is ...[3]? How does it work, what is the purpose of it and why does it resolve to 3?

do you understand `...args`? It's the same idea, just with a literal array of `[3]` — Nick Parsons, Jul 31 '20 at 14:37
Please don't upload [images of code](https://meta.stackoverflow.com/a/285557/3082296). They can't be copied to create an answer, they aren't searchable for future readers and they are harder to read than text. Please post the actual code **as text** to create a [mcve]. — adiga, Jul 31 '20 at 14:37
@NickParsons I understand `...args` copies the value of the items of `args` (0, 1). I still don't know what `...[3]` means! — tonitone117, Jul 31 '20 at 14:40
The syntax is `...` followed by a source, an object of some kind. `[3]` is an object of some kind, specifically an array, so `...[3]` means "all the contents of `[3]`. — Pointy, Jul 31 '20 at 14:41
@tonitone117 `[3]` is an array literal. In `...args`, they are creating a variable and then spreading. Is it more readable if it had more than one item in the array: `myFunction(-1, ...args, ...[3, 4])` becomes `myFunction(-1, 0, 1, 3, 4)` — adiga, Jul 31 '20 at 14:42
@Pointy Duh! Got ya! Because that's literally what `args` was. `...args` could've been written `...[0, 1]`! — tonitone117, Jul 31 '20 at 14:45

score 2 · Accepted Answer · answered Jul 31 '20 at 14:42

2

the same:

let myArray = [3]

console.log( ...myArray ) // ->  3
console.log( ...[3] ) // ->  3

answered Jul 31 '20 at 14:42

Mister Jojo

20,093
6
21
40

crosen9999 · Answer 2 · 2020-07-31T14:49:49.727

Regarding ...[3], this is just illustrating the fact that using the spread operator on an array with a single element will simply return the one element from that array.

The difference between [3] and ...[3] is that the first example is an array with 3 as the only element, and the second example is just the primitive value 3.

Look at it this way:

console.log(...[3,4,5])  // logs 3,4,5
console.log(...[3,4]) // logs 3,4
console.log(...[3]) // logs 3
console.log(3) // logs 3 (same as previous example)
console.log([3]) // logs an array with 3 as the only element

score 2 · Answer 3 · answered Jul 31 '20 at 14:50

...[3] is the number 3 stored in an array and spreaded right away. The array operator [] takes precedence over the spread-operator. In this specific case you could basically say 3 instead of packing it and unpacking it afterwards.

There are some cases where you might want to add a single element to your array based on a condition. For example:

const myArray = [
  1,
  2,
  ...(shallAddThree ? [3] : []),
  4
];

Depending on shallAddThree being truthy, it might add the three to the array. Spreading an empty array doesn't add anything to the array. So the two branches could result in:

if shallAddThree is truthy

const myArray = [
  1,
  2,
  ...[3], // no `()` necessary
  4
];

if shallAddThree is falsy

const myArray = [
  1,
  2,
  ...[], // no `()` necessary
  4
];

What is this demonstrating the spread syntax can do?

3 Answers3