JavaScript call function inside a function by variable name [duplicate]

Question

I'm having a difficulty calling a function inside of another function when its name is in a variable:

var obj = {}

obj.f = function() {
  var inner = {
    a: function() {
      function b() {
        alert('got it!');
      }
      b(); // WORKS AS EXPECTED
      x = 'b';
      [x](); // DOESN'T WORK, NEITHER this[x]() window[x](), etc.
    }
  }
  inner.a();
}

obj.f();

I tried prefixing [x]() with different scope paths but so far w/o success. Searching existing answers did not turn up anything. It works with this[x]() if b() is placed directly inside object inner. I would like to keep b() as a function inside function a() because of variable scope in function a(), otherwise I would need to pass many parameters to b().

//// Re duplicate question: Quentin provided a more elegant answer in this thread imo.

@PaulS. The way x is defined, it will be created under window object — Catalin
– Catalin, Commented Jan 13, 2014 at 10:59
@RaraituL — x will be but b won't. It is window['b'] that doesn't exist, not x. — Quentin
– Quentin, Commented Jan 13, 2014 at 11:01

Quentin · Accepted Answer · 2014-01-13 10:58:25Z

19

There is no sensible way of accessing an arbitrary variable using a string matching the name of the variable. (For a very poor way to do so, see eval).

[x](); // DOESN'T WORK

You're trying to call an array as a function

NEITHER this[x]()

The function isn't a property of the inner object.

window[x](), etc.

Since it isn't a global, it isn't a property of the window object either.

If you need to call a function based on the value of a string variable, then organise your functions in an object and access them from that.

  function b() {
    alert('got it!');
  }
  var myFunctions = {
      b: b
  };
  x = 'b';
  myFunctions[x]();

answered Jan 13, 2014 at 10:58

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

Gonki Over a year ago

var myFunctions = { b: b }; That did it!

msapkal · Accepted Answer · 2014-01-13 10:58:03Z

3

Try this. Currently you are assigning string to variable x, instead of a function variable.

 x = b;
 x();

answered Jan 13, 2014 at 10:58

msapkal

8,3462 gold badges34 silver badges48 bronze badges

1 Comment

Gonki Over a year ago

perhaps it could have worked if value b were assigned directly. it comes from a calculation. it's not real code in the example.

user3189921 · Accepted Answer · 2014-01-13 11:05:10Z

3

The problem is with your assignment

use x = b instead of x = 'b' to assign the function object as the latter just assigns the string into x.

Once you fix your assignment you can invoke the function as

x();
a.x();
a[x]();

etc.

answered Jan 13, 2014 at 11:05

user3189921

1 Comment

Mehran Hatami Over a year ago

you have to change the a[x](), to a["x"]();, unless x is a string variable with "x" value in it.

Bhavesh Kachhadiya · Accepted Answer · 2014-01-13 11:08:15Z

2

You should make array for the function and then access using name in your variable as follow:

var obj = {}

obj.f = function() {
  var inner = {
    a: function() {
      // set up the possible functions:
      var myFuncs = {
              b: function b() {alert('got it!');}
              };
      //b(); // WORKS AS EXPECTED --> commented this code
      x = 'b';
      myFuncs[x]();    
    }
  }
  inner.a();
}

answered Jan 13, 2014 at 11:08

Bhavesh Kachhadiya

3,9723 gold badges18 silver badges20 bronze badges

1 Comment

Bhavesh Kachhadiya Over a year ago

@Gonki you need minimum changes in your code for this solution

Paul S. · Accepted Answer · 2014-01-13 11:02:38Z

The function declaration b will be captured in the closure of the anonymous function expression assigned as a.

When var is used in a closure, there is no (available in JavaScript) Object which gets assigned a property similar to what happens with window in the Global Scope.
Writing a function declaration effectively vars the name of the function.

If you really want to access a variable (i.e. b) by String, you will either need to create an Object which holds b similar to what you've done for a, or (and possibly dangerously) rely on an eval to convert "b" to b.

If you can't create the whole Object ahead-of-time, you can use this format

/* in (higher?) scope */
var fnRef = {};
// now when you
function b() {/* define as desired */}
// also keep a ref.
fnRef['b'] = b;
// fnRef['b']() will work **after this line**

Mehran Hatami · Accepted Answer · 2014-01-13 11:03:09Z

1

let's say your code is like this:

//instead of x = 'b'
x = function(){}

then your solution could be like this:

var obj = {}

obj.f = function() {
  var inner = {
    a: function() {
      function b() {
        alert('got it!');
      }
      b(); // WORKS AS EXPECTED
      //you can define it as a variable
      var x = function(){};
      //and call it like this
      x();

      //or define it like this
      this[x] = function(){};
      //and call it like this
      this[x]();

      //but you are creating an array [x] which is not a function
      //and you are trying to call an array????
      [x](); // DOESN'T WORK, NEITHER this[x]() window[x](), etc.
    }
  }
  inner.a();
}

obj.f();

answered Jan 13, 2014 at 11:03

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

JavaScript call function inside a function by variable name [duplicate]

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Comments

Linked

Related