declaring function with new keyword and self invoke it in javascript

Question

I came across a code that look like this:

 const tempFunc = exp => {
  return new Function(`return ${exp}`)()
 }

first question: is it self invoking the function and return it?. what does tempFunc return exactly?

second question: if we call the function:

let result=tempFunc('3+2')

the result is 5.how does it convert the string and calculate the result?

That is very much the same as `eval`, but evaluates a single expression (because of the `return`). WARNING: this single-expression thing can be bypassed, don't use with insecure input! — FZs, Dec 31 '20 at 16:04
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/Function — Bergi, Dec 31 '20 at 16:16

Nick · Accepted Answer · 2020-12-31T16:12:30.053

When you call tempFunc('3+2') it returns new Function("return 3+2")(), which will create a function (function() { return 3+2 };) and then call that function.

Conversely, if tempFunc looked like this:

const tempFunc = exp => {
  return new Function(`return ${exp}`);
 }

Then it would just return the new function uncalled and you'd have to call it separately: tempFunc('3+2')();

Function Constructor

The function constructor (new Function()) is pretty interesting; you can basically tell it what arguments to expect as the first n arguments and the final argument is the function body. In your example, there are no arguments to our new function, but we could create one that takes arguments:

const tempFunc = num => {
  return new Function('x', `return x + ${num}`)(2);
}

tempFunc(3);
// 5

likle · Answer 2 · 2020-12-31T16:12:42.113

In case the arrow functions are confusing for you, you can also write it similar like this:

 const tempFunc = function(exp) {
  const compiledFunc = new Function(`return ${exp}`)
  return compiledFunc()
 }

This:

new Function(`return ${exp}`)

creates a new Function object with the submitted string. The string ("3+2" in your example) is compiled as a function as if it was javascript code. This Function object can then be called as if it was a normal javascript Function. Thats what the two paranthesis do at the end of the line:

return new Function(`return ${exp}`)() // <-- these call it

So if you call that tempFunc it runs the string as javascript code and returns it, quite similar to what eval does.

declaring function with new keyword and self invoke it in javascript

2 Answers2

Function Constructor