There are the following ways to convert a Set to an Array in JavaScript.
- Using the “Array.prototype.from()” method
- Using the “Array.prototype.forEach()” method
- Using the “spread” operator
Method 1: Using Array.prototype.from() function
The Array.from() is a built-in JavaScript static method that creates a new, shallow-copied Array instance from an array-like or iterable object like Set. A Set in JavaScript is a collection of unique values. A Set can contain any value of any data type.
Syntax
Array.from(object, mapFn, thisValue)Arguments
- object: It is an object to convert an array.
- mapFn: It is a map function to call on each element.
- thisValue: It is a value to use as this for the map function.
Example
const ourSet = new Set(["Iron", "Thor", "strange", "captain"]);
const setToArray = Array.from(ourSet);
console.log("Our Set : ", ourSet);
console.log("Set To Array : ", setToArray);Output
Our Set : Set(4) { 'Iron', 'Thor', 'strange', 'captain' }
Set To Array : [ 'Iron', 'Thor', 'strange', 'captain' ]The above example shows how to convert the Set to an array using Array.from() method. Now, we can use all array methods in our new Array, converted from a Set to an array.
Method 2: Using the Array.prototype.forEach() function
To convert Set to an array using the forEach() method, create an empty array first and then iterate the Set elements using the forEach() method and push one element at a time to the empty Array; that way, in that end, you will get a new array.
Syntax
array.forEach(function(currentValue, index, arr), thisValue)Parameters
| function() | It is a function to run for each array element. |
| currentValue | It is a value of the current element. |
| index | It is an index of the current element. |
| arr | It is an array of the current element. |
| thisValue | It is a value passed to the function as this value. |
Example
const ourSet = new Set(["Iron", "Thor", "strange", "captain"]);
const array = [];
ourSet.forEach((value) => {
array.push(value);
})
console.log("Our Set : ", ourSet);
console.log("Set To Array : ", array);Output
Our Set : Set(4) { 'Iron', 'Thor', 'strange', 'captain' }
Set To Array : [ 'Iron', 'Thor', 'strange', 'captain' ]The above example shows how we iterate the set iterator and push the value into our newly created empty Array. Of course, we can iterate arrays using loops like for loop, while loop, and do-while loop, but the forEach() method is relatively easy.
Method 3: Using the spread operator
The Spread Operator iterates each element in the set and returns that element. It creates a shallow copy. It is introduced in JavaScript ES6.
Syntax
[…spread]Example
const ourSet = new Set(["hello", "how", "fine", "good"]);
const array = [...ourSet];
console.log("Our Set : ", ourSet);
console.log("Set To Array : ", array);Output
Our Set : Set(4) { 'hello', 'how', 'fine', 'good' }
Set To Array : [ 'hello', 'how', 'fine', 'good' ]The Spread operator syntax was straightforward to compare to others. But it creates a shallow copy. So if our set is nested, avoid using the spread operator. But our set is not nested, so it’s a very useful approach.
Niva Shah is a Software Engineer with over eight years of experience. She has developed a strong foundation in computer science principles and a passion for problem-solving.