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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button: