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
How to create dynamic values and objects in JavaScript?
Dynamic values are values assigned to variables whose names are determined at runtime rather than being hard-coded. In JavaScript, we can use dynamic property names in objects, allowing us to create flexible object structures where property names can be changed without modifying the object definition directly.
Dynamic objects are particularly useful when you need to create properties based on variables, user input, or computed values. The key technique involves using square brackets [ ] syntax to define property names dynamically.
Syntax
Following is the syntax to create dynamic values and objects:
const key = 'PropertyName';
const obj = { [key]: 'value' };
Here key is a variable containing the property name, and value is the corresponding property value.
Example 1: Basic Dynamic Properties
Here's how to create an object with dynamic property names:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Dynamic Values</h2>
<div id="result"></div>
<script>
const key1 = "hairColor";
const key2 = "eyeColor";
const person = {
firstName: "Rohan",
lastName: "Joshi",
[key1]: "Black",
[key2]: "Brown"
};
// Display object as JSON string
const str = JSON.stringify(person, null, 2);
document.getElementById("result").innerHTML = "<pre>" + str + "</pre>";
console.log("Person object:", person);
</script>
</body>
</html>
{
"firstName": "Rohan",
"lastName": "Joshi",
"hairColor": "Black",
"eyeColor": "Brown"
}
Example 2: Changing Dynamic Property Names
By modifying the variable values, we can change property names without touching the object definition:
<!DOCTYPE html>
<html>
<body>
<h2>Dynamic Property Names</h2>
<div id="result1"></div>
<div id="result2"></div>
<script>
// First version
let key1 = "profession";
let key2 = "age";
const person1 = {
name: "Alice",
[key1]: "Developer",
[key2]: 28
};
// Change the variable values for different property names
key1 = "jobTitle";
key2 = "experience";
const person2 = {
name: "Bob",
[key1]: "Designer",
[key2]: "5 years"
};
document.getElementById("result1").innerHTML =
"<h3>Person 1:</h3><pre>" + JSON.stringify(person1, null, 2) + "</pre>";
document.getElementById("result2").innerHTML =
"<h3>Person 2:</h3><pre>" + JSON.stringify(person2, null, 2) + "</pre>";
</script>
</body>
</html>
Person 1:
{
"name": "Alice",
"profession": "Developer",
"age": 28
}
Person 2:
{
"name": "Bob",
"jobTitle": "Designer",
"experience": "5 years"
}
Example 3: Computing Dynamic Property Names
You can also compute property names using expressions:
<!DOCTYPE html>
<html>
<body>
<h2>Computed Dynamic Properties</h2>
<div id="result"></div>
<script>
const prefix = "user";
const suffix = "Info";
const userData = {
id: 1,
[prefix + "Name"]: "John Doe",
[prefix + suffix]: "Active user",
[`${prefix}Email`]: "john@example.com"
};
document.getElementById("result").innerHTML =
"<pre>" + JSON.stringify(userData, null, 2) + "</pre>";
</script>
</body>
</html>
{
"id": 1,
"userName": "John Doe",
"userInfo": "Active user",
"userEmail": "john@example.com"
}
Key Benefits
- Flexibility: Property names can be determined at runtime
- Maintainability: Change property names by modifying variables
- Dynamic API responses: Useful for handling varying data structures
- Code reusability: Same object structure with different property names
Conclusion
Dynamic properties in JavaScript provide powerful flexibility for creating objects with variable property names. Use square brackets [variable] syntax to define properties dynamically, enabling more maintainable and adaptable code structures.
9K+ Views
