These 2 function definitions have different behavior

Question

Can someone explain why these 2 functions behave differently.

Snippet 1:

function operate1(operator) {
 return function(x, y) {
 return x + operator + y;
 }
}

Snippet 2:

function operate2(operator) {
 return new Function("x", "y", "return x " + operator + " y;");
}

Usage:

adder1 = operate1("+");
adder2 = operate2("+");
adder1(5, 3); // returns "5+3"
adder2(5, 3); // returns 8

I am particularly curious of why operate2 evaluated the arithmetic expression when I thought it would evaluate it as a string at first glance. Does this have something to do with it being defined as a Function Object with the new operator?

• Tushar: Because return x + operator + y; is concatenating the operator

Answer 1

The first does string concatenation due to the operator being a string

return x + "+" + y;

The second performs an evaluation of the content because that is how new Function works - the result is similar to eval but have a look at the differences here: Are eval() and new Function() the same thing?

So the statement

new Function("x", "y", "return x " + operator + " y;");

has the "return x " + operator + " y;" part evaluated

Here is the second version behaving like the first

function operate2(operator) {
 return new Function("x", "y", "return x +'" + operator + "'+ y;");
}
var adder2 = operate2("+");
alert(adder2(5, 3))

• krato: Isn't it the same for the second one as well? It should have evaluated as "return x " + "+" + " y;" where "+" is a string too.
• mplungjan: No, new Function() has the almost the same functionality as eval under the hood
• krato: is there a documentation that supports your statement that it performs eval on the last argument?
• mplungjan: Have a look at the link I gave. It is not performing an eval, but the string is evaluated
• mplungjan: I updated the answer to include the string version in adder2

Answer 2

It's following the exact description in this documentation on the Mozilla site: Function - JavaScript

The constructor signature:

new Function ([arg1[, arg2[, ...argN]],] functionBody)

functionBody is to be a string containing the JavaScript statements comprising the function definition.

---

What if you actually wanted adder2 to return a string? This would do it:here's some code that constructs code that generates the expression.

function operate2(operator) {
 return new Function("x", "y", "return '' + x + '" + operator + "' + y;");
}

• Andrew Shepherd: @krato - Please try again - I've gotten it to work: jsfiddle.net/2g9axxhs