Benchmark: Array.prototype.concat vs unshift for joining two arrays

Tests:

immutable with concat
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ] var b = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ] var other = a.concat(b)
direct mutation with splice + spread
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ] var b = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ] a.unshift(b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
immutable with concat
direct mutation with splice + spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Windows

View result in a separate tab

Test name	Executions per second
immutable with concat	10557820.0 Ops/sec
direct mutation with splice + spread	12395495.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 the provided benchmark.

**What is tested?**

The benchmark tests two approaches for joining two arrays in JavaScript:

1. `concat()`: This method creates a new array by concatenating the elements of two or more existing arrays.
2. `unshift() + spread syntax (`**: This approach involves adding the second array to the first using the `unshift()` method and then spreading its elements into the resulting array.

**Options compared**

The benchmark compares these two approaches:

* **Pros of `concat()`**:
	+ Create a new, independent copy of the joined array.
	+ Can be faster for large arrays since it avoids mutating the original array.
	+ More explicit and predictable behavior.
* **Cons of `concat()`**:
	+ Creates a new object, which can lead to memory allocation overhead.
	+ May not be suitable for very large datasets due to memory constraints.

* **Pros of `unshift() + spread syntax`**:
	+ Mutates the original array (if desired), avoiding the need for an additional copy.
	+ Can be faster for small to medium-sized arrays since it avoids creating a new object.
	+ More concise and expressive syntax.
* **Cons of `unshift() + spread syntax`**:
	+ Mutates the original array, which might not be desirable in some cases.
	+ May lead to unexpected side effects if not used carefully.

**Library usage**

There is no specific library mentioned in this benchmark. The tests only use built-in JavaScript methods and syntax.

**Special JS features or syntax**

The benchmark uses the spread syntax (`...`) introduced in ECMAScript 2018 (ES2018). This feature allows for more concise array expressions and has become a standard part of modern JavaScript.

**Other alternatives**

If you wanted to test these approaches using alternative methods, here are some options:

* Using `Array.prototype.push()` instead of `concat()`
* Using `Array.prototype.splice()` instead of `unshift() + spread syntax`

However, keep in mind that `concat()` and the spread syntax are more efficient and concise ways to join arrays in modern JavaScript.

Related benchmarks:

Array.prototype.concat vs unshift for joining two arrays (version: 0)

Comparing performance of: immutable with concat vs direct mutation with splice + spread

Created: 3 years ago by: Guest

Jump to the latest result

immutable with concat

direct mutation with splice + spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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