Benchmark: Array.prototype.concat vs 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 = 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.splice(0, a.length, ...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: one year ago)

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

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

**What is being tested?**

The provided JSON represents two test cases for measuring the performance of joining two arrays in JavaScript: `Array.prototype.concat` and `splice`. The test cases are designed to compare the execution speed of these two approaches.

**Options compared:**

1. **Immutable with concat**: This approach uses the `concat()` method to create a new array by copying elements from one or more source arrays.
2. **Direct mutation with splice + spread**: This approach uses the `splice()` method to modify the existing array and then spreads the elements of another array into the modified array.

**Pros and Cons:**

1. **Immutable with concat**:
	* Pros:
		+ Creates a new, independent copy of the arrays, which can be beneficial for ensuring data integrity.
		+ Typically less mutable than direct modification methods.
	* Cons:
		+ Can result in unnecessary memory allocations and copies if used extensively.
		+ May lead to performance issues due to the overhead of creating new arrays.
2. **Direct mutation with splice + spread**:
	* Pros:
		+ Can be more efficient than immutable approaches, as it modifies the existing array without creating a new copy.
		+ Reduces memory allocations and copies, resulting in better performance.
	* Cons:
		+ Modifies the original array, which can lead to unexpected behavior if not handled carefully.
		+ May result in slower execution due to the overhead of modifying arrays.

**Library:**

None is explicitly mentioned in the provided JSON. However, it's worth noting that `Array.prototype.concat()` and `Array.prototype.splice()` are native JavaScript methods, so no additional libraries are required.

**Special JS feature or syntax:**

There are none mentioned in this specific benchmark. The test cases use standard JavaScript features and syntax.

**Other alternatives:**

1. **`Array.prototype.push()`**: This method can be used to add elements to the end of an array, but it's not as efficient as `concat()` for large arrays.
2. **`Array.prototype.set()`**: This method is available in older browsers (prior to Chrome 64) and allows setting multiple values at once, but it's not supported in modern JavaScript.
3. **Other libraries or modules**: While not explicitly mentioned, other libraries like Lodash or Ramda might provide optimized implementations of array manipulation methods.

**Benchmark preparation code:**

The provided JSON does not include any script preparation code, which means that the benchmark is designed to run on a clean slate, with no additional setup or dependencies required.

Related benchmarks:

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

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

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