Workarounds for JavaScript "eval"

Author

pradeep ( Team Leader )

Yet to provide details about himself

All articles By pradeep

Recent Articles

• SEO Friendly Drop Down Menu Using JQuery, Started by shabbir in HTML/DHTML - JavaScript/VBScript
• Footer SlideUp For Any Website and Any AutoResponder, Started by shabbir in HTML/DHTML - JavaScript/VBScript
• How to Load Advertisements Asynchronously, Started by shabbir in HTML/DHTML - JavaScript/VBScript
• How to Have Double Color Border Elements?, Started by shabbir in HTML/DHTML - JavaScript/VBScript
• VB Script to Compare Two Excel Files with Multiple Tabs, Started by naimish in HTML/DHTML - JavaScript/VBScript

Similar Articles

Introduction

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?");';
 eval(myCode);

Now let's try the non-eval approach,

var myCode = 'alert("Howdy?");';
 var myFucn = new Function(myCode);
 myFucn();

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.

[shabbir]

Nominated for article of the month for September 2008

[shabbir]

Start Voting for article of the month for September 2008

[amitvjog]

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

Regards,
Amit Jog

[vol7ron]

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) {
return;
}
}
}
function init(){
replace = "getObjById('outputID').innerHTML='hello';";
attachEventHandlers(document.links[0]
, 'click'
, function (replace){}
, false
);
}

[vol7ron]

I found that the following will work:

function init(){
   replace = "getObjById('outputID').innerHTML='hello';";
   replace = new Function(replace);
   attachEventHandlers(document.links[0]
      , '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.

[vol7ron]

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.

Amit,
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,
vol7ron

[gkumar]

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.

[David Michael]

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

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

[elizas]

Hi,
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.

thanks
Eliza