How to transform a String into a function in JavaScript?


We have given a string and need to convert it into a function in JavaScript. Sometimes, we get mathematical or function expressions in the form of the string, and executing that expression, requires converting strings into the function expression. In this tutorial, we will learn different approaches to converting the given string into a functional or mathematical expression.

Use the eval() method

The eval() method takes the expression as a parameter and evaluates the expression. For example, if we pass the ‘2 + 2’ string as a parameter of the eval() method, it returns 4 as it evaluates the mathematical expression 2+2.

It also evaluates the function expression as like the mathematical expression.

Syntax

Users can follow the syntax below to use the eval() method to convert a string into a function in JavaScript.

eval("var func = () => { output.innerHTML = 'Hello Users!'; }";);
func(); 

In the above syntax, we have passed the function string as a parameter of the eval() method.

Example 1

In the example below, we created the string containing the function expression. The function expression prints the message on the webpage.

After that, we passed the string as a parameter of the eval() method, and then we have executed the func() function as we call the normal function.

The func() function gives the same output as the normal function.

<html>
<body>
   <h2>Using the <i> eval() </i> method to convert a string into the function expression in JavaScript. </h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let funcStr = "var func = () => { output.innerHTML = 'Hello Users!';}";
   eval(funcStr);
   func();
</script>
</html>

Example 2

In the example below, we have created the object, and getHeight property of the object contains the function in the string format

We have used the eval() method to evaluate the string value of the getHeight property and stored it inside the getHeight property again after converting the function string to expression.

After that, we executed the getHeight() function, which returns the height that we have stored in the height variable.

<html>
<body>
   <h2>Using the <i> eval() </i> method to convert a string into the function expression in JavaScript. </h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let object = {
      name: "Shubham",
      "getHeight": "function func() { return '6 Feet';}",
      age: 22,
   }
   object.getHeight = eval("(" + object.getHeight + ")");
   let height = object.getHeight();
   output.innerHTML += "The height is " + height + "<br/>";
</script>
</html>

Using the Function Constructor

The Function() constructor allows us to create a function from the string. The Function() constructor can take N parameters. The first N-1 parameter of the Function constructor() works as a parameter of the function to be created, and the Nth parameter is function expression

Syntax

Users can follow the syntax below to use the Function() constructor to create a function from the string.

let func = new Function(expression); 

In the above syntax, func is created using the Function() constructor. The expression is a string containing the function expression.

Example 3

In the example below, we have created the expression string. We also evaluate mathematical expression using the eval() method in the expression string.

After that, we invoked the func() function like the normal function, and users can observe the output

<html>
<body>
   <h2>Using the <i> Function() </i> constructor to convert a string into the function expression in JavaScript. </h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let expression = "output.innerHTML += 'The value of 10 + 10 is ' + eval(10 + 10);";
   let func = new Function(expression);
   func();
</script>
</html>

Example 4

We have passed the multiple parameters to the Function() constructor in the example below. The first three parameters work as a parameter of function expression passed as a fourth parameter.

We print the parameter values in the function expression. In the output, users can see that it prints the default values of parameters as we haven’t passed any parameters while invoking the concatString() function.

<html>
<body>
   <h2>Using the <i> Function() </i> constructor to convert a string into the function expression in JavaScript. </h2>
   <div id = "output"> </div>
</body>
<script>
   let output = document.getElementById('output');
   let expression = "output.innerHTML += 'The value of param1 + param2 + param3 is ' + param1 + param2 + param3;";
   let concatString = new Function("param1 = 'Welcome '", "param2 = 'To the '", "param3 = ' TutorialsPoint!'", expression);
   concatString();
</script>
</html>

In this tutorial, we learned to convert string to function expression using two different approaches. In the first approach, we have used the eval() method, which we can use to evaluate any expression in JavaScript.

In the second approach, we have used the Function constructor, which takes the function parameters and function expression as a parameter to create a new function.

Updated on: 16-Feb-2023

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements