Use string to access variable in javascript

Question

If I have:

name.sub = function() {
    var sub = {};
    var placeholder = "test"
    var test = function() {
        return 42;
    };

    // Desired code would be here

    return sub;
};

I want to use a placeholder to access the variable so that I get 42.

Something like window["name"]["sub"][placeholder] is seemingly looking for name.sub.test.

The only answers I found were if it was a global variable. Using eval would work, but I've heard it should be avoided where possible.

placeholder = "test"; 
console.log(eval(placeholder + '()'))
// Would return 42

My actual end goal is to have an associative array where:

console.log(array[placeholder]);
// Would return 42

Any help would be appreciated.

This is what I ended up using for anyone interested:

name.sub= function() {
    var sub = {};
    var placeholder = "test"
    var test = function() {
        return 42;

    var newObj = {};
    newObj["test"] = function() {test()}

    console.log(newObj[placeholder]())
    // Should return 42
    };

Did you try window["name"]["sub"][window["name"]["sub"]["placeholder"]]() ? — mplungjan
– mplungjan, Commented Jul 24, 2015 at 17:32
I don't quite understand the purpose of this. You can't have access to a "placeholder" that is local to a function outside of the function. You would have to define placeholder outside of the function or add placeholder as a property of the returned object. — Jeff Shaver
– Jeff Shaver, Commented Jul 24, 2015 at 17:48
Sorry; I probably did a poor job making my problem abstract whilst maintaining context. There would be a name.sub.input(variable) where input would convert variable to a string (e.g. "test"). I want to find out what the variable test is equal to. Hope that cleared it up a bit. Though I think it'll be rabbit hole of why I want to do that. — InsatiablyCivil
– InsatiablyCivil, Commented Jul 24, 2015 at 19:14

Nebula · Accepted Answer · 2015-07-24 18:10:43Z

1

You can't access variables inside a function from outside said function.

Instead, you could do this:

name.sub = function(placeholder) {
  var functions = {
    "test": function() {
      return 42;
    },
  };
  return functions[placeholder]();
};

name.sub("test"); // 42

I'm not sure if that's what you're looking for but hopefully it is. Explain more?

answered Jul 24, 2015 at 18:10

Nebula

7,2504 gold badges24 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

InsatiablyCivil Over a year ago

Thanks, but I was trying to keep everything within the function. Basically to dynamically call a function based on the value of a string.

Siguza · Accepted Answer · 2015-07-24 18:19:18Z

You can't access local variables inside a function the same way you can access properties of window in global scope.

kangax wrote an interesting article about Understanding delete [in JavaScript], which includes an explanation of what Activation objects are - which I think is what you're looking for.
I suggest you read the entire article, but long story short:

Inside functions, declared variables (and functions) are added as properties to the activation object of the current scope, as they get added to window in the global scope.
But unlike window:

Note that Activation object is an internal mechanism and is never really accessible by program code.

Conclusion: What you're asking is not (currently) possible.

Your options are limited to:

Using an intermediate object:

name.sub = function() {
    var sub = {};
    var placeholder = "test";
    var array = {};
    array.test = function() {
        return 42;
    };
    console.log(array[placeholder]());
    return sub;
};

Using eval, exactly like you suggested:

name.sub = function() {
    var sub = {};
    var placeholder = "test";
    var test = function() {
        return 42;
    };
    console.log(eval(placeholder + '()'));
    return sub;
};

Using window, by removing var from test's declaration:

name.sub = function() {
    var sub = {};
    var placeholder = "test";
    test = function() {
        return 42;
    };
    console.log(window[placeholder]());
    return sub;
};

I suggest the first option for the sake of performance over eval, for compatibility over window (might collide with other code), and simply because of personal taste and what I consider good practice.

Can I ask a semi-followup question please, since perhaps I'm asking the wrong thing. I'm trying to do a gui, where you click on an item, and that item would then run a function. So I have a property in the item that has the name of the function that should be run when clicked. So basically I want to make a onClick function in canvas if that makes sense. Is this implementation above still relevant?
Instead of assigning a property to that item, I'd just assign it the function itself - if it's a DOM element, via addEventListener, otherwise via property. But for details on your specific situation, I suggest asking a new question.

Danillo Felixdaal · Accepted Answer · 2015-07-24 18:37:53Z

0

By what i understand of your question,

its seem like you are looking for a key/value pair to a JavaScript object literal,

window.name is reserved btw: https://developer.mozilla.org/en-US/docs/Web/API/Window/name

var sub = {
    'test': function() {
        return 42;
    },
    'test2': 42;
}

sub['test']();
sub['test2'];

add by

Using dot notation:
sub.test3 = "value3";

Using square bracket notation:
sub["test4"] = "value4";

Maybe im thinking to simple , but seems like this is what you are looking for

edited Jul 24, 2015 at 18:37

answered Jul 24, 2015 at 18:32

Danillo Felixdaal

5834 silver badges11 bronze badges

Collectives™ on Stack Overflow

Use string to access variable in javascript

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related