Benchmark: template literal vs array.join vs string.concat vs the + operator

Script Preparation code:

var a = 'a';
var b = 'b';
var c = 'c';
var abc = [a,b,c];

Tests:

template literal
for (let n = 0; n < 1000; n++) { return `${a} ${b} ${c}`; }
array join
for (let n = 0; n < 1000; n++) { return abc.join(' '); }
string concat
for (let n = 0; n < 1000; n++) { return ''.concat(a, ' ', b, ' ', c); }
the + operator
for (let n = 0; n < 1000; n++) { return a + ' ' + b + ' ' + c; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
template literal
array join
string concat
the + operator

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The test compares four different approaches to concatenate strings: template literals, array join, string concatenation using the `concat()` method, and the addition operator (`+`).

**What is being tested?**

In each test case, a loop runs 1000 times, performing the specified operation on three string variables: `a`, `b`, and `c`. The goal is to measure which approach performs better in terms of execution speed.

**Options compared:**

1. **Template literal**: Using template literals (e.g., `${a} ${b} ${c}`) to concatenate strings.
2. **Array join**: Using the `join()` method on an array containing the string variables (e.g., `abc.join(' ')`).
3. **String concatenation using `concat()`:** Using the `concat()` method to concatenate strings (e.g., `''.concat(a, ' ', b, ' ', c)`).
4. **The addition operator (`+`)**: Using the addition operator to concatenate strings (e.g., `a + ' ' + b + ' ' + c`).

**Pros and cons of each approach:**

1. **Template literals:**
	* Pros: Readable, concise, and efficient.
	* Cons: May not be supported in older browsers or environments.
2. **Array join:**
	* Pros: Easy to implement and works well with arrays.
	* Cons: Can be slower than other approaches due to the overhead of creating an array.
3. **String concatenation using `concat()`:**
	* Pros: Works well with arrays, but may not be as efficient as template literals or string addition.
	* Cons: Requires more code and can lead to performance issues if used excessively.
4. **The addition operator (`+`):**
	* Pros: Lightweight and easy to use.
	* Cons: Can result in slower performance due to the creation of intermediate strings.

**Library usage**

None of the test cases explicitly uses a library, but they do rely on the `join()` method, which is a built-in JavaScript method for joining arrays of strings into a single string.

**Special JS feature or syntax**

The template literal approach (`${a} ${b} ${c}`) uses a special syntax introduced in ECMAScript 2015 (ES6). This syntax allows for more readable and efficient string concatenation.

**Benchmark results**

The latest benchmark results show that the array join method is currently the fastest, followed closely by the template literal approach. The string concatenation using `concat()` method comes third, while the addition operator (`+`) performs the worst due to its overhead.

**Other alternatives**

If you're looking for alternative approaches to concatenate strings in JavaScript, consider:

1. Using a library like Lodash's `join` function or Underscore.js's `template` function.
2. Employing a more functional programming approach using methods like `reduce()` or `map()`.
3. Utilizing string interpolation techniques, such as using CSS template literals (if supported by your environment).

Keep in mind that the choice of approach ultimately depends on your specific use case and performance requirements.

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/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
template literal	8114177.0 Ops/sec
array join	10188394.0 Ops/sec
string concat	7599967.5 Ops/sec
the + operator	8274288.0 Ops/sec

Related benchmarks:

template literal vs array.join vs string.concat vs the + operator (version: 0)

Comparing performance of: template literal vs array join vs string concat vs the + operator

Created: one year ago by: Guest

Jump to the latest result

template literal

array join

string concat

the + operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):