Home > Article > Web Front-end > How to create dynamic values and objects in JavaScript?

How to create dynamic values and objects in JavaScript?

WBOYforward: 2023-09-20 10:57:04673browse

如何在 JavaScript 中创建动态值和对象？

Dynamic value is the value we assign to the dynamic variable. A dynamic variable is a variable that is hard-coded in the code without a specific name, and its address is determined while the code is running. The name "dynamic" refers to a value that can be manipulated and changed.

Here we will see how to create a dynamic value (also part of the object value) in JavaScript and change the dynamic variable name without accessing the group in the future. It means that we declare a variable and then we use the same variable as one of the keys in the object and in the future if we need to change the name of the variable we can change it without accessing the object.

To accomplish the above task, we just assign the variable name in the object using square brackets [ ] as shown below -

Syntax

The following is the syntax for creating dynamic values and objects -

const key = &#39;KeyName&#39;;
const obj = { [key] : &#39;value&#39;};

Here key and value are the key-value pairs used to create objects," obj” and keyName > are the values of the key.

Algorithm

Step 1 - Define the keys used to create the object.
Step 2 - Create the object and use the keys defined above.
Step 3 - Apply JSON.stringify() to the object created above to display the object.

Example 1

We can use the following HTML program to view 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 that we declared two keys f_name and l_name in the object without using curly brackets [], and we used curly brackets for key1 and key2 variables , because these two are dynamic values.

In the output, we can see that the name of the key1 variable is Eyecolour and the value of the key2 variable is Haircolour.

Example 2

Here is another code that will shed more light on how to change the name of a dynamic variable without accessing the object. Here we just swap the names of two dynamic variables 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 that the values of the two variables key1 and key2 remain the same but their names are changed without accessing the objects, so this is what we have in JavaScript How to create dynamic values and objects in .

The above is the detailed content of How to create dynamic values and objects in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript json html 对象算法

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to get the object scale factor of an Image using FabricJS?Next article：How to get the object scale factor of an Image using FabricJS?

See more

How to create dynamic values ​​and objects in JavaScript?

Syntax

Algorithm

Example 1

Example 2

Related articles

How to create dynamic values and objects in JavaScript?