1. We have moved from vBulletin to XenForo and you are viewing the site in the middle of the move. Though the functional aspect of everything is working fine, we are still working on other changes including the new design on Xenforo.
    Dismiss Notice

Workarounds for JavaScript "eval"

Discussion in 'JavaScript and AJAX' started by pradeep, Sep 17, 2008.

  1. pradeep

    pradeep Team Leader


    One Javascript function that gets used such frequently than it should to be is "eval". "eval" evaluates the content of a text string passed to it and then executes it as if it were normal Javascript code..

    Actually, we should never use eval for any purpose in our code, be it dynamic variable access, or dynamic code execute or the likes there is always a workaround. "eval" is usually used by beginners and amateurs most of the times to access some dynamic variable i.e. in a situation where a variable is a part of another varibale name. Example: You have variable str1,str2...strn, so to access them you may write:

     var myStr = eval('str'+i); // where i is our counter variable

    Solution to Dynamic Variable Access

    For those who don't know all global variables are held in the window object, so we can bypass "eval" to access the require variable like this:

     var myStr = window['str'+i]; // where i is our counter variable
    This much better, faster and safer way to access a dynamic varibale.

    Dynamic Code Execution

    Sometimes some experienced programmers may still use eval, of course for something quite complicated than accessing a dynamic variable. There also we can avoid using eval, by creating a function with the code to execute and then calling the function. Normally we would do this.

     var myCode = 'alert("Howdy?");';
    Now let's try the non-eval approach,

     var myCode = 'alert("Howdy?");';
     var myFucn = new Function(myCode);
    The alternative method may produce code a bit longer than the eval one, but the later one is better and easier to understand, and it should also run faster.
  2. shabbir

    shabbir Administrator Staff Member

  3. shabbir

    shabbir Administrator Staff Member

  4. amitvjog

    amitvjog New Member

    Can you please explain the reasons behind not using 'eval', or just that beginners are using it we should not use it?

    Amit Jog
  5. vol7ron

    vol7ron New Member

    I know this may not be a debugging forum, but I'm trying to get something similar to work. Notice the "
    function (replace){}" at the bottom. Do you know of any way to add an event to run code stored in a variable?

    So given the below, I want getObjById('outputID').innerHTML='hello';
    to run when the first link is clicked. Thank you for any help/explanations that can be shed on this subject.

    attachEventHandlers(obj, eventType, fn, useCapture){
    if (obj.addEventListener) {
    obj.addEventListener(eventType, fn, useCapture);
    return true;
    } else if (obj.attachEvent) {
    var val = obj.attachEvent("on"+eventType, fn);
    return val;
    } else {
    try {
    obj.eval("on" + eventType) = fn;
    } catch (err) {
    function init(){
    replace = "getObjById('outputID').innerHTML='hello';";
    , 'click'
    , function (replace){}
    , false
  6. vol7ron

    vol7ron New Member

    I found that the following will work:
    function init(){
       replace = "getObjById('outputID').innerHTML='hello';";
       replace = new Function(replace);
          , 'click'
          , replace
       , false
    I'm just not sure I understand why I couldn't use new Function(replace) or function(replace) instead...hmm

    Thanks for the article, regardless.
  7. vol7ron

    vol7ron New Member

    Nevermind, using new Function(replace), instead of function(replace){} worked! thank you for the article! I've done this before, just have forgot after all this time and didn't feel like going through old code.

    My example should be a good reason of when not to use eval. I think eval executes at runtime, or, at the least it is quirky. When trying to late-bind an event, eval() did not do what I wanted it to do. It ran the code at page load, rather than when the event was triggered. Instead, using the new Function() did exactly what needed to be done when late-binding an event.

    This is just my example, I'm sure there are other pros/cons though.

    Hope that helps,
  8. gkumar

    gkumar New Member

    You will have to write an eval yourself. You will have to parse the string and invoke the right operators.
    Here's a link to get you started.
    The Tamarin project has a ECMAScript parser written in ES4. Try this as well.
    "You can even write the entire javascript inside as3, so that you do not need to touch the actual html page." Do you have links / tutorials? – okoman
    Both AS and JS are based on the same ECMAScript standard. So, if you pass a string of AS3 to a container, and use JS's eval on this string, it should work just fine.
  9. David Michael

    David Michael New Member

    I think they use it...try to read the whole code.
  10. elizas

    elizas New Member

    i would like to add to this.
    In JavaScript replace function is basically used to replace some string in an another string. In replace function you can see that we are passing the regular expression to replace, but if the data is dynamic and i want to replace it in runtime .The over all concept is that in replace function of JavaScript we can not pass a variable to replace, we have to pass a regular expression - if we want to use a variable to replace we have to convert it to regularexpression.

  11. Full Zip Hoody

    Full Zip Hoody New Member

    "we should never use eval for any purpose in our code, be it dynamic variable access, or dynamic code execute or the likes there is always a workaround" true

Share This Page