- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set dynamic property keys to an object in JavaScript?
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.
2K+ Views
