Benchmark: string += vs array joining vs template strings

Tests:

+=
var str = '' var chars = 'abcdefghijklmnoprstuwxyz' while (str.length < 100) str += chars[ Math.floor( Math.random() * chars.length ) ]
array joining
var strarr = [] var chars = 'abcdefghijklmnoprstuwxyz' while (strarr.length < 100) strarr.push(chars[ Math.floor( Math.random() * chars.length ) ]) var str = strarr.join('')
template strings
var str = '' var chars = 'abcdefghijklmnoprstuwxyz' while (str.length < 100) str = `${str}${chars[ Math.floor( Math.random() * chars.length ) ]}`

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
+=
array joining
template strings

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:72.0) Gecko/20100101 Firefox/72.0

Browser/OS: Firefox 72 on Linux

View result in a separate tab

Test name	Executions per second
+=	448047.9 Ops/sec
array joining	319155.3 Ops/sec
template strings	455964.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark measures the performance of three different ways to concatenate strings in JavaScript:

1. `string +=`
2. Array joining using `join()`
3. Template literals (`${}`)

**Options Compared**

Each option has its own pros and cons:

* **`string +=`**: This approach is simple and widely supported, but it's also inefficient because each concatenation creates a new string object in memory.
	+ Pros: Easy to implement, works well for small strings.
	+ Cons: Slow, memory-intensive.
* **Array joining using `join()`**: This approach uses an array to store characters and then joins them together. It's more efficient than `string +=` because it avoids creating multiple string objects in memory.
	+ Pros: Efficient, reduces memory allocation.
	+ Cons: May have higher overhead due to the use of arrays and functions.
* **Template literals (`${}`)**: This approach uses a template literal to create a new string object that includes the concatenated characters. It's more efficient than `string +=` because it avoids creating multiple string objects in memory and can handle expressions inside the string.
	+ Pros: Efficient, easy to read and write, supports expressions inside the string.
	+ Cons: May have higher overhead due to the use of template literals.

**Library Usage**

None of the options require a specific library, but they may rely on built-in JavaScript features or methods.

* **Array joining using `join()`**: This option uses the `join()` method, which is a built-in JavaScript method.
* **Template literals (`${}`)**: This option uses template literals, which are a feature introduced in ECMAScript 2015 (ES6).

**Special JS Features**

None of the options use special JavaScript features or syntax that would require additional explanation.

**Alternative Approaches**

Other approaches to concatenating strings in JavaScript include:

* Using `concat()` method: This approach is similar to array joining using `join()`, but it uses the `concat()` method instead.
* Using string interpolation with backticks (`): This approach is similar to template literals, but uses backticks (`) instead of curly brackets (`{}`).

Example benchmark code for these alternative approaches:
```javascript
// Concat()
var str = '';
while (str.length < 100) str += chars[ Math.floor( Math.random() * chars.length ) ];

// String interpolation with backticks
var str = ``;
while (str.length < 100) str += chars[ Math.floor( Math.random() * chars.length ) ];
```
Keep in mind that these alternative approaches may have similar performance characteristics to the options compared, but their exact behavior might vary depending on the specific JavaScript engine and environment used.

Related benchmarks:

string += vs array joining vs template strings (version: 0)

Comparing performance of: += vs array joining vs template strings

Created: 4 years ago by: Guest

Jump to the latest result

+=

array joining

template strings

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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