Convert set to object - JavaScript?

Javascript Web Development Front End Technology

The task we are going to perform in this article, is “Convert set to object”. Before we jump into the article, let’s have quick view on the sets and objects in JavaScript.

A collection of distinctive values makes up a JavaScript Set. In a Set, a value can only appear once. Any value of any data type can be stored in a set.

An object in JavaScript is a separate entity having properties and a type. Consider comparing it to a cup. A cup is an item with characteristics. A cup has a design, weight, color, material, and other characteristics. In a similar manner, JavaScript objects can have properties that specify their attributes.

Let’s dive into the article to learn more about converting set to object in JavaScript. To convert the set to object, use the Object.assign() in JavaScript.

Object.assign() in JavaScript

Using one or more source objects as sources, the Object.assign() method copies all enumerable own properties to a target object. It gives back the altered target object.

Syntax

Following is the syntax for Object.assign()

Object.assign(target, ...sources)

Let’s consider the following examples to understand more about converting set to object.

Example

In the following example, we are using Array.form as a mapping function to convert values in a set to objects, and then we use Object.assign() with spread syntax to merge the array of objects into a single result.

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      const uom = new Set(['BMW', 'BENZ', 'AUDI', 'DUCATI']);
      const res = Object.assign(...Array.from(uom, v => ({[v]:''})));
      document.getElementById("tutorial").innerHTML=JSON.stringify(res);
   </script>
</body>
</html>

When the script gets executed, it will generate an output consisting of an object printed on the webpage that was caused by the event that was triggered when the user executed the script.

Example

Considering the following example, where we are using Array.reduce to get the elements from the set and send them into an object.

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      const tutorial = new Set(['RC', 'RX100', 'DUKE', 'VESPA']);
      const getObjectFromSet = (set) => {
         return [...set].reduce((x, y) => {x[y] = ""; return x; },{});
      }
      document.getElementById("tutorial").innerHTML=JSON.stringify(getObjectFromSet(tutorial));
   </script>
</body>
</html>

On running the above script, the output window will pop up, triggering the event and displaying the object on the webpage that was obtained from the set used in the above script.

Example

Let’s consider the other example where we are using Object.fromEntries, which takes all the key-value pairs from a set and returns them in the form of an object.

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      const tutorial = new Set(['Avatar', 'RRR', 'Bheem', 'Dheera']);
      const getObjectFromSet = (set) => {
         return Object.fromEntries(Array.from(set, (a) => [a, ""]));
      }
      document.getElementById("tutorial").innerHTML=JSON.stringify(getObjectFromSet(tutorial));
   </script>
</body>
</html>

When the script gets executed, it will generate an output consisting of an object printed on the webpage, which was caused by the conversion of the set when the event got triggered.