Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Function() Constructor

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      Function() Constructor

      The Function() Constructor

      The JavaScript Function() constructor can dynamically create a function object at the run time. The functions created using Function() constructor have global scope only.
      The Function() constructor can be used to define the function at the run time, but you should use the Function() constructor with caution as it can lead to vulnerabilities in the code.
      We can pass multiple arguments to the Function() constructor. All arguments except the last argument are the names of the parameters in the new function to be created. The last argument is the function body.

      Syntax

      Following is the syntax to use the Function() constructor to create an object of the function in JavaScript
      const obj = new Function(arg1, arg2..., functionBody);
      The Function() constructor can be called with or without new keyword to create a new function object. All the parameters are JavaScript strings.

      Parameters

      • arg1, arg2... − These are arguments (optional) names that are used in function body. These are treated as the names of parameters in the function to be created.
      • functionBody − This argument contains the JavaScript statements comprising the function definition.

      Example

      In the example below, we have passed the 3 arguments to the Function() constructor. The first 2 arguments are arguments for the func() function, and the third is a body of the func() function.
      In the output, the func() function returns the multiplication of 5 and 7.
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            const func = new Function("p", "q", "return p * q");
            document.getElementById("output").innerHTML = 
            "The value returned from the function is: " + func(5, 7);
         </script>
      </body>
      </html>

      Output

      The value returned from the function is: 35

      Example

      In the example below, we passed the one argument to the Function() constructor. So, it considers it as the function body. All the parameters except the last one are optional.
      In the output, you can observe that the func() function returns the sum of 10 and 20.
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            const func = new Function("return 10 + 20");
            document.getElementById("output").innerHTML =
            "The value returned from the function is: " + func();
         </script>
      </body>
      </html>

      Output

      The value returned from the function is: 30

      Function Declaration or Function Expression as Parameter

      Creating function using Function constructor is less efficient than creating function using a function declaration or function expression and calling it within the code.
      We can write multiple statements in the functionBody parameter of the Function() constructor. All statements are separated by semicolons. We can create a function with function declaration or function expression and pass it as a statement in the <fucntionBody parameter.

      Example

      In this example, we defined a function sum with function expression and passed to the Function() constructor as a part of the parameter (functionBody). Here the return statement is required.
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            const add = new Function(
      	  "const sum = function (a, b) {return  a+ b};  return sum",
      	  )();    
            document.getElementById("output").innerHTML = add(5,10) // 15
         </script>
      </body>
      </html>

      Example

      In this example, we defined a function anonymous function with function declaration and passed to the Function() constructor as a part of the parameter (functionBody). Here the return statement at the end is not required.
      <html>
      <body>
         <p id = "output"> </p>
         <script>
            const sayHello = new Function(
      	  "return function (name) { return `Hello, ${name}` }",
      	  )();    
            document.getElementById("output").innerHTML = 
      	  sayHello("world"); // Hello, world
          </script>
      </body>
      </html>
      Please note that in both the examples above, the new Function is self-invoked.