“Variable” variables in JavaScript

by

tl;dr: Don’t use eval!

There is no single solution for this. It is possible to access some global variables dynamically via window, but that doesn’t work for variables local to a function. Global variables that do not become a property of window are variables defined with let and const, and classes.

There is almost always a better solution than using variable variables! Instead you should be looking at data structures and choose the right one for your problem.

If you have a fixed set of names, such as

// BAD - DON'T DO THIS!!!
var foo = 42;
var bar = 21;

var key = 'foo';
console.log(eval(key));

store the those name/values as properties of an object and use bracket notation to look them up dynamically:

// GOOD
var obj = {
  foo: 42,
  bar: 21,
};

var key = 'foo';
console.log(obj[key]);

In ES2015+ it’s even easier to do this for existing variables using concise property notation:

// GOOD
var foo = 42;
var bar = 21;
var obj = {foo, bar};

var key = 'foo';
console.log(obj[key]);

If you have “consecutively” numbered variables, such as

// BAD - DON'T DO THIS!!!
var foo1 = 'foo';
var foo2 = 'bar';
var foo3 = 'baz';

var index = 1;
console.log(eval('foo' + index));

then you should be using an array instead and simply use the index to access the corresponding value:

// GOOD
var foos = ['foo', 'bar', 'baz'];
var index = 1;
console.log(foos[index - 1]);

More Related Contents:

  1. Need to take variables from user input (Javascript ) [closed]
  2. What is the quickest way to subtract a variable from a number and set the variable?
  3. Node.js bug ? function’s return value change when stored as variable
  4. How do I check if a variable is an array in JavaScript?
  5. How to use a variable for a key in a JavaScript object literal?
  6. Pass variables by reference in JavaScript
  7. Define a global variable in a JavaScript function
  8. Declaring multiple variables in JavaScript
  9. Declaring variables without var keyword
  10. Are Variable Operators Possible?
  11. How can I check if an element exists in the visible DOM?
  12. Multiple left-hand assignment with JavaScript
  13. Calling a JavaScript function named in a variable [duplicate]
  14. JavaScript OR (||) variable assignment explanation
  15. Set “this” variable easily?
  16. Is there any difference between declared and defined variable
  17. Javascript: Converting String to Number?
  18. Why is the variable `closed` being logged as `false`, if I define it globally as `0`?
  19. Is there a better way of writing v = (v == 0 ? 1 : 0); [closed]
  20. Setting a variable equal to another variable [duplicate]
  21. Access variable outside function scope [duplicate]
  22. JavaScript Dynamic Variable Names
  23. Effect of declared and undeclared variables
  24. When/why to prefix variables with “$” when using jQuery? [duplicate]
  25. jQuery ajax return value [duplicate]
  26. Prepending “http://” to a URL that doesn’t already contain “http://”
  27. How to pass a list from Python, by Jinja2 to JavaScript
  28. Javascript date variable assignment
  29. Use JavaScript variable as function name?
  30. Passing a local variable from one function to another

Leave a Comment