Benchmark: template string vs json stringify array vs json stringify object

Tests:

template string
const a = 'LET IT'; const b = ' SNOW'; `${a}${b}`
JSON.stringify array
const a = 'LET IT'; const b = ' SNOW'; JSON.stringify([a,b]);
JSON.stringify object
const a = 'LET IT'; const b = ' SNOW'; JSON.stringify({a,b});

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 runs

template string

161.0M/s

JSON.stringify array

9.0M/s

JSON.stringify object

7.1M/s

Fastest: template string (22.8x faster)

View exact numbers

✓ template string: 161,005,760 ops/sec
• JSON.stringify array: 9,003,158 ops/sec
• JSON.stringify object: 7,074,654 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
template string
JSON.stringify array
JSON.stringify object

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.127 Safari/537.36 OPR/60.3.3004.55692

Browser/OS: Opera 60 on Linux

View result in a separate tab

template string

93.7M/s

JSON.stringify array

256K/s

JSON.stringify object

203K/s

View exact numbers

Test name	Executions per second
✓ template string	93,713,312 Ops/sec
JSON.stringify array	255,905 Ops/sec
JSON.stringify object	202,542 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 JSON data and explain what is being tested, compared, and analyzed in the benchmark.

**Benchmark Definition**

The benchmark definition is a JSON object that describes the test case. In this case, there are three test cases:

1. **Template String**: The first test case uses template strings to concatenate two string literals: "LET IT" and " SNOW". The `${a}${b}` syntax is used to insert the values of `a` and `b` into a new string.
2. **JSON.stringify array**: The second test case uses the `JSON.stringify()` method to convert an array containing two string literals (`a` and `b`) into a JSON string.
3. **JSON.stringify object**: The third test case uses the `JSON.stringify()` method to convert an object with two properties (`a` and `b`) into a JSON string.

**Comparison**

The benchmark is comparing the performance of these three approaches:

* Template strings
* Converting an array to a JSON string using `JSON.stringify()`
* Converting an object to a JSON string using `JSON.stringify()`

**Pros and Cons**

Here's a brief analysis of each approach:

1. **Template Strings**: This approach is efficient because it avoids the overhead of creating a new JSON string. However, it may not be as readable or maintainable for complex expressions.
2. **Converting Array to JSON String**: Using `JSON.stringify()` on an array can lead to slower performance because JavaScript needs to serialize each element in the array, which can result in more characters being written to the DOM.
3. **Converting Object to JSON String**: Similarly, using `JSON.stringify()` on an object can also lead to slower performance because it needs to serialize each property-value pair.

**Library and Purpose**

There are no external libraries used in this benchmark besides the built-in `JSON` object.

**Special JavaScript Feature or Syntax**

The template string syntax (`${a}${b}`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for more concise and expressive string concatenation. Other than that, no special features or syntax are used in this benchmark.

**Other Alternatives**

If you need to concatenate strings in a similar way to template strings, you can use the `+` operator or other string formatting methods like **strings.format()** (available in some older JavaScript engines).

However, for more complex expressions or when you want a more readable and maintainable syntax, consider using libraries like [lodash](https://www.lodash.com/) or [string-punctuation](https://github.com/sindresorhus/string-punctuation), which provide alternative string concatenation methods.

**Benchmark Result Interpretation**

The benchmark result shows the execution rate (ExecutionsPerSecond) for each test case. In this case, the template string approach is the fastest, followed by the object conversion to a JSON string. The array conversion to a JSON string is slower than both template strings and objects.

Keep in mind that these results may vary depending on your specific JavaScript engine, browser, or system configuration.

template string vs json stringify array vs json stringify object (version: 0)

Comparing performance of: `template string vs JSON.stringify array vs JSON.stringify object`

Created: 5 years ago by: Guest

Go to the latest result

template string

JSON.stringify array

JSON.stringify object

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

template string vs json stringify array vs json stringify object (version: 0)

Comparing performance of: template string vs JSON.stringify array vs JSON.stringify object

Created: 5 years ago by: Guest

Go to the latest result

template string

JSON.stringify array

JSON.stringify object

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 24 runs

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: `template string vs JSON.stringify array vs JSON.stringify object`