How to convert Set to Array in JavaScript?

Table of Contents

How to convert a Set to an Array? – JavaScript

When you remove the duplicate numbers from an array with new Set() method, it turns into a set instead of an array like this

let duplicates = [1,2,3,4,5,6,2];

// remove the duplicates

let noDuplicates = new Set(duplicates);

// output Set {1,2,3,4,5,6

Duplicates may happen by posting/collecting same value from one/different sources, or by concat() arrays.

And you can convert that set to an array again.

Solution 1:

let duplicates = [1,2,3,4,5,6,2];

// remove the duplicates

let noDuplicates = new Set(duplicates);

// output {1,2,3,4,5,6}

let arrayWithNoDuplicates = Array.from(noDuplicates);

// output [1,2,3,4,5,6]

Solution 2:


let duplicates = [1,2,3,4,5,6,2];

// remove the duplicates

let noDuplicates = new Set(duplicates);

// output {1,2,3,4,5,6}

let arrayWithNoDuplicates = [...noDupicates];

// output [1,2,3,4,5,6]

Solution 3:

let duplicates = [1,2,3,4,5,6,2];

let noDuplicates = Array.from(new Set(duplicates))

// output [1,2,3,4,5,6]

Solution 4:

let duplicates = [1,2,3,4,5,6,2];

let noDuplicates = [... new Set(duplicates)];

// output [1,2,3,4,5,6

Apply

let a = [1,2,3,4];
let b = [5,6,2];

let c = a.concat(b);
let d = new Set(c);
let e = Array.from(d);

// or in one line

let f = Array.from(new Set(a.concat(b)));

By using Array.from() method:
This method returns a new Array from an array like object or iterable objects like Map, Set, etc.
Syntax

Array.from(arrayLike object);

Example-1

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Convert Set to Array
    </title>
</head>
 
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <script>
            const set = 
               new Set(['welcome', 'to', 'GFG']);
            Array.from(set);
 
            document.write(Array.from(set));
        </script>
    </center>
</body>
 
</html>

Output

console.log(array) // (11) [1, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12]

Using spread operator:

Using of spread operator can also help us convert Set to array.

Syntax

var variablename = [...value];

Example-2:

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Convert Set to Array
    </title>
</head>
 
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
        <script>
            const set = 
                  new Set(['GFG', 'JS']);
            const array = [...set];
            document.write(array);
        </script>
    </center>
</body>
 
</html>

Output

console.log(array) // (11) [1, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12

Using forEach:
Example-3:

<!DOCTYPE html>
<html>
 
<head>
    <title>
      Convert Set to Array
  </title>
</head>
 
<body>
    <center>
        <h1 style="color:green">
          GeeksforGeeks
      </h1>
 
        <script>
            var gfgSet = new Set();
            var gfgArray = [];
 
            gfgSet.add("Geeks");
            gfgSet.add("for");
            // duplicate item
            gfgSet.add("Geeks");
 
            var someFunction = function(
            val1, val2, setItself) {
                gfgArray.push(val1);
            };
 
            gfgSet.forEach(someFunction);
 
            document.write("Array: " + gfgArray);
        </script>
    </center>
</body>
 
</html>

Output
console.log(array) // (11) [1, 3, 4, 5, 6, 7, 8, 9, 0, 11, 12]

Supported Browsers:

Google Chrome
Firefox
Edge
Opera
Apple Safari

Also Read: How to print exception stack trace in Python?

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Apply

Leave a Reply Cancel reply