Benchmark: Array join vs string template

Script Preparation code:

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

Tests:

Array
const foo = [ str.slice(0, start), newStr, str.slice(start) ].join('')
template literal
const foo = `${str.slice(0, start)}${newStr}${str.slice(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: one month ago)

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

Browser/OS: Chrome 146 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array	26081266.0 Ops/sec
template literal	252759616.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two approaches to concatenate strings in JavaScript:

1. **Array join**: Using the `join()` method on an array of strings.
2. **String template literal**: Using template literals (introduced in ECMAScript 2015) to concatenate strings.

**Options Compared**

The two options are compared, with each option being tested separately. This allows for a fair comparison between the two approaches.

**Pros and Cons of Each Approach**

1. **Array join**:
	* Pros:
		+ Wide browser support (has been around since ECMAScript 5).
		+ Fast execution time.
	* Cons:
		+ Can be less readable than template literals.
		+ May not work as expected if the array contains non-string elements.
2. **String template literal**:
	* Pros:
		+ More readable and expressive than array join.
		+ Can handle more complex string concatenation scenarios (e.g., interpolating variables).
	* Cons:
		+ Requires ECMAScript 2015 support (older browsers may not work).

**Library/Feature Description**

The benchmark uses JavaScript's built-in `slice()` method, which is a standard library function that extracts a specified section of an array or string.

There are no special JS features or syntax used in this benchmark, except for the use of template literals, which was introduced in ECMAScript 2015.

**Other Alternatives**

Before template literals, developers could use other methods to concatenate strings, such as:

1. `+` operator (e.g., `str + newStr`).
2. Function calls with arguments (e.g., `function concat(a, b) { return a + b; }`).

However, these alternatives are less readable and expressive than template literals.

**Benchmark Preparation Code**

The preparation code sets up the benchmark by defining:

1. Two string variables (`str` and `newStr`) containing "Hello World" and "Goodbye", respectively.
2. A variable `start` with a value of 5, which is used to slice the strings.

The script prepares for execution by assigning these values.

**Individual Test Cases**

Each test case consists of a single benchmark definition:

1. **Array**: Tests the use of array join to concatenate the strings.
2. **Template literal**: Tests the use of string template literals to concatenate the strings.

These test cases are executed in separate runs, allowing for a direct comparison between the two approaches.

Related benchmarks:

Array join vs string template (version: 0)

Comparing performance of: Array vs template literal

Created: 5 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):