Javascript Set allows you to store multiple unique items in a single object.
You can convert a Set into an Array in JavaScript using Array.from(set) statement.
Basic Example
const set = new Set(["owl", "parrot", "dove"]);
console.log("Set looks like:");
console.log(set);
console.log("Array looks like:");
console.log(Array.from(set));
Output
Set looks like:
{'owl', 'parrot', 'dove'}
Array looks like:
['owl', 'parrot', 'dove']
This tutorial teaches you the different methods available to convert a Set into an Array in JavaScript and when it is appropriate to use each method.
Table of Contents
Convert a Set Into An Array Using Array From() method
The Array.from() static method allows you to create a new array instance from an array-like object.
This is the most commonly used method.
Use this method to convert a Set
into an Array
and apply a map()
function to each element in the array.
Code
The following code demonstrates how to convert a Set
into an Array
using the Array.from()
method.
const set = new Set(["owl", "parrot", "dove"]);
console.log("Set looks like:");
console.log(set);
console.log("Array looks like:");
console.log(Array.from(set));
Output
The Set
is converted into an Array
.
Set looks like:
{'owl', 'parrot', 'dove'}
Array looks like:
['owl', 'parrot', 'dove']
Example with Map Function
The following code demonstrates how to use the Array.from()
static method to convert a Set
into Array
and apply a map()
function to each element in the array.
const set = new Set(["owl", "parrot", "dove"]);
console.log("Set looks like:");
console.log(set);
const strArray = Array.from(set, (element) => element.toUpperCase());
console.log(strArray);
Output
The map()
function is applied to each element in the array, and the output array looks like the one below.
Set looks like:
{'owl', 'parrot', 'dove'}
Array looks like:
[‘OWL’, ‘PARROT’, ‘DOVE’]
You can also use this method to convert a Set
to Array
in Typescript.
Convert a Set Into An Array Using Spread Operator
The spread [...]
operator can also be used to convert a Set
into an Array
.
The spread operator unpacks the String
into an array.
Use this method when you want to convert more than one Set
into a single Array
.
Code
The following code demonstrates how to convert a single Set
into an Array
.
const set = new Set(["owl", "parrot", "dove"]);
console.log("Set looks like:");
console.log(set);
const arr = [...set];
console.log("Array looks like:");
console.log(arr);
Output
Set looks like:
{'owl', 'parrot', 'dove'}
Array looks like:
['owl', 'parrot', 'dove']
Convert Multiple Sets into an Array
The following code demonstrates how the spread [...]
operator converts multiple Sets
into a single Array
in JavaScript.
Code
const set = new Set(["owl", "parrot", "dove"]);
const set2 = new Set(["Love Birds"]);
console.log("Set looks like:");
console.log(set);
console.log(set2);
const arr = [...set, ...set2];
console.log("Array looks like:");
console.log(arr);
Output
Set looks like:
{'owl', 'parrot', 'dove'}
{'Love Birds'}
Array looks like:
['owl', 'parrot', 'dove', 'Love Birds']
Convert a Set Into An Array Using For Each Method
The forEach() method executes a function once for each element in the array-like elements.
Use the forEach()
method over the set to iterate over the elements in the Set
and push each element into an Array
.
This method is most verbose and not a commonly used method. Use this method when you want to perform any operations on each element before adding it to an array.
Code
The following code demonstrates how to use the forEach to convert a Set
into an Array
in JavaScript.
const set = new Set(["owl", "parrot", "dove"]);
console.log("Set looks like:");
console.log(set);
const arr = [];
set.forEach(value => {
arr.push(value);
});
console.log("Array looks like:");
console.log(arr);
Output
The Set is converted into an Array using the forEach()
method.
Set looks like:
{'owl', 'parrot', 'dove'}
Array looks like:
['owl', 'parrot', 'dove']