javascriptfunction-constructor

declaring function with new keyword and self invoke it in javascript


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?


Solution

  • 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