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 create dynamic values and objects in JavaScript?
Dynamic values are the values we assign to the dynamic variables. A dynamic variable is a type of variable that doesn't have any specific name in the code through hard coded, its address is determined when the code is running. The name dynamic refers to the value which is capable of action and change.
Here we will see how we can create the dynamic values in JavaScript which are also part of object values and change the dynamic variable name in the future without accessing the group. It refers to that we declare a variable and further on we use the same variable in our object as one of the keys, and in the future if we are required to change the name of the variable we can change it without accessing the object.
To do the upper task we just need to assign the variable name in the object using the square brackets [ ] as shown below −
Syntax
Following is the syntax to create dynamic values and objects −
const key = 'KeyName';
const obj = { [key] : 'value'};Here key and value is key-value pair used to create the object, "obj" and keyName is the value of the key.
Algorithm
Step 1 − Define the key/s used in creating the object.
Step 2 − Create an object and use the keys above defined.
Step 3 − Apply JSON.stringify() on the object created above to display the object.
Example 1
We can use the following HTML program to see the declaration of dynamic variables.
<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Dynamic values </h2>
<div id = "result"> </div>
<script>
const key1 = "Haircolour";
const key2 = "Eyecolour";
const person = {
f_name : "Rohan",
l_name :"Joshi",
[key1] : "Black",
[key2] : "Brown"
};
// Converting the object value to show its value in html
str = JSON.stringify(person);
document.getElementById("result").innerHTML = str;
// To print value of object in console
console.log(person);
</script>
</body>
</html>So, in the above code, we can see we have declared the two keys f_name and l_name in the object without using big brackets[] and we use the big brackets for the key1 and key2 variables as these two are dynamic values.
In the output, we can see the name for the key1 variable is Eyecolour and the value of the key2 variable is Haircolour.
Example 2
Here is another code that will clarify more how the dynamic variables' names can be changed without accessing the object. Here we will just interchange the two dynamic variables' name in the code.
<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Dynamic values </h2>
<div id = "result"> </div>
<script>
const key1 = "Haircolour";
const key2 = "Eyecolour";
const person = {
f_name : "Rohan",
l_name :"Joshi",
[key1] : "Black",
[key2] : "Brown"
};
// Converting the object value to show its value in html
str = JSON.stringify(person);
document.getElementById("result").innerHTML = str;
// To print value of object in console
console.log(person);
</script>
</body>
</html>In the output, we can see the values of the two variables key1 and key2 remain the same but their name is changed without accessing the object so this is how we can create the dynamic values and objects in JavaScript.
8K+ Views
