Benchmark: template literal vs allocated array.join vs unallocated array.join vs string.concat vs the + operator

Script Preparation code:

var a = 'a';
var b = 'b';
var c = 'c';
var abc = [a,b,c];

Tests:

template literal
for (let n = 0; n < 1000; n++) { return `${a} ${b} ${c}`; }
array join
for (let n = 0; n < 1000; n++) { return abc.join(' '); }
string concat
for (let n = 0; n < 1000; n++) { return ''.concat(a, ' ', b, ' ', c); }
the + operator
for (let n = 0; n < 1000; n++) { return a + ' ' + b + ' ' + c; }
unallocated array join
for (let n = 0; n < 1000; n++) { return [a,b,c].join(' '); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
template literal
array join
string concat
the + operator
unallocated array join

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
template literal	141353216.0 Ops/sec
array join	17370126.0 Ops/sec
string concat	30776770.0 Ops/sec
the + operator	160425008.0 Ops/sec
unallocated array join	15734859.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark tests the performance of different ways to concatenate strings in JavaScript. The test case uses three string literals: `a`, `b`, and `c`. Each iteration of the loop concatenates these strings together using one of four methods:

1. Template literal (`${a} ${b} ${c}`)
2. Array join (`abc.join(' ')`)
3. String concat (using the `.concat()` method) (`''.concat(a, ' ', b, ' ', c)`)
4. The `+` operator (`a + ' ' + b + ' ' + c`)

The test also includes an additional variation with an unallocated array (`[a,b,c].join(' ')`), which is likely included to test the performance of this method without the overhead of creating a new array.

**Library and Functionality**

* No libraries are used in this benchmark.
* The only function being tested is the `join()` method, which is a part of the Array prototype in JavaScript.

**JavaScript Syntax and Features**

The benchmark uses template literals, which is a feature introduced in ECMAScript 2015 (ES6). Template literals allow you to embed expressions inside string literals using backticks (`) instead of double quotes ("").

**Options Compared**

* Template literal: `${a} ${b} ${c}` - This method creates a new string by concatenating the values of the variables `a`, `b`, and `c` together.
* Array join: `abc.join(' ')` - This method takes an array as input and returns a new string by concatenating the elements of the array together with the specified separator.
* String concat: `''.concat(a, ' ', b, ' ', c)` - This method uses the `.concat()` method to concatenate multiple values into a single string.
* The `+` operator: `a + ' ' + b + ' ' + c` - This method uses the `+` operator to concatenate multiple values together.

**Pros and Cons of Each Approach**

* Template literal:
	+ Pros: Efficient, readable, and concise.
	+ Cons: Only works in modern browsers (ES6+).
* Array join:
	+ Pros: Flexible, can handle arrays with multiple elements.
	+ Cons: Creates a new array object, which can be memory-intensive for large inputs.
* String concat:
	+ Pros: Compatible with older browsers, uses the `.concat()` method which is relatively fast.
	+ Cons: Less readable and more verbose than template literals or array join.
* The `+` operator:
	+ Pros: Fast and compatible with most browsers.
	+ Cons: Less readable and can lead to errors if not used carefully.

**Other Alternatives**

* Using the `String.prototype.format()` method (introduced in ECMAScript 5.1): This method allows you to embed expressions inside a string using placeholders, similar to template literals.
* Using the `Array.prototype.reduce()` method: This method can be used to concatenate an array of values into a single string.

It's worth noting that the performance differences between these methods are generally small and may not be noticeable in most use cases. However, this benchmark provides a controlled environment for testing the efficiency of different approaches, which can be useful for optimizing performance-critical code.

Related benchmarks:

template literal vs allocated array.join vs unallocated array.join vs string.concat vs the + operator (version: 0)

Comparing performance of: template literal vs array join vs string concat vs the + operator vs unallocated array join

Created: 3 years ago by: Registered User

Jump to the latest result

template literal

array join

string concat

the + operator

unallocated array join

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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