Benchmark: eval vs Function string interpolation

Script Preparation code:

var templ = "This is a ${model.type} interpolation example, to ${model.action} the difference between ${model.first} and ${model.second}!";

var model = {type: "string", action: "show", first: "eval", second: "Function"};

var func = new Function("model", "return `" + templ + "`;");

Tests:

eval
eval("`" + templ + "`");
new Function
func(model);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
eval
new Function

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
eval	18159792.0 Ops/sec
new Function	355581664.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark compares two approaches: using `eval()` and creating a new function with `Function` constructor, specifically in the context of string interpolation templating.

**Options Compared**

1. **eval()**: Evaluates a string as JavaScript code.
2. **Function constructor**: Creates a new function from a string, similar to `eval()` but with more control over the execution context and scope.

**Pros and Cons**

* **eval():**
	+ Pros:
		- Fast and efficient for simple expressions.
		- Can be convenient for quickly evaluating strings as JavaScript code.
	+ Cons:
		- Vulnerable to Code Injection attacks, as it can execute arbitrary code.
		- Limited control over the execution context and scope.
* **Function constructor:**
	+ Pros:
		- More secure than `eval()`, as it executes the code in a sandboxed environment.
		- Provides more control over the execution context and scope.
	+ Cons:
		- Can be slower than `eval()` for simple expressions, due to the overhead of creating a new function.
		- Requires more boilerplate code to set up the execution context.

**Library**

None explicitly mentioned in this benchmark. However, if we look at the provided test cases, we can infer that the `Function` constructor is used to create a new function from a string template.

**Special JS feature or syntax**

The benchmark uses string interpolation templating, which is a feature introduced in ECMAScript 2020 (ES2020). This allows you to embed expressions within strings using backticks (`) and curly braces `{}`. The `model` object is used to provide dynamic values for the interpolation.

**Other Alternatives**

If `eval()` or `Function` constructor are not suitable for this use case, other alternatives could be:

1. **Template literals**: A more modern approach to string interpolation, introduced in ECMAScript 2015 (ES6). It uses template literals with backticks (`) and curly braces `{}` to embed expressions within strings.
2. **String parsing libraries**: Such as `parse` or `json-stringify-safe`, which provide safer alternatives for evaluating or creating functions from strings.

In summary, the benchmark compares the performance of `eval()` and `Function` constructor in a specific use case: string interpolation templating with dynamic values. The choice between these two approaches depends on the trade-off between speed, security, and convenience.

Related benchmarks:

eval vs Function string interpolation (version: 0)

Compares how eval() compares to Function in some form of templating

Comparing performance of: eval vs new Function

Created: 6 years ago by: Guest

Jump to the latest result

eval

new Function

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):