Workarounds for JavaScript "eval"

pradeep's Avatar author of Workarounds for JavaScript "eval"
Contributed by ()
This is an article on Workarounds for JavaScript "eval" in JavaScript and AJAX.
Rated 5.00 By 8 users

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:

Code: JavaScript
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:

Code: JavaScript
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.

Code: JavaScript
var myCode = 'alert("Howdy?");';
 eval(myCode);

Now let's try the non-eval approach,

Code: JavaScript
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.
Go4Expert Founder
17Oct2008,09:15   #3
shabbir's Avatar
Start Voting for article of the month for September 2008
Newbie Member
3Dec2008,11:45   #4
amitvjog's Avatar
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
Newbie Member
4Dec2008,00:43   #5
vol7ron's Avatar
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
);
}
Newbie Member
4Dec2008,00:51   #6
vol7ron's Avatar
I found that the following will work:
Code:
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.
Newbie Member
4Dec2008,01:04   #7
vol7ron's Avatar
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
Banned
30Jun2009,15:04   #8
gkumar's Avatar
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.
Go4Expert Member
6Jul2009,19:21   #9
David Michael's Avatar
Quote:
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.
Light Poster
9Feb2010,17:08   #10
elizas's Avatar
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
Page 1 of 2
1
2