Benchmark: Array join vs string template - Js

Script Preparation code:

var str = "Hello World"
var newStr = "Goodbye"
var start = 5

Tests:

Array
const foo = [ str, newStr, start ].join('|')
template literal
const foo = `${str}|${newStr}|${start}`

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array
template literal

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Browser/OS: Chrome 142 on Windows

View result in a separate tab

Test name	Executions per second
Array	15276647.0 Ops/sec
template literal	137034656.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail.

**Benchmark Description:**

The benchmark measures the performance difference between two approaches to concatenate strings: using the `join()` method with an array and using template literals.

**Options Compared:**

There are two options being compared:

1. **Array join**: This approach uses the `join()` method on an array of strings, where the elements of the array are concatenated together with a specified separator (in this case, the pipe character `|`).
2. **Template literal**: This approach uses template literals, which allow you to embed expressions inside string literals using backticks (`).

**Pros and Cons:**

* **Array join**:
	+ Pros: More readable, allows for easy modification of the separator.
	+ Cons: Can be slower due to the overhead of iterating over the array elements.
* **Template literal**:
	+ Pros: Faster, more concise, and expressive.
	+ Cons: Less readable for complex expressions.

**Library and Special JS Features:**

There is no specific library being used in this benchmark. However, template literals are a feature introduced in ECMAScript 2015 (ES6) that allows you to embed expressions inside string literals using backticks (`).

**Other Considerations:**

* The `join()` method can be optimized by the browser's engine, which might affect its performance.
* Template literals are often faster because they don't require the overhead of concatenating strings using the `+` operator.

**Alternative Approaches:**

1. **Using `concat()`**: Another approach to concatenate an array of strings would be to use the `concat()` method on the array, like this: `[str].concat([newStr]).concat([start])`. However, this approach is likely to be slower than both `join()` and template literals.
2. **Using `+` operator**: A third approach would be to concatenate the strings using the `+` operator, like this: `str + '|' + newStr + '|' + start`. This approach can be slow due to the overhead of creating intermediate strings.

**Benchmark Preparation Code:**

The benchmark preparation code sets up some variables:
```javascript
var str = "Hello World";
var newStr = "Goodbye";
var start = 5;
```
These variables are used in both test cases.

**Individual Test Cases:**

There are two test cases:

1. **Array join**: The first test case uses the `join()` method to concatenate the strings, like this:
```javascript
const foo = [str, newStr, start].join('|');
```
2. **Template literal**: The second test case uses template literals to concatenate the strings, like this:
```javascript
const foo = `${str}|${newStr}|${start}`;
```
These two approaches are compared in terms of their performance.

Related benchmarks:

Array join vs string template - Js (version: 0)

Comparing performance of: Array vs template literal

Created: 3 years ago by: Guest

Jump to the latest result

Array

template literal

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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