Benchmark: array.join vs string literal vs string concatenation

Script Preparation code:

var test = "bdahjsbfahjdfbahdf"
var test2 = "nfajkdsfnklruiefbruiefhqbgrhbgqlk"
var test3 = "abldfjbafbeirwubfejkwbfkwlfbbdabsjkdblKDBKAJBSDK"

Tests:

array.join
var res = [test, test2, test3].join(" ");
string literal
var finalString2 = `${test} ${test2} ${test3}`;
string concatenation
var finalString3 = test + " " + test2 + " " + test3;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array.join
string literal
string concatenation

Fastest: N/A

Slowest: N/A

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/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
array.join	5202176.0 Ops/sec
string literal	8382658.5 Ops/sec
string concatenation	8668269.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different ways to concatenate strings in JavaScript can be a useful benchmark.

**What is being tested?**

In this benchmark, three test cases are compared:

1. **String concatenation**: Using the `+` operator to concatenate strings.
2. **String literal**: Using template literals (`${}`) to concatenate strings.
3. **Array.join()**: Using the `join()` method on an array of strings to concatenate them.

**Options comparison**

Here's a brief overview of each option:

* **String concatenation**: This is the most basic way to concatenate strings in JavaScript. It works by adding two or more strings together using the `+` operator. However, it can lead to performance issues if done frequently, as it creates a new string object on each iteration.
* **String literal**: Template literals are a relatively new feature introduced in ECMAScript 2015 (ES6). They allow you to embed expressions inside string literals, making it easier to build strings with variables and other expressions. However, they may incur some overhead due to the need for parsing and compilation.
* **Array.join()**: This method is optimized for performance and can concatenate multiple strings in a single operation. It's particularly useful when working with arrays of strings.

**Pros and Cons**

Here are some pros and cons of each approach:

* **String concatenation**:
	+ Pros: Simple, easy to understand.
	+ Cons: Can lead to performance issues due to string creation on each iteration.
* **String literal**:
	+ Pros: More readable, can be useful for building complex strings.
	+ Cons: May incur overhead due to parsing and compilation.
* **Array.join()**:
	+ Pros: Optimized for performance, efficient when working with arrays of strings.
	+ Cons: May not be as readable or intuitive for some developers.

**Library usage**

None of the test cases uses any libraries explicitly. However, it's worth noting that template literals rely on a subset of JavaScript features and syntax (e.g., `${}`), which are built into the language and don't require external dependencies.

**Special JS feature**

The benchmark uses the following special JavaScript feature:

* **Template literals**: Introduced in ECMAScript 2015 (ES6), these allow you to embed expressions inside string literals using `${}`.

**Alternatives**

If you're looking for alternative ways to concatenate strings, here are a few options:

* Using `String.prototype.replace()` and concatenating strings: This method can be useful when working with regex patterns.
* Using `StringBuilder` or other library functions (not recommended in this benchmark): While not used in this example, some libraries like jQuery or React use `StringBuilder`-like APIs to concatenate strings.

Overall, the benchmark provides a useful comparison of three common ways to concatenate strings in JavaScript. Understanding these options can help developers choose the most efficient and readable approach for their specific use cases.

Related benchmarks:

array.join vs string literal vs string concatenation (version: 0)

Comparing performance of: array.join vs string literal vs string concatenation

Created: 2 years ago by: Guest

Jump to the latest result

array.join

string literal

string concatenation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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