How to Convert JavaScript Array to Set: A Set is a collection of well-defined objects or elements. In Sets each value should occur one time only i.e a Set contains unique elements. Sets allows to iterate through the items inside the set in insertion order. Now here value quality is checked because all the values inside Set should be unique.
Table of Contents
Convert JavaScript Array to Set
To convert Javascript array to set in Javascript, there are certain methods we use to do so. Some of the methods we have described below.
- Using set() constructor.
- Using Array.prototype.map() function
- Using Array.prototype.forEach() function
- using Array.prototype.reduce() function
Using set() constructor
If we want to convert array into a set in JS, we can create set() constructor. The set() constructor accepts an iterable parameter and returns the set. The Array object implements the iterable protocol, so it’s a valid parameter for set() constructor.
[javascript]let doraemon_show = ["Nobita", "Shizuka", "Doraemon", "Gian", "Suneo"]
let doraemon_show_set = new Set(doraemon_show)
console.log(doraemon_show_set)[/javascript]
Output
Set { 'Nobita', 'Shizuka', 'Doraemon', 'Gian', 'Suneo' }
Explanation
Here we are using “New” Keyword to create a new set and then we have pass the JavaScript array as its argument. After that created a variable “doraemon_show_set” which will contain the set elements. Then we have printed the output using console.log() function.
Using Array.prototype.map() function
We can also use array.map() function to change a normal array into a set. Array.map() function is a built-in Modern Javascript function that creates a new array and calls the provided function once for each element in an array.
[javascript]let doraemon_show = ["Nobita", "Shizuka", "Doraemon", "Gian", "Suneo"]
let doraemon_show_set = new Set()
doraemon_show.map(x => doraemon_show_set.add(x))
console.log(doraemon_show_set)[/javascript]
Output
Set { 'Nobita', 'Shizuka', 'Doraemon', 'Gian', 'Suneo' }
Explanation
Here in this, we are mapping set to every value of Array and adding an element one by one to the Set, and we will get the Set filled by elements of Array. After that we can print the resulting Set using console.log() function.
Using Array.prototype.forEach() function
This function Array.forEach() is almost same as previous one, it adds the values of array to the set one by one till Set is filled by all array elements.
[javascript]let doraemon_show = ["Nobita", "Shizuka", "Doraemon", "Gian", "Suneo"]
let doraemon_show_set = new Set()
doraemon_show.forEach(x => doraemon_show_set.add(x))
console.log(doraemon_show_set)[/javascript]
Output
Set { 'Nobita', 'Shizuka', 'Doraemon', 'Gian', 'Suneo' }
Explanation
Here in this, Array.forEach() function adds an element one by one to the Set, and we will get the Set filled by elements of Array. After that we can print the resulting Set using console.log() function.
Using Array.prototype.reduce() function
The Array.reduce() is a built-in function of Javascript. It executes reduce() function for each value of the array and returns a single value.
[javascript]let doraemon_show = ["Nobita", "Shizuka", "Doraemon", "Gian", "Suneo"]
let doraemon_show_set = new Set()
doraemon_show.reduce((_,x) => doraemon_show_set.add(x), null)
console.log(doraemon_show_set)[/javascript]
Output
Set { 'Nobita', 'Shizuka', 'Doraemon', 'Gian', 'Suneo' }
Conclusion
So these are some methods through which you can convert Javascript array to set, also understanding these methods are not so difficult. Kindly note if you are planning to depth in Reactjs, make sure to learn map() funtion of Javascript very clearly. Hope you like this tutorial, if you have any question or doubt feel free to comment below, our team will assist you shortly.