Convert string to an existing function?

Question

Take this code:

var john = new function () {

    var init = function () {
       alert("John")
    };

    return {
        init: init
    };
};

var jane = new function () {

    var init = function () {
        alert("Jane")
    };

    return {
        init: init
    };
};

function callInit(person) {
    var fn = new Function(person); // does not work!
    fn.init();
}


$(document).ready(function () {
    callInit("john");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I would like to pass a string to a function - in my example I pass the string "john". Then I need to convert the passed string to the existing function and call init - in my example call john.init()

Is it possible?

Thanks

Cuong Le Ngoc · Accepted Answer · 2021-06-10 08:56:53Z

You can do it by changing your callInit function to:

function callInit(person) {
  var fn = window[person];
  fn.init();
}

var john = new function () {

    var init = function () {
       alert("John")
    };

    return {
        init: init
    };
};

var jane = new function () {

    var init = function () {
        alert("Jane")
    };

    return {
        init: init
    };
};

function callInit(person) {
    var fn = window[person];
    fn.init();
}

$(document).ready(function () {
    callInit("john");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Rory McCrossan · Accepted Answer · 2021-06-10 09:05:21Z

One way to achieve this would be by placing the data structures you want to access by key in to an object. You can then use the string passed in to your function as an argument to access that object by key, the advantage being that you avoid using global variables, which pollute the window. It would look like this:

let people = {
  john: function() {
    var init = function() {
      console.log("John")
    };
    
    return { init: init };
  },
  jane: function() {
    var init = function() {
      console.log("Jane")
    };

    return { init: init };
  }
}

function callInit(person) {
  var fn = people[person]();
  fn.init();
}


$(document).ready(function() {
  callInit("john");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Note that if you are going to be using a repeated data structure in this manner I would strongly suggest creating a reusable class for each property within the object. That would look something like this:

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greeting() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

let people = {
  john: new Person('John'),
  jane: new Person('Jane')
}

function callInit(person) {
  var fn = people[person];
  fn.greeting();
}

$(document).ready(function() {
  callInit("john");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

Convert string to an existing function?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related