How To Convert a Set Into An Array In JavaScript – Definitive Guide

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.

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']

Additional Resources

Leave a Comment