Search code examples
javascriptarraysecmascript-6setdestructuring

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


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.


Solution

  • 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.