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?

Because `return x + operator + y;` is concatenating the operator — Tushar, Jul 14 '15 at 09:32

score 3 · Accepted Answer · edited May 23 '17 at 11:45

3

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))

edited May 23 '17 at 11:45

Community

1
1

answered Jul 14 '15 at 09:32

mplungjan

169,008
28
173
236

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

Andrew Shepherd · Answer 2 · 2015-07-14T09:55:01.993

1

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;");
}

edited Jul 14 '15 at 09:55

answered Jul 14 '15 at 09:37

Andrew Shepherd

44,254
30
139
205

@krato - Please try again - I've gotten it to work: http://jsfiddle.net/2g9axxhs/ – Andrew Shepherd Jul 14 '15 at 09:49

These 2 function definitions have different behavior

2 Answers2