How to Convert Set to Array in JavaScript

by

An array is one of the most used data structures in JavaScript. Of course, we can use an array instead of the set, but sometimes we need to have a unique collection in our data structure, and that’s where Set comes into mind. To convert an array to a set in JavaScript, use the set() constructor. There are many ways to convert a set into an array in JavaScript.

Set to Array in JavaScript

To convert set to array in JavaScript:

  1. Use Array.from() method
  2. Using forEach() method
  3. Using spread operator

Using Array.from() method

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, which is converted from a Set to an array.

Using JavaScript forEach() method

To convert Set to 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. The forEach() is a built-in JavaScript function that calls a function for each element in an 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 by using loops like for loop, while loop, do-while loop but the forEach() method is quite easy.

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 very easy to compare to others. But it creates a shallow copy. If our set is nested, avoid using the spread operator. But our set is not nested so it’s a very useful approach.

That’s it for this tutorial.

See also

How to Convert an Array to Map in Javascript

How to Convert JavaScript String to Array

How to Convert JavaScript CSV to Array

How to Convert JavaScript Array to CSV

 

Leave a Comment