How to set dynamic property keys to an object in JavaScript?

Javascript Web Development Front End Technology

In the following example we are going to learn how to set dynamic property keys to an object in JavaScript.

To add dynamic property keys to an object in JavaScript, there are three possible ways. There are three possible ways to set dynamic property keys to an object. The first possible way is to create a key and assign it to the object, second possible way is to set the dynamic property keys to an object using the define property method and the third possible way is to set the dynamic property keys to an object using ES6 method. We discussed each method with a suitable example.

Example 1

The below program is an example to create a key and assign it to the object.

<!DOCTYPE html>
<html>
<head>
   <title>To set dynamic property keys to an object in JavaScript</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align : center">
   <h3>To set dynamic property keys to an object in JavaScript</h3>
   <p id="dynamic-keys"></p>
   <script>
      let Employee = { name : 'Vinay',
         emp_id : 101
      };
      let key = "Company";
      Employee[key] = 'Tutorials Point';
      document.getElementById("dynamic-keys").innerHTML = 'Employee["name"] : '+ Employee['name'] +'<br/>'+'Employee["emp_id"] : '+Employee['emp_id']+'<br/>'+"Employee[key] : "+Employee[key];
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

The following is an example program to set the dynamic property keys to an object using the define property method.

<!DOCTYPE html>
<html>
<head>
   <title>To set dynamic property keys to an object in JavaScript</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align : center">
   <h3>To set dynamic property keys to an object in JavaScript</h3>
   <p id="dynamic-keys"></p>
   <script>
      let Employee = { name : 'Vinay',
         emp_id : 101
      };
      let key = "Company";
      Employee[key] = 'Tutorials Point';
      let key2 = 'role';
      Object.defineProperty(Employee, key2,{value: 'Software Engineer'})
      document.getElementById("dynamic-keys").innerHTML = 'Employee["name"] : '+ Employee['name'] +'<br/>'+'Employee["emp_id"] : '+Employee['emp_id']+'<br/>'+"Employee[key] : "+Employee[key]+'<br/>'+"Employee[key2] : "+Employee[key2];
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 3

The following is an example program to set the dynamic property keys to an object using ES6 method.

<!DOCTYPE html>
<html>
<head>
   <title>To set dynamic property keys to an object in JavaScript</title>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<ody style="text-align : center">
   <h3>To set dynamic property keys to an object in JavaScript using ES6 Method.</h3>
   <p id="dynamic-keys"></p>
   <script>
      let key1 = "Company";
      let key2 = 'role';
      let Employee = { name : 'Vinay',
         emp_id : 101,
         [key1] : 'Tutorials Point',
         [key2] : 'Software Engineer'
      };
      document.getElementById("dynamic-keys").innerHTML = 'Employee["name"] : '+ Employee['name'] +'<br/>'+'Employee["emp_id"] : '+Employee['emp_id']+'<br/>'+"Employee[key1] : "+Employee[key1]+'<br/>'+"Employee[key2] : "+Employee[key2];
   </script>
</body>
</html>

On executing the above code, the following output is generated.