Benchmark: Array.prototype.concat vs splice vs push 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);
direct mutation with push + 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.push(...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
direct mutation with push + spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

direct mutation with push + spread

12.6M/s

immutable with concat

7.2M/s

direct mutation with splice + spread

6.4M/s

View exact numbers

Test name	Executions per second
✓ direct mutation with push + spread	12,627,940 Ops/sec
immutable with concat	7,204,691 Ops/sec
direct mutation with splice + spread	6,363,303 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 world of JavaScript microbenchmarks on MeasureThat.net.

The benchmark being tested is how to join two arrays: using `concat()`, `splice() + spread`, and `push() + spread`. We'll explore each approach, their pros and cons, and consider additional factors like performance and code readability.

**1. Immutable with concat**

Using `concat()` creates a new array by copying the elements from both input arrays. This method is often considered "immutable" because it doesn't modify the original arrays.

Pros:

* Creates a new, independent copy of the concatenated array.
* Can be more predictable and easier to reason about.

Cons:

* Requires creating a new array object, which can incur overhead due to memory allocation and copying.
* May not be as efficient for very large arrays.

**2. Direct mutation with splice + spread**

Using `splice()` followed by `spread` (the syntax `...b`) modifies the original array `a` by inserting elements from `b`. This approach is often referred to as "in-place" or "mutating" because it alters the original array.

Pros:

* Avoids creating a new array object, which can reduce memory allocation and copying overhead.
* Can be faster for large arrays since it modifies the existing data in place.

Cons:

* Modifies the original array, potentially affecting other parts of the code that rely on its integrity.
* May introduce unexpected side effects due to the mutation.

**3. Direct mutation with push + spread**

Similar to `splice()` + `spread`, this approach uses `push()` followed by `spread` (the syntax `...b`) to append elements from `b` to the end of array `a`. This method is also in-place and can be faster for large arrays.

Pros:

* Avoids creating a new array object, reducing memory allocation and copying overhead.
* Efficiently appends elements to the original array.

Cons:

* Similar to `splice()` + `spread`, modifies the original array, potentially affecting other parts of the code.
* May still introduce side effects due to mutation.

Now, let's examine the provided benchmark results. The three tests are run on a desktop Chrome 118 browser, with different execution rates per second:

1. **Direct mutation with push + spread**: ~5.87 executions/second
2. **Direct mutation with splice + spread**: ~4.82 executions/second
3. **Immutable with concat**: ~4.80 executions/second

Based on these results, it appears that `push()` + `spread` is the fastest approach for joining two arrays, followed closely by `splice()` + `spread`. The "immutable" method using `concat()` is still relatively fast but slightly slower.

When deciding which approach to use, consider factors like:

* Code readability: If maintaining a simple, predictable codebase is crucial, `concat()` might be the better choice.
* Performance-critical sections: For optimized performance in specific parts of your code, `push()` + `spread` or `splice()` + `spread` could be more suitable.
* Side effects and mutability: Be cautious when using in-place mutations like `splice()` and `push()`, as they can introduce unexpected behavior.

As an alternative approach, you could also consider using modern JavaScript features like:

* The `Array.prototype.reduce()` method to concatenate arrays
* The `Array.prototype.flatMap()` method to flatten arrays

Keep in mind that these alternatives may have their own performance characteristics and trade-offs.

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

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

Created: 4 years ago by: Guest

Go to the latest result

immutable with concat

direct mutation with splice + spread

direct mutation with push + 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 splice vs push for joining two arrays (version: 0)

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

Created: 4 years ago by: Guest

Go to the latest result

immutable with concat

direct mutation with splice + spread

direct mutation with push + 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 vs direct mutation with push + spread`