SPREAD operator in array destructuring

Question

In the below example, unmapped array items must be mapped to rest parameter in the left hand side, but for some reason the output is different,

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", "Earth", ...planets, "Saturn"];

console.log(first); //Output: Mercury
console.log(second); //Output: Earth

Now for the below, expected output is,

console.log(rest); //Output: ["Venus", "Mars", "Pluto", "Saturn"]

But the actual output is,

console.log(rest); //Output: "Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn", "Saturn"

Source:https://www.freecodecamp.org/news/array-destructuring-in-es6-30e398f21d10/

Whats happening here?

That's now how spread syntax and rest syntax works,

Code Maniac
– Code Maniac

2020-04-05 11:47:19 +00:00
Commented Apr 5, 2020 at 11:47 — Code Maniac
– Code Maniac, Commented Apr 5, 2020 at 11:47
Does this answer your question? Spread Syntax ES6

user13198697
– user13198697

2020-04-05 12:02:58 +00:00
Commented Apr 5, 2020 at 12:02 — user13198697
– user13198697, Commented Apr 5, 2020 at 12:02

Nick Parsons · Accepted Answer · 2020-04-05 11:53:03Z

2

When you spread planet into your your second array, you're putting all the elemtns from the planets array into the second array, so:

["Mercury", "Earth", ...planets, "Saturn"];

... evaluates to:

["Mercury", "Earth", "Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn", "Saturn"];

you then destructure the first and second elements from this array giving you "Mercury" and "Earth". You then use the rest pattern ...rest to retrieve the remaining elements (ie elements from index 2 and onwards) and store them in the array named rest. Thus, your rest array contains all the elements from the array above, excluding the first and second elements:

["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn", "Saturn"]

To do get your expected output, you can destucture the first array, by ignoring the first two elements:

const [,,...rest] = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
console.log(rest);

edited Apr 5, 2020 at 11:53

answered Apr 5, 2020 at 11:45

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Parsons Over a year ago

@Nag I see, no worries

User863 · Accepted Answer · 2020-04-05 11:48:03Z

1

You can use Set()

The Set object lets you store unique values

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = new Set(["Mercury", "Earth", ...planets, "Saturn"]);

console.log(first);
console.log(second);

console.log(rest);

answered Apr 5, 2020 at 11:48

User863

20.1k3 gold badges20 silver badges45 bronze badges

Comments

Code Maniac · Accepted Answer · 2020-04-05 11:54:06Z

1

You can spread selectively. When you spread ...planets it copies all the values from planets array to the array you're creating.

You can simply use slice before spreading.

var planets = ["Mercury", "Earth", "Venus", "Mars", "Pluto", "Saturn"];
var [first, second, ...rest] = ["Mercury", "Earth", ...planets.slice(2, planets.length - 1), "Saturn"];

console.log(first);
console.log(second);
console.log(rest)

edited Apr 5, 2020 at 11:54

answered Apr 5, 2020 at 11:48

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

2 Comments

User863 Over a year ago

FYI. Saturn appears twice

Code Maniac Over a year ago

@User863 we can avoid that just simply using second argument of slice

Collectives™ on Stack Overflow

SPREAD operator in array destructuring

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related