Calling JavaScript function from String

While creating the jQuery plugin for DIV TEXT BOX: Create orkut style status update box, I had a requirement where in I had to call a JavaScript function whose name is specified as a string in some tag. For example, user is giving name of function in a text box and you have to call that function.

Calling simple JavaScript function is easy, just call it :)
e.g. someFunction() or someOtherFunction(‘text’, 101);

But what if you don’t know the name of function to be called and you know this only at runtime? Check following demo.

Demo


In above demo, click Call button. You can see an alert box with value ‘Happy New Year.!!’. Once you click the Call button, a function fnFooBar gets called. The name of the function and parameter is specified in first text box and the body of the function is in the text area.

Change the function parameter or add a new function in the textarea and call it from text box and then click Call button. You can see that the function gets called although it is not parsed by the browser.

Now how do we do this? Simple, we use eval() method of JavaScript to evaluate and register the javascriot elements dynamically.

Thus is you have a string whose value is the function name. You can call it by eval() function as follow:

var strFun = "someFunction";
var strParam = "this is the parameter";

//Create the function call from function name and parameter.
var funcCall = strFun + "('" + strParam + "');";

//Call the function
var ret = eval(funcCall);

You can use eval() function to register any kind of JavaScript code like loading a JavaScript file from using AJAX and then registering it with the browser. This way you can load your BIG BIG javascript files on fly by ajax and register it as an when required.

UPDATE:
It seems that there is a better way to do this without using eval method. Thanks @Jerome for the comment.

Use window[functionName](parameters) to call any function functionName. See below example:

var strFun = "someFunction";
var strParam = "this is the parameter";

//Create the function
var fn = window[strFun];

//Call the function
fn(strParam);
Get our Articles via Email. Enter your email address.

You may also like...

30 Comments

  1. How do you send parameters that aren’t strings to the function though? Lets say you’ve got FunctionNameString and Object … how would you call FunctionNameString(Object) ?

  2. JS says:

    What I found easier is:

    // convert string to a function reference (if it exists)
    fun = eval(strFun);
    // call it
    fun(param1, param2);

    This worked in IE6 and FF3.5 so I guess it works in others too.
    Using this method enables me to use objects as parameters.

  3. Akshat Maheshwari says:

    It helped me a lot…….
    Thanxs.. :)

  4. Good info

  5. GenysLt says:

    Thank You

  6. anna says:

    thx=) help me a lot ;)

  7. teal says:

    You should understand that using of ‘eval’ is not good enough practice. Happily all js functions are stored in huge ‘window’ object (if you use js inside browser, of course).
    So you can get direct pointer to your function by calling
    window[‘here_is_your_function_name_in_string’];
    Or you can even test if this function exists:
    window.hasOwnProperty(‘here_is_your_function_name_in_string’);

    Ok, complete sample is:
    var s = “my_function”;
    if (window.hasOwnProperty(s)) window[s](params);

  8. jonas says:

    Great!! Been looking desperately for this functionality!!!

  9. jey says:

    javascript eval() function

    name0,name1,name3 are javascript variables.
    jline0,jline1,jline2 are javascript arrays

    str=”{name : name0,data : jline0},{name : name1,data : jline1},{name : name2,data : jline2 }”;
    var ff=eval(str);

    document.ready(
    .
    .

    series :[ff]
    .
    .
    });

    I can’t pass ff value in series parameter. Please anyone help me. .

  10. ssam says:

    eval is bad, this is the worst way of executing a function.

    • Viral Patel says:

      @Ssam – I agree with you. Using eval is not advisable. But in the given situation eval is only option, where one would like to call a function at runtime using just a name.

      • jerome says:

        Correct me if I’m wrong, but this could also be a good solution, provided the only hint you’ve got on the function to execute is its name :
        http://stackoverflow.com/questions/912596/how-to-turn-a-string-into-a-javascript-function-call

        I tried this with success :
        window[functionName](param);

        screw eval !! :D

        • Viral Patel says:

          Jerome, My bad :) I must agree I din’t know about this method. Thank you so much for getting this to my attention. I’ll update the tutorial right away and add this option as preferred solution.

  11. Monkey says:

    Also, it is not well interpreted in a “jQuery object” environnement:

    var myjQueryObject = function()
    {
     function oglop(arg)
     {
       alert(arg);
     }
    
     function init()
     {
       window['oglop']('gwok gwok!');
     }
    
     return {init: init, oglop: oglop};
    }();
    

    This won’t work until you create the function outside the myjQueryObject class.

  12. Spanich says:

    I was expecting fn to be executed under window object, so that context for the function will be window, but not the current object.
    So, I need not a “call”, but “apply” method like in the following post:
    http://odetocode.com/blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx

  13. arun says:

    function oglop(arg)
    {
    ———–Here I need call code behind function ———————
    is it possible
    }

  14. Amit says:

    function oglop(arg)

    {
    ———–Here I need call code behind function ———————
    is it possible
    };

  15. Hitesh says:

    jquery multi combobox selected first elements in display after remove option

  16. roemly says:

    thank u very much ^_^

  17. Rahul Jawale says:

    Thanks man. You are a savior!!! :)

  18. hooom says:

    eval is bad idea if you care security

  19. rajesh says:

    thanks a lot it helped so much

  20. syam says:

    It’s working good it helped a lot

  21. If you’re using jQuery you can try using isFunction.

    Here is an example:

        function sayhi() {
        alert(‘hi there’);
        }
    
        var funcCall= “sayhi”;
    
        if($.isFunction(funcCall)) {
        eval(funcCall);
        }
    
  22. kamayani says:

    very useful

  23. anonymous says:

    Thank God Someone has finally given me the information I needed in a way that I can understand. Other forums had parts of the code but not the complete coding which was confusing. Thanks a lot mate

  24. SteeveC says:

    Nice, thx you, i was looking for this solution since long time.
    Thx you very much

  25. kv1dr says:

    It works :D

  26. LaurentM says:

    It works very well :-) Thanks !

  27. vrushali says:

    GUD Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>