How can we incorporate a destructured Array into a Set using a functional approach?

Question

How can we incorporate a destructured Array into a Set using a functional approach?

I have a scenario where I want to add the contents of multiple arrays into a Set. For example:

Arrays to combine :

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

The desired Set should look like this: [55, 44, 65, 22, 11, 33]

This is what I attempted:

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, all three arrays are added as sets instead of individual numbers.

So, I tried another approach which can be found here: 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);

Unfortunately, only the first elements of each array get added to the Set.

Why does only the first element of each array get added in my second approach?
Is there a way to add all elements of an array into a set without iterating through every single element and adding them individually (like using for, map, or forEach)? (If possible)

NOTE: In my actual situation, I do not receive all the arrays at once.

javascript arrays ecmascript-6 set destructuring

Answer 1

Answer №1

As previously mentioned, one possible solution is to create a new Set by combining two arrays like this:

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

To see this in action, you can test it out here.

However, please note that only the first elements of the array are added to the Set.

According to the documentation, the .add method accepts only 1 argument. So when using ...[8, 5], it will add the first value and ignore the rest.

In my specific situation, I do not receive all the arrays at once.

In such cases, you can convert the set back to an array and then create a new Set like so:

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

You can verify this approach on this link

Alternatively, you can use the spread operator as shown below:

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

An updated Fiddle is available for testing, although personally, I find Array.from to be more readable. The choice between the two methods is up to personal preference.

Answer 2

As previously mentioned, one possible solution is to create a new Set by combining two arrays like this:

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

To see this in action, you can test it out here.

However, please note that only the first elements of the array are added to the Set.

According to the documentation, the .add method accepts only 1 argument. So when using ...[8, 5], it will add the first value and ignore the rest.

In my specific situation, I do not receive all the arrays at once.

In such cases, you can convert the set back to an array and then create a new Set like so:

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

You can verify this approach on this link

Alternatively, you can use the spread operator as shown below:

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

An updated Fiddle is available for testing, although personally, I find Array.from to be more readable. The choice between the two methods is up to personal preference.

Answer 3

Answer №2

If you prefer not to create a new collection, using a loop is a perfectly valid approach:

var arrayOne = [55, 44, 65];
var arrayTwo = [22, 11, 33]
var setObject = new Set();
var addToSet = setObject.add.bind(setObject);
arrayOne.forEach(addToSet);
arrayTwo.forEach(addToSet);
[8, 5].forEach(addToSet);
console.log(Array.from(setObject)); // The console on StackOverflow can't print sets at the moment
// [55, 44, 65, 22, 11, 33, 8, 5]

Answer 4

If you prefer not to create a new collection, using a loop is a perfectly valid approach:

var arrayOne = [55, 44, 65];
var arrayTwo = [22, 11, 33]
var setObject = new Set();
var addToSet = setObject.add.bind(setObject);
arrayOne.forEach(addToSet);
arrayTwo.forEach(addToSet);
[8, 5].forEach(addToSet);
console.log(Array.from(setObject)); // The console on StackOverflow can't print sets at the moment
// [55, 44, 65, 22, 11, 33, 8, 5]

Answer 5

Answer №3

According to @Rajesh's suggestion, combining the arrays into one and then creating a set from it seems like a viable solution.

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

UPDATE: To include another array later on, you can create a new set for each additional array and then concatenate them together as demonstrated here.

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

Alternatively,

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

Here is the complete 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);
});

Output:

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

Answer 6

According to @Rajesh's suggestion, combining the arrays into one and then creating a set from it seems like a viable solution.

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

UPDATE: To include another array later on, you can create a new set for each additional array and then concatenate them together as demonstrated here.

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

Alternatively,

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

Here is the complete 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);
});

Output:

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

How can we incorporate a destructured Array into a Set using a functional approach?

Answer №1

Answer №2

Answer №3

Similar questions

methods for extracting json data from the dom with the help of vue js

What are some ways to capture and save the window width prior to launching my Nuxt application?

Exploring the world of Django static files, along with the magic of CSS and

Real-time Updating of ChartJS Charts in Rails Using AJAX

What is the most efficient method for managing components with dynamic templates and their corresponding data in Vue.js?

Issue with debugging capabilities in Javascript on VSCode has been detected

expose-loader fails to reveal changes made to the object being exposed

What differences exist between these two methods of writing arrays?

How to send form data from Angular to Node.js using $http

Tips on avoiding scrolling when toggling the mobile navigation bar:

Transforming an event object from the browser's native form to a jQuery event object

Utilize the existing code to prevent multiple form submissions

What is the process for transforming Unicode symbols into their corresponding emojis?

Using JavaScript within SQL allows developers to combine the power

Issue with Ant Design form validation

Modifying a single element within a class with Jquery

Is there a way to conceal a component using Twitter Bootstrap while having the ability to reveal it with the help of

Display a solo element from an array sent from Express to an EJS template, along with a "next" button for cycling through each item individually

Limiting an array and dividing it into multiple arrays in PHP can be achieved by using array_chunk()

React: Struggling to render values within {} of a multidimensional object