How to convert Set to Array in JavaScript?

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?

Leave a Reply

Your email address will not be published.