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: 11 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

direct mutation with splice + spread

12.4M/s

immutable with concat

10.6M/s

View exact numbers

Test name	Executions per second
✓ direct mutation with splice + spread	12,395,495 Ops/sec
immutable with concat	10,557,820 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.

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

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

Created: 4 years ago by: Guest

Go 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):

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

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

Created: 4 years ago by: Guest

Go 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):

Related benchmarks

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