How to invert an object in JavaScript?

Javascript Web Development Front End Technology

Invert means to print the value in reverse order. In a technical word, we can say that suppose we have taken an object of the array. The object takes the value in key-value pairs and prints the value in value-key pairs.

The _.invert() function belongs to the underscore.js a javascript library that provides versatile functions.

This is used to copy an object where the object key is converted into value and the object is converted into the key. This means the [key, value] of the object is reversed.

Syntax

Following is the syntax of the _.invert() function −

_.invert(object)

Object − Object is the key-value pairs of an array.
Return − it returns the [key, value] of an object in reverse order [value,key].

Example: 1

In the following example we are creating an object named obj, passing the obj var in the _.invert() function, and returning the value in value−key pairs.

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var obj = {
         Company: "TurorialsPoint",
         Address: "Hyderabad",
         Contact: "+917654980321",
         Email: "xyz123@gmail.com",
      };
      document.write(JSON.stringify(_.invert(obj)));
   </script>
</body>
</html>

Example 2

In the following example, we are passing an object named obj to the _.invert() function and converting it into the string to display the return data on the page.

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var obj = {
         num1: "91",
         num2: "82",
         num3: "52",
         num4: "19",
      };
      var number = JSON.stringify(_.invert(obj));
      document.write(number);
   </script>
</body>
</html>

Example 3

Let us see another example of the _.invert() function −

<!DOCTYPE html>
<html>
<head>
   <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
   <script type="text/javascript">
      var detail = JSON.stringify(
         _.invert({ name: "JP ANNA", age: 324, salary: 220000 })
      );
      document.write(detail);
   </script>
</body>
</html>

Example 4: Using the arrow(=>) function

In this example, we are going to discuss the usage of arrow function. In this case, we will use the => arrow function to reverse the key/value pair of an object.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
   <title>Invert an object</title>
   <div id="invert"></div>
</head>
<body>
   <script type="text/javascript">
      let obj = {
         name: "Alice",
         age: 21,
         role: "Full stack developer",
      };
      let invertObj = (obj) =>
         Object.fromEntries(Object.entries(obj).map(([key, value]) => [value, key]));
         document.getElementById("invert").innerHTML = JSON.stringify(
         invertObj(obj)
      );
   </script>
</body>
</html>

Example 5: Using the reverse() method

In this example, we are going to invert an object in JavaScript using the reverse() method. This method is used to reverse the key/value pair of an object.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <scripttype="text/javascript"src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
   <title>Invert an object</title>
   <div id="invert"></div>
</head>
<body>
   <script type="text/javascript">
      let obj = {
         name: "Alice",
         age: 21,
         role: "Full stack developer",
      };
      function invertObj(obj) {
         let invert_obj = {};
         reverse_obj = Object.keys(obj).reverse();
         reverse_obj.forEach(function (x) {
            invert_obj[x] = obj[x];
         });
         return invert_obj;
      }
      rev = invertObj(obj);
      document.getElementById("invert").innerHTML = JSON.stringify(rev);
   </script>
</body>
</html>