JavaScript Exploration: eval() is the 'devil'

If you use eval() in your current code, remember the mantra "eval() is the devil". This method accepts any string and processes it as JavaScript code. When the code in question is known in advance (not determined at runtime), there is no reason to use eval(). If the code is generated dynamically at runtime, there is a better way to achieve the same goal without using eval. For example, it would be better and simpler to access dynamic properties using square bracket notation:

// 反面示例
var property = "name";
alert(eval("obj." + property));
 
// 更好的
var property = "name";
alert(obj[property]);

Using eval() also brings security risks, because the code being executed (e.g. from the network) may have been tampered with. This is a very common negative lesson when dealing with JSON responses from Ajax requests. In these cases, it is best to use JavaScript built-in methods to parse the JSON response to ensure safety and efficiency. If the browser does not support JSON.parse(), you can use the library from JSON.org.

It is also important to remember that passing strings to the setInterval(), setTimeout() and Function() constructors, in most cases, is similar to using eval(), so avoid it. Behind the scenes, JavaScript still needs to evaluate and execute the strings you pass to the program:

// 反面示例
setTimeout("myFunc()", 1000);
setTimeout("myFunc(1, 2, 3)", 1000);
 
// 更好的
setTimeout(myFunc, 1000);
setTimeout(function () {
   myFunc(1, 2, 3);
}, 1000);

Using the new Function() construct is similar to eval() and should be approached with caution. This can be a powerful construct, but is often misused. If you absolutely must use eval(), you may consider using new Function() instead. There is a small potential benefit, because the code evaluation in the new Function() operates in the local function scope, so any variables defined by var that are evaluated in the code will not automatically become global variables. Another way to prevent automatic global variables is to wrap the eval() call into an immediate function.

Consider the following example, where only un pollutes the namespace as a global variable.

console.log(typeof un);     // "undefined"
console.log(typeof deux);   // "undefined"
console.log(typeof trois);  // "undefined"
 
var jsstring = "var un = 1; console.log(un);";
eval(jsstring);             // logs "1"
 
jsstring = "var deux = 2; console.log(deux);";
new Function(jsstring)();   // logs "2"
 
jsstring = "var trois = 3; console.log(trois);";
(function () {
   eval(jsstring);
}()); // logs "3"
 
console.log(typeof un);     // number
console.log(typeof deux);   // "undefined"
console.log(typeof trois);  // "undefined"

Another difference between eval() and Function constructs is that eval() can interfere with the scope chain, while Function() is more secure. No matter where you execute Function(), it only sees the global scope. Therefore, it can effectively avoid local variable pollution. In the following example, eval() can access and modify variables in its outer scope, which Function cannot do (note that using Function and new Function are the same).

(function () {
   var local = 1;
   eval("local = 3; console.log(local)"); // logs "3"
   console.log(local); // logs "3"
}());
 
(function () {
   var local = 1;
   Function("console.log(typeof local);")(); // logs undefined
}());