Print set element in javascript

Question

I am trying to print the set element through innerHTML, but I am not getting the desired result. While I tried with document.write(),it is printing but I want to use only innerHTML.

Here is my source code:

  <div id="demo"> </div>  
  <script type="text/javascript">
     var i, item;
     var setObj1 = new Set();
     for(i=0;i<5;i++)
     setObj1.add(i);

     for (item of setObj1.values())
     //document.write(item+",");
     document.getElementById('demo').innerHTML="The set value is: "+ item;         
  </script>

Output: 4

Desire output: 0 1 2 3 4

Please suggest me how to use innerHTML to print the output.I have tried console log and document.write(), they are working.

Answer 1

You can also achieve it by converting to an array using the spread operator and then joining, if you're looking for a one liner:

// Establishing a set 
let mySet = new Set(['a', 'b', 'c']);

// Printing the set, space delimited 
console.log(new Array(...mySet).join(' '));

Answer 2

if you want to avoid traditional looping you could also use Array#from

const set = new Set(1,2,3)

console.log(
  Array.from(set.values())
)

also works better for non-browser targets like node where the output of Set is shortened