Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set dynamic property keys to an object in JavaScript?
Setting dynamic property keys allows you to create object properties with names that are determined at runtime. JavaScript provides three main approaches to accomplish this.
Method 1: Bracket Notation
The simplest way is using bracket notation to assign a value to a dynamically named property:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Property Keys - Bracket Notation</title>
</head>
<body>
<h3>Setting Dynamic Property Keys using Bracket Notation</h3>
<p id="result1"></p>
<script>
let Employee = {
name: 'Vinay',
emp_id: 101
};
let key = "Company";
Employee[key] = 'Tutorials Point';
document.getElementById("result1").innerHTML =
'Employee.name: ' + Employee.name + '<br/>' +
'Employee.emp_id: ' + Employee.emp_id + '<br/>' +
'Employee[key]: ' + Employee[key];
</script>
</body>
</html>
Employee.name: Vinay Employee.emp_id: 101 Employee[key]: Tutorials Point
Method 2: Object.defineProperty()
This method provides more control over property attributes like writability and enumerability:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Property Keys - defineProperty</title>
</head>
<body>
<h3>Setting Dynamic Property Keys using Object.defineProperty()</h3>
<p id="result2"></p>
<script>
let Employee = {
name: 'Vinay',
emp_id: 101
};
let key1 = "Company";
let key2 = 'role';
Employee[key1] = 'Tutorials Point';
Object.defineProperty(Employee, key2, {
value: 'Software Engineer',
writable: true,
enumerable: true
});
document.getElementById("result2").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>
Employee.name: Vinay Employee.emp_id: 101 Employee[key1]: Tutorials Point Employee[key2]: Software Engineer
Method 3: ES6 Computed Property Names
ES6 allows dynamic property names directly in object literal syntax using square brackets:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Property Keys - ES6 Method</title>
</head>
<body>
<h3>Setting Dynamic Property Keys using ES6 Computed Properties</h3>
<p id="result3"></p>
<script>
let key1 = "Company";
let key2 = 'role';
let Employee = {
name: 'Vinay',
emp_id: 101,
[key1]: 'Tutorials Point',
[key2]: 'Software Engineer'
};
document.getElementById("result3").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>
Employee.name: Vinay Employee.emp_id: 101 Employee[key1]: Tutorials Point Employee[key2]: Software Engineer
Comparison
| Method | When to Use | Advantages |
|---|---|---|
| Bracket Notation | Adding properties after object creation | Simple, flexible |
| Object.defineProperty() | Need control over property attributes | Fine-grained control |
| ES6 Computed Properties | Creating objects with dynamic keys | Clean, modern syntax |
Conclusion
Use bracket notation for simple dynamic property assignment, Object.defineProperty() for advanced property control, and ES6 computed properties for clean object creation with dynamic keys.
Updated on: 2026-03-15T23:18:59+05:30
3K+ Views
Advertisements