What will be the functional approach to add an Array(destructured) into Set

Question

I want to add some array (their contents only) in Set. Like:

My array :

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33];

I want my Set to be : [55, 44, 65, 22, 11, 33]

What I've tried:

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33]
var set = new Set();
set.add(arr1)
set.add(arr2)
set.add([8, 5])
console.log(set);

It adds three array in sets Instead of individual numbers.

So, I also tried doing this: JSFiddle

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33]
var set = new Set();
set.add(...arr1)
set.add(...arr2)
set.add(...[8, 5])
console.log(set);

However, It only adds the first elements of the array into Set.

My question is in my second approach why only first element of array gets added in the Set?
How can I add all the elements of the array into the set without iterating through every one of array elements and adding them to Set (like using for , map or forEach)? (If it is possible)

NOTE: In my actual problem I do not get all the arrays at once.

How about `var set = new Set(arr1.concat(arr2, [8, 5]))`? **[Updated fiddle](https://jsfiddle.net/RajeshDixit/r1ahg072/19/)** — Rajesh, Feb 21 '18 at 05:01
`var set = new Set([...arr1, ...arr2, 8, 5]);` or `var set = new Set([...arr1, ...arr2, ...[8, 5]]);` if you want to clearly define the 3 arrays — Jaromanda X, Feb 21 '18 at 05:03
@JaromandaX In my actual problem I do **not** get all the arrays at once. — BlackBeard, Feb 21 '18 at 05:06
@Rajesh In my actual problem I do **not** get all the arrays at once. — BlackBeard, Feb 21 '18 at 05:07
@Rajesh If I only have one array at one how am I supposed to concat them? — BlackBeard, Feb 21 '18 at 05:10
or ... some monkey patching badness ... `Set.prototype.addMulti = function(...args) { [...args].forEach(x => this.add(x));};` ... then use `set.addMulti(...arr1)` — Jaromanda X, Feb 21 '18 at 05:11
@BlackBeard Just added an answer. Have tried to address how you can add new arrays. Hope it helps! — Rajesh, Feb 21 '18 at 05:11

Rajesh · Accepted Answer · 2018-02-21T05:45:42.613

4

As commented, you can try

var set = new Set(arr1.concat(arr2, [8, 5]))

You can test it here.

However, It only adds the first elements of the array into Set.

If you refer docs, it says, .add takes only 1 argument. So when you do ...[8, 5], it spreads and adds first value and ignores remaining.

In my actual problem I do not get all the arrays at once.

Here, you can convert the set back to array and create new Set:

var set2 = new Set(Array.from(set).concat([8, 5]))

You can check it here

You can also use spread operator like:

var set2 = new Set([...set].concat([8, 5]))

Updated Fiddle to test it, but as a personal preference, I prefer Array.from as its more readable. You can choose any way you like.

edited Feb 21 '18 at 05:45

answered Feb 21 '18 at 05:10

Rajesh

24,354
5
48
79

2

Spread syntax (not "destructuring"!) [only makes sense when having other elements in the array literal](https://stackoverflow.com/a/48865797/1048572), `Array.from(set)` should be preferred over `[...set]` indeed. But we *do* have concatenated values here, so `new Set([...set, 8, 5])` it is. – Bergi Feb 21 '18 at 05:28
Note: `...` isn't, and can't be, an operator, neither when used for spread nor rest. It does things operators cannot do. [Details](https://stackoverflow.com/questions/44934828/is-foo-an-operator-or-syntax/44934830#44934830). – T.J. Crowder Oct 10 '18 at 12:27

beewall · Answer 2 · 2018-02-21T05:37:38.207

2

As @Rajesh said, I believe you could concatenate the arrays into one, and create a set from that.

var set = new Set(arr1.concat(arr2.concat([8, 5])));

EDIT: To add another array afterwards, you could probably then make a new set when you add each one, and concatenate them as seen here.

set = new Set([...set, ...newSet])

Or

set = new Set(Array.from(set).concat(Array.from(newSet)))

So full example:

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33];
var set = new Set(arr1.concat(arr2.concat([8, 5])));
var arr3 = [10, 20];
var newSet = new Set(arr3);
set = new Set(Array.from(set).concat(Array.from(newSet)));
set.forEach(function(element) {
  console.log(element);
});

Outputs:

> 55
> 44
> 65
> 22
> 11
> 33
> 8
> 5
> 10
> 20

edited Feb 21 '18 at 05:37

answered Feb 21 '18 at 05:05

beewall

131
1
10

In my actual problem I do **not** get all the arrays at once. – BlackBeard Feb 21 '18 at 05:06
@BlackBeard you could probably then make a new set when you add each one, and concatenate them as seen [here](https://stackoverflow.com/a/32000937/8115456). – beewall Feb 21 '18 at 05:10
@BlackBeard If you don't get all the arrays at first, you cannot immediately create your set from them. If you need to do that, there's now way around imperatively adding the items later. – Bergi Feb 21 '18 at 05:11
@PorygonZRocks Thank you for crediting but as you may have read, this is a partial answer. OP has clarified all arrays are not there at the start. This makes suggested approach appropriate for comments and not answer – Rajesh Feb 21 '18 at 05:13
@Rajesh OP had not yet clarified that when I posted, or at least not when I started writing. – beewall Feb 21 '18 at 05:16
Updated to explain adding more arrays afterwards. – beewall Feb 21 '18 at 05:36

score 2 · Answer 3 · answered Feb 21 '18 at 05:29

If you do not wish to create a new set, there is nothing wrong about a loop:

var arr1 = [55, 44, 65];
var arr2 = [22, 11, 33]
var set = new Set();
var setAdd = set.add.bind(set);
arr1.forEach(setAdd);
arr2.forEach(setAdd);
[8, 5].forEach(setAdd);
console.log(Array.from(set)); // StackOverflow snippet console can't print sets yet
// [55, 44, 65, 22, 11, 33, 8, 5]

What will be the functional approach to add an Array(destructured) into Set

3 Answers3