Benchmark: concat vs splice for joining two arrays

Script Preparation code:

var numSamples = 10000
var data = "TEST DATA"
var makeArray = len=> Array(len).fill(data)

Tests:

immutable with concat
const a = makeArray(numSamples) const b = makeArray(numSamples) const results = a.concat(b)
direct mutation with splice + spread
const a = makeArray(numSamples) const b = makeArray(numSamples) a.splice(a.length, 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 months ago)

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

Browser/OS: Firefox 147 on Windows

View result in a separate tab

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

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is tested, the options compared, pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark defines two test cases:

1. **Immutable with concat**: This test creates two arrays `a` and `b` using a function `makeArray(numSamples)` that fills an array with a fixed string "TEST DATA". The concatenation operation is performed between these two arrays.
2. **Direct mutation with splice + spread**: This test also creates two arrays `a` and `b` using the same `makeArray(numSamples)` function, but this time the splice operation is used to insert elements from array `b` into array `a`. The spread operator (`...`) is used to expand the elements of array `b`.

**Options Compared**

The benchmark compares two approaches for joining or merging arrays:

1. **Concatenation** (Immutable with concat): This approach creates a new array by concatenating the elements of two existing arrays.
2. **Splice with spread** (Direct mutation with splice + spread): This approach modifies an existing array by inserting elements from another array.

**Pros and Cons**

* **Concatenation (Immutable with concat)**:
	+ Pros: Creates a new, independent copy of the data, which can be beneficial for performance-critical code paths where mutations are expensive.
	+ Cons: Can result in memory overhead due to the creation of an additional array object.
* **Splice with spread** (Direct mutation with splice + spread):
	+ Pros: Modifies the original array in-place, reducing memory allocation and deallocation overhead.
	+ Cons: Can be slower than concatenation for large arrays or when dealing with complex data structures.

**Other Considerations**

When choosing between these approaches, consider factors such as:

* Performance requirements
* Memory constraints
* Data structure complexity
* Code readability and maintainability

**Library/Functionality Used**

The `makeArray(numSamples)` function is used to create arrays of a specified length. This function is not explicitly defined in the benchmark definition, but it's likely a utility function that fills an array with a fixed value.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntaxes mentioned in this benchmark. The focus is on comparing two basic array operations: concatenation and splice with spread.

**Alternatives**

If you need to join or merge arrays, other approaches could be:

* Using the `Array.prototype.push()` method with multiple iterations (less efficient than concatenation)
* Creating a new array using an array literal syntax (`[...a, ...b]`)
* Using a library like Lodash's `merge` function

However, for simple cases, the chosen approach (concatenation or splice with spread) is likely sufficient.

Related benchmarks:

concat vs splice for joining two arrays (version: 1)

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

Created: 3 years ago by: Registered User

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