How to Use Dynamic Variable Names in JavaScript?

Dynamic variable names are variable names that are not predefined but are generated dynamically during the execution of a program. This means the name of a variable can be determined at runtime, rather than being explicitly written in the code.

Here are different ways to use dynamic variables in JavaScript.

1. JavaScript eval() Method

The eval() function in JavaScript evaluates a string as code, allowing dynamic creation of variables. By passing a string to eval() that declares and assigns values to variables, you can dynamically generate variables during runtime within loops or iterations.

Syntax

eval(string);

let k = 'value';
let i = 0;

for (i = 1; i < 5; i++) {
    eval('let ' + k + i + '= ' + i + ';');
}

console.log("value1=" + value1);
console.log("value2=" + value2);
console.log("value3=" + value3);
console.log("value4=" + value4);

value1=1
value2=2
value3=3
value4=4

2. Window Object

JavaScript has a global object (window in browsers) where global variables are stored as properties. By assigning values to window['variableName'], you create dynamic global variables. These can be accessed anywhere in the script, allowing flexible manipulation of global variables.

Syntax

window['variableName']

let i;
for (i = 1; i < 5; i++) {
    window['value' + i] = + i;
}

console.log("value1=" + value1);
console.log("value2=" + value2);
console.log("value3=" + value3);
console.log("value4=" + value4);

Output

value1=1
value2=2
value3=3
value4=4

3. Using Map Data Structure

Using the Map data structure in JavaScript is a safe and efficient way to handle dynamic variable names. Maps allow key-value storage with flexible keys, avoiding global scope pollution and providing clear methods (set, get) for managing dynamic variables effectively.

Syntax

let dynamicMap = new Map();

// Create a new Map to store dynamic variables
let dynamicMap = new Map();

// Generate dynamic variable names and assign values
for (let i = 1; i <= 4; i++) {
    dynamicMap.set(`value${i}`, i);
}

// Access and print the dynamically created variables
dynamicMap.forEach((value, key) => {
    console.log(`${key} = ${value}`);
});

value1 = 1
value2 = 2
value3 = 3
value4 = 4

JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.