Benchmark: JSON.stringify array vs map + join (template and concat)

Script Preparation code:

var arr_small = Array.from({ length: 10 }).map((_, i) => `test_val${i}`);
var arr_big = Array.from({ length: 10000 }).map((_, i) => `test_val${i}`);

Tests:

JSON.stringify small
JSON.stringify(arr_small);
JSON.stringify big
JSON.stringify(arr_big);
array.join + string template small
`["${arr_small.map(x => String(x)).join('","')}"]`;
array.join + string template big
`["${arr_big.map(x => String(x)).join('","')}"]`;
array.join + string concat small
"[" + arr_small.map(x => String(x)).join(",") + "]";
array.join + string concat big
"[" + arr_big.map(x => String(x)).join(",") + "]";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify small
JSON.stringify big
array.join + string template small
array.join + string template big
array.join + string concat small
array.join + string concat big

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

JSON.stringify small

3.7M/s

array.join + string concat small

2.9M/s

array.join + string template small

2.7M/s

JSON.stringify big

3K/s

array.join + string concat big

3K/s

array.join + string template big

2K/s

View exact numbers

Test name	Executions per second
✓ JSON.stringify small	3,708,231 Ops/sec
array.join + string concat small	2,912,410 Ops/sec
array.join + string template small	2,672,629 Ops/sec
JSON.stringify big	3,308 Ops/sec
array.join + string concat big	3,114 Ops/sec
array.join + string template big	2,298 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 benchmark and explain what is being tested.

**Benchmark Description**

The benchmark measures the performance of three different approaches to convert an array of strings into a JSON string:

1. `JSON.stringify()`
2. `array.join` with template literals (string interpolation)
3. `array.join` with concatenation (`+`)

**Options Compared**

Here's a summary of what's being compared:

* **Template Literals**: Using template literals to convert the array of strings into a JSON string. This approach is more modern and concise, but its performance might be affected by the complexity of the expression.
* **Concatenation**: Converting each element in the array using `String()` and then joining them together with concatenation (`+`). This approach can lead to slower performance due to the overhead of converting strings to strings repeatedly.
* **String Interpolation**: Using template literals (string interpolation) to convert the array of strings into a JSON string. This approach combines the benefits of both template literals and concatenation, but its performance might still be affected by the complexity of the expression.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Template Literals**:
	+ Pros: More concise, readable, and modern.
	+ Cons: Might have slower performance due to the complexity of the expression.
* **Concatenation**:
	+ Pros: None notable.
	+ Cons: Can lead to slower performance due to string conversion overhead.
* **String Interpolation** (combining template literals and concatenation):
	+ Pros: Combines benefits of both, potentially faster than concatenation alone.
	+ Cons: Might still have slower performance due to the complexity of the expression.

**Library**

The benchmark uses the `Array.from()` method to create arrays from iterables. This is a modern JavaScript method that was introduced in ECMAScript 2015 (ES6).

**Special JS Feature or Syntax**

This benchmark doesn't use any special features or syntax beyond what's available in modern JavaScript (ECMAScript 2015 and later). However, it does rely on the `String()` function to convert each element in the array to a string.

**Other Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* Using `Array.prototype.map()` with a callback function to create an array of strings.
* Using `Array.prototype.forEach()` with a callback function to iterate over the array and concatenate strings manually.
* Using a library like Lodash or Ramda to simplify the string concatenation process.

Keep in mind that these alternatives might not be as concise or readable as the approaches used in this benchmark, but they can provide different trade-offs between performance, code size, and maintainability.

JSON.stringify array vs map + join (template and concat) (version: 1)

Comparing performance of: `JSON.stringify small vs JSON.stringify big vs array.join + string template small vs array.join + string template big vs array.join + string concat small vs array.join + string concat big`

Created: one year ago by: Registered User

Go to the latest result

JSON.stringify small

JSON.stringify big

array.join + string template small

array.join + string template big

array.join + string concat small

array.join + string concat big

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

JSON.stringify array vs map + join (template and concat) (version: 1)

Comparing performance of: JSON.stringify small vs JSON.stringify big vs array.join + string template small vs array.join + string template big vs array.join + string concat small vs array.join + string concat big

Created: one year ago by: Registered User

Go to the latest result

JSON.stringify small

JSON.stringify big

array.join + string template small

array.join + string template big

array.join + string concat small

array.join + string concat big

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `JSON.stringify small vs JSON.stringify big vs array.join + string template small vs array.join + string template big vs array.join + string concat small vs array.join + string concat big`