How to create a function from a string in JavaScript ?

The task is to create a function from the string given in the format of function. Here are few techniques discussed with the help of JavaScript.

Approach 1:

Use the Function() Constructor to create a function from the string.
It accepts any number of arguments(in form of string). Last one should be the body of the function.
In this example, Only the body of the function is passed which is returning a value.

Example 1: This example uses approach as discussed above

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        create a function from a string in JavaScript  
    </title> 
</head> 
  
<body style="text-align:center;" id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP"
       style="font-size: 15px; 
              font-weight: bold;"> 
    </p> 
    <button onclick="GFG_Fun()"> 
        Click Here 
    </button> 
    <p id="GFG_DOWN"
       style="color:green; 
              font-size: 20px; 
              font-weight: bold;"> 
    </p> 
    <script> 
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var func = 'return "This is return value";'; 
        up.innerHTML =  
          "Click on the button to create "+ 
          "function from string.<br>FUNCTION - '"  
        + func + "'"; 
        
        // Till this point we can use 'func' as function. 
        function GFG_Fun() { 
            var func2 = Function(func);  
          // Now 'func' can be used as function. 
            down.innerHTML = func2(); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Approach 2:

Use the eval() method to create a function from the string.
It accepts the function in the form of string and converts it to JavaScript function.
In this example, It takes 2 arguments and returning the sum of both numbers.

Example 2: This example uses approach as discussed above.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        create a function from a string in JavaScript 
    </title> 
</head> 
  
<body style="text-align:center;"
      id="body"> 
    <h1 style="color:green;">   
            GeeksForGeeks   
        </h1> 
    <p id="GFG_UP" 
       style="font-size: 15px; 
              font-weight: bold;"> 
    </p> 
    <button onclick="GFG_Fun()"> 
        Click Here 
    </button> 
    <p id="GFG_DOWN" 
       style="color:green; 
              font-size: 20px;  
              font-weight: bold;"> 
    </p> 
    <script> 
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var str = "var func = function (a, b) { return a + b; };"; 
        up.innerHTML =  
          "Click on the button to create "+ 
          "function from string.<br>FUNCTION - '" + str + "'"; 
        
        // Till this point we can use 'func' as function. 
        function GFG_Fun() { 
          // converting the string to function. 
            eval(str);  
            down.innerHTML = func(2, 5); 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Recommended Posts: