Benchmark: .join vs string builder vs string concatenation

Script Preparation code:

var string1 = 'string1';
var string2 = 'string2';

Tests:

join
var string3 = [string1, string2].join('');
string builder
var string3 = `${string1}${string2}`;
string concatenation
var string3 = string1 + string2;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
join
string builder
string concatenation

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
join	31722262.0 Ops/sec
string builder	250613536.0 Ops/sec
string concatenation	264125936.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what's being tested in this benchmark.

The provided JSON represents a JavaScript microbenchmark that compares three different approaches to concatenate strings: string concatenation, string builder (using template literals), and `join()` method.

**String Concatenation**

In this approach, strings are concatenated using the `+` operator. For example:
```javascript
var string3 = string1 + string2;
```
Pros:

* Widely supported in most browsers
* Simple to implement

Cons:

* Can be slow for large strings due to multiple DOM manipulations
* May lead to memory leaks if not used carefully

**String Builder (Template Literals)**

In this approach, template literals are used to build the string. Template literals allow you to embed expressions inside string literals using backticks (`). For example:
```javascript
var string3 = `${string1}${string2}`;
```
Pros:

* Fast and efficient for large strings
* Concise syntax

Cons:

* Only supported in modern browsers (from Chrome 37 onwards)
* May not work as expected in older browsers or with certain encoding schemes

**Join() Method**

In this approach, the `join()` method is used to concatenate an array of strings. For example:
```javascript
var string3 = [string1, string2].join('');
```
Pros:

* Fast and efficient for large arrays
* Widely supported in most browsers

Cons:

* May lead to performance issues if not used carefully (e.g., with very large arrays)
* Can be slower than template literals for small strings

Now, let's take a look at the individual test cases:

1. **Join**: This test case measures the performance of using the `join()` method to concatenate two strings.
2. **String Builder**: This test case measures the performance of using template literals to build a string from two input strings.
3. **String Concatenation**: This test case measures the performance of using the `+` operator to concatenate two strings.

The benchmark results show that:

* String concatenation is the slowest approach, followed by join(), and then string builder (using template literals).
* The order of performance may vary depending on the browser and device platform.

Other alternatives for concatenating strings in JavaScript include using the `concat()` method or the `+=` operator. However, these approaches are not explicitly tested in this benchmark.

It's worth noting that the choice of concatenation approach can have a significant impact on performance, especially when dealing with large amounts of data. In general, it's recommended to use template literals (string builder) for building strings, as they provide a fast and efficient way to concatenate strings while also being concise and readable.

Related benchmarks:

.join vs string builder vs string concatenation (version: 0)

Comparing performance of: join vs string builder vs string concatenation

Created: 5 years ago by: Guest

Jump to the latest result

join

string builder

string concatenation

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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