How to Convert Set to Array in JavaScript

There are the following ways to convert a Set to an Array in JavaScript.

  1. Using the “Array.prototype.from()” method
  2. Using the “Array.prototype.forEach()” method
  3. 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

  1. object: It is an object to convert an array.
  2. mapFn: It is a map function to call on each element.
  3. 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.

Leave a Comment