How to Convert String to Variable Name in JavaScript?

In JavaScript, if we consider the variable names as string values, it is difficult to transform a variable’s name into a string. However, this problem has been handled in many ways for example, static properties of objects, eval(), and modern ways such as Map can be used to achieve the essential effect of dynamic variable creation, such methods are appropriate for managing dynamic variables.

These are the following approaches to convert a string to a variable name.

Using Object Properties

A JavaScript object is a collection of key-value pairs. Where the key is a string or symbol, you can dynamically assign properties to objects using strings as keys, this method is one of the simplest and most used techniques for simulating the conversion of strings to variable names, this works because objects can access properties and is defined using parentheses that accept strings as keys.

Syntax:

const obj = {};
obj['dynamicKey'] = value;

Example: In this example, We create an empty object obj and dynamically add properties using strings stored in key variables, the username property of the object is created and set to 'Pankaj Kumar Bind', which allows for flexible handling without having to hardcode dynamic attribute names.

const obj = {};
const key = 'username';
obj[key] = 'Pankaj Kumar Bind';

console.log(obj.username); 

Pankaj Kumar Bind

Using the eval() Function (Not Recommended)

The eval() function allows you to execute JavaScript code that is expressed as a string although this method can be used to convert strings to variable names by dynamically creating and executing code however it is not strongly recommended, using eval() can lead to severe security vulnerabilities, this is especially true when dealing with user-generated input, it can also negatively impact performance, this forces JavaScript engine to compile new code on the fly.

Syntax:

eval('var ' + variableName + ' = value;');

Example: In the given below example eval() takes a string that forms a JavaScript variable declaration and assigns it a 'dynamic value', although this achieves its goal, using eval() introduces security risks, such as the possibility of running code that dangerous therefore it is generally recommended to avoid this method.

const variableName = 'myVar';
eval('var ' + variableName + ' = "Dynamic Value";');

console.log(myVar);

Dynamic Value

Using Map or WeakMap (Modern Approach)

The map is an interface provided by JavaScript programming language to implement collections of ordered key-value pairs unlike objects where keys are limited to strings or symbols in Map, the keys can be of any data type and this means that Map can perform better than plain old objects at storing dynamic keys and it also provides useful methods like set(), get(), has(), etc thus making it a good approach to deal with such dynamic variable name.

Syntax:

const map = new Map();
map.set(key, value);

Example: In the given below example Map object is used to store dynamic key-value pairs, the string 'age' is set to the key, and the number 25 is stored as its value, unlike simple objects, Map allows more complex key types and has built-in methods for manipulating items, this makes it ideal for dynamic key assignments.

const map = new Map();
const dynamicKey = 'age';
map.set(dynamicKey, 20);

console.log(map.get('age')); 

20

pankajbind

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies