Delving into the Distinction: Are eval() and new Function() Interchangeable in JavaScript?

Often in JavaScript, we encounter functions like eval() and new Function(). While their syntax may seem similar at first glance, a closer examination reveals fundamental differences in their behavior.

Consider the following single statement functions:

var evaluate = function(string) {
    return eval('('   string   ')');
}

var func = function(string) {
    return (new Function( 'return ('   string   ')' )());
}

console.log(evaluate('2   1'));
console.log(func('2   1'));

Are these two functions identical in their operations? Contrary to popular belief, they are not.

eval() vs. new Function()

• eval(): Interprets a string as a JavaScript expression within the current execution scope. It possesses the ability to access local variables.
• new Function(): Constructs a function object from a string containing JavaScript code. This function runs in a separate scope, isolating it from local variables.

To illustrate this difference, consider the following function:

function test1() {
    var a = 11;
    eval('(a = 22)');
    alert(a);            // alerts 22
}

In this example, eval() modifies the local variable 'a' within the test1() function, resulting in an alert of 22. However, if we were to use new Function('return (a = 22);')(), the local variable 'a' would remain unchanged.

Implications and Cautions

While both eval() and new Function() serve their purposes, it is crucial to note that eval() carries inherent security risks. Its ability to access local variables and potentially modify global scope can lead to unintended consequences.

As a result, it is generally advised to avoid using eval() unless absolutely necessary. Untrusted data passed into eval() can compromise the security of your application. Similarly, new Function() should be employed with caution when handling untrusted input.