Evaluating eval

In a compiled language like C# and VB.NET, it is difficult to create and use code dynamically. The .NET Framework provides the CodeDOM (code document object model) classes for defining functionality and then producing the equivalent code, but this is not typically employed during code execution, because of its difficulty. JavaScript is dynamic in that it allows types to be created and modified on the fly. Furthermore, it natively supports the ability in the eval function to have any arbitrary script executed. It functions just as if it were a predefined piece of code. This means that you can easily write code that uses runtime values during code execution to create new code that is then executed. Essentially, you can create and execute code on the fly based on other input and variables.

Variable assignments can be based on any runtime condition and used elsewhere in JavaScript code. In Listing 3-17 (eval.htm), I assign some names to variables. I then create a string which is a piece of code that aggregates the values into a single variable and then displays that variable. Note that the values are pulled together into a piece of code that will use them all. This is distinctly different from having a piece of code that combines strings. The variables happen to be strings, but the eval statement is simply executing a piece of code passed to it as a string.

Listing 3-17

  <script type="text/javascript"> var aName = "Heather"; var anotherName = "Josh"; var yetAnotherName = "Kelley"; var stopAlready = "and Adam"; var someCode = "var names = '" + aName + ", " + anotherName + ", " + yetAnotherName + ", " + stopAlready + "'"; var moreCode = "eval(someCode); alert(names);"; function showNames() {     eval(moreCode); } showNames (); </script>  

Of course, just gathering some strings together and displaying them can be accomplished without the use of the eval function. But if you find yourself iterating over a collection in code where you are writing repetitive code in a pattern, consider whether eval might make the code easier to read and maintain. The eval function is a powerful way to execute any arbitrary JavaScript code on the fly. In this example, the call to showNames results in performing an eval on the moreCode variable, which in turn evals the variables and displays the values. It’s a convoluted way to get the job done, but the point is that you can compose code based on dynamic values.

eval does not come without tradeoffs. Code executed with eval is generally slower than code run directly. Having code that runs other code is a level of indirection that comes at a price. Numerous articles and blog posts advocate never using eval at all. Not only is performance a concern, but security comes into play as well. It is very tempting to use eval to operate on user input, but user input cannot be trusted. In the confines of the browser sandbox, much of what a user might try to do wouldn’t reveal anything interesting, but treating user input as trusted code and executing it can open all sorts of unforeseen security concerns. Generally, you should never use eval on user input.

One common use of eval is to access fields of an object. Instead of calling eval("something." + someField), you can usually switch to using something["someField"] instead. This is generally more intuitive for others to read, easier to maintain, and faster in the browser.