How to Use Dynamic Variable Name in JavaScript

1. Use eval() to Create Dynamic Variable Name in JavaScript
2. Use window Object to Create Dynamic Variable Name in JavaScript

This tutorial is about JavaScript dynamic variable name, where we’ll learn about its definition, creation and use in JavaScript. We don’t use hard code dynamic variables but are auto-generated during the program’s execution.

We can use the eval() function and the window object to learn JavaScript dynamic variable names.

The eval() is a global object’s function property that executes JavaScript code represented as a string.

The eval() evaluates expression if its argument is an expression and runs statements if its argument’s one or multiple JavaScript statements.

We can also create dynamic variables in JavaScript using the window object. It is a global object that runs on our browser.

Let’s understand both ways via example code.

Use eval() to Create Dynamic Variable Name in JavaScript

JavaScript Code:

var j = 'item';
var i = 0;
for (i = 1; i < 5; i++) {
  eval('var ' + j + i + '= ' + i + ';');
}
console.log('Item1 = ' + item1);
console.log('Item2 = ' + item2);
console.log('Item3 = ' + item3);
console.log('Item4 = ' + item4);

Output:

"Item1 = 1"
"Item2 = 2"
"Item3 = 3"
"Item4 = 4"

In the above code, we create dynamic variable names using the eval(), which executes a statement to declare the item and assign the value of i.

Use window Object to Create Dynamic Variable Name in JavaScript

Everything is Context (kind of Object) and Object in JavaScript. Every variable is stored in Variable or Activation Object in case of a function.

We can implicitly write variables in Global Scope equal to the window in the browser and can be accessed via a bracket or dot notation.

JavaScript Code:

var num1 = 1, num2 = 2, num3 = 3;

var newNumberViaDot = window.num1;
var newNumberViaBracket = window['num1'];

console.log('Dynamic variable via dot notation');
console.log(newNumberViaDot);
console.log('Dynamic variable via bracket notation');
console.log(newNumberViaBracket);

Output:

"Dynamic variable via dot notation"
1
"Dynamic variable via bracket notation"
1

The technique above to create dynamic variable names works for Global Object only. The reason is that the variable object of the global object is the window object itself.

We can’t access the Activation Object in the function’s Context. See the following code.

function numbersFunction() {
  this.num1 = 1;
  this.num2 = 2;
  this.num3 = 3;

  var newNumber = window['num1'];  // === undefined
  console.log(newNumber);
  newNumber = this['num1'];  // === 1
  console.log(newNumber);
}

new numbersFunction();

Output:

undefined
1

In the snippet given above, new creates the instance of numberFunction(); without it, the scope of numberFunction() would be global equal to the window object. This example prints undefined and 1.