Benchmark: Array.prototype.concat vs Array.prototype.splice() 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 = b.concat(a)
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.splice(0, 0, ...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: 2 years ago)

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

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
immutable with concat	6603312.0 Ops/sec
direct mutation with splice + spread	3353176.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Definition:**
The benchmark compares two approaches for joining two arrays in JavaScript:

1. `Array.prototype.concat()`: This method creates a new array by concatenating two or more arrays.
2. `Array.prototype.splice()`: This method modifies the existing array by inserting one or more elements at a specified position.

**Options being compared:**

* `concat()` vs `splice()`
* Immutable approach (using `concat()`) vs mutable approach (using `splice()`)

**Pros and Cons of each approach:**

* **Concat()**
	+ Pros:
		- Creates a new array, leaving the original arrays unchanged.
		- Can be more predictable and easier to reason about.
	+ Cons:
		- Creates a new array object, which can lead to memory allocation overhead.
		- May be slower for large datasets due to the creation of a new array.
* **Splice()**
	+ Pros:
		- Modifies the original array in place, reducing memory allocation overhead.
		- Can be faster for large datasets since it only modifies the existing array.
	+ Cons:
		- Modifies the original array, which can lead to unexpected behavior if not used carefully.
		- Can be more error-prone due to the complexity of splice operations.

**Special considerations:**

* The benchmark uses a literal array of 24 "hello" elements for both test cases. This is likely done to minimize the impact of array size variability on the results.
* No special JavaScript features or syntax are being tested in this benchmark.

**Other alternatives:**
For joining two arrays, other approaches could include:

1. Using `Array.prototype.push()` and creating a new array.
2. Using `Array.prototype.slice()` to create a shallow copy of one of the arrays and then concatenating it with another array using `Array.prototype.concat()`.
3. Using a library like Lodash's `concat` function, which provides a more concise and readable way to concatenate arrays.

However, these alternatives are not being tested in this specific benchmark.

**Benchmark preparation code:**
The script preparation code is empty for both test cases, which means that the benchmark is likely relying on the default JavaScript engine or runtime environment to perform the tests.

Related benchmarks:

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

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

Created: 2 years ago by: Guest

Jump to the latest result

immutable with concat

direct mutation with splice + spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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