How do I create dynamic variable names inside a JavaScript loop?

Front End Technology Javascript Web Development

In this tutorial, we will use the dynamic variable names inside the JavaScript loop. The dynamic variables name means it is not hardcoded already, and we can create it according to our needs from some other string values.

In JavaScript, there are not many applications of the dynamic variable, but it is needed while developing the real-time application. For example, while developing any application, the programmer wants to store any user-related entity to the variable with the same name as the username. In this scenario, programmers need to create dynamic variables inside JavaScript.

Users can also refer to the below examples to understand the dynamic variable's requirements. Suppose a programmer wants to store some values in the local storage, and they need unique names for every key. To create the unique key, they must use dynamic variables.

So, there are lots of applications of the dynamic variables. Below, we have implemented the different methods to create the dynamic variables.

Use an Array of Variables
Use the eval() Method
Using the Window Object

Use an Array of Variables

The simplest JavaScript method to create the dynamic variables is to create an array. In JavaScript, we can define the dynamic array without defining its length and use it as Map. We can map the value with the key using an array and also access the value using a key.

Syntax

Users can follow the below syntax to create the dynamic array to store dynamic variables.

let array = [];
for () {
   array[ key ] = value; // dynamically assign value to the key.
}

Example

In the example below, we have used the dynamic array to create the variables. We have stored the square of some even numbers by considering the number as the key and the square as the value.

<html>
<head>
   <title>Use dynamic variable names inside JavaScript loop.</title>
</head>
<body>
   <h2>Use dynamic variable names inside JavaScript loop.</h2>
   <h4>Accessing the different square values from the array.</h4>
   <div id="value"></div>
   <script>
      let value = document.getElementById("value");
      let dynamic = [];
      // storing the squre of even number in dynamic array
      for (let user_id = 0; user_id< 30; user_id += 2) {
         dynamic[user_id] = user_id * user_id;
      }
      value.innerHTML += "square of 4 is - " + dynamic[4] + ". <br/>";
      value.innerHTML += "square of 4 is - " + dynamic[10] + ". <br/>";
      value.innerHTML += "square of 4 is - " + dynamic[22] + ". <br/>";
   </script>
</body>

Use the eval() Method

In JavaScript, the eval() method evaluates the expression we pass as a parameter. It takes the string of the JavaScript expression and evaluates it. In our case, we will pass the formatted string to create the dynamic variable.

Syntax

eval (JavaScript_expression);

Parameters

JavaScript_expression − It is a JavaScript expression in the string format. Users can also pass the formatted string.

Example

The below example demonstrates the use of the eval() method to create the dynamic variables. We have the array of user names, and we are creating the variables according to user names and accessing the values of it, and rendering them on the screen.

<html>
<body>
   <h2>Use dynamic variable names inside JavaScript loop.</h2>
   <h4>Creating dynamic variable according to username and storing value into it:</h4>
   <div id="value"></div>
   <script>
      let value = document.getElementById("value");
      let user = ["user1", "user2", "user3", "user4", "user5"];
      // creating variable same as username and storing userid into that.
      for (let user_id = 0; user_id<user.length; user_id++) {
         eval('var ' + user[user_id] + '= ' + user_id + ';');
      }
      value.innerHTML += "value for user1 is - " + user1 + ". <br/>";
      value.innerHTML += "Value for user5 is - " + user5 + ". <br/>";
   </script>
</body>
</html>

Using the Window Object

The window object is defined by default in every browser. Users can access every global variable in the code using the window object. Furthermore, programmers can create the dynamic variable using the formatted string and window object.

Syntax

Users can follow the below syntax to store variables in the window object.

for ( let i = 0; i< 10; i++ ) {
   window[ ‘user’ + i ] = value;
}
let val = user0; // to access the dynamic variables

Example

We have used a window object to store the global variables in this example. We are accessing the values from the user array and making them global variables using the window object.

<html>
<head>
   <title>Use dynamic variable names inside JavaScript loop.</title>
</head>
<body>
   <h2>Use dynamic variable names inside JavaScript loop.</h2>
   <h4>Creating dynamic variable according to user array and storing to window object.</h4>
   <div id="value"></div>
   <script>
      let value = document.getElementById("value");
      let user = ["user1", "user2", "user3", "user4", "user5"];
      // creating variable same as username and storing into window object.
      for (let user_id = 0; user_id<user.length; user_id++) {
         window[ user[user_id] ] = "hello " + user[user_id];
      }
      value.innerHTML += "value for user 1 is - " + user1 + ". <br/>";
      value.innerHTML += "Value for user 5 is - " + user5 + ". <br/>";
   </script>
</body>
</html>

Conclusion

This tutorial has three different approaches to creating the dynamic variables inside the loop. The first approach is the easiest one and most used. Moreover, if the user wants to make global variables, they can use the third approach using the window object.