Benchmark: [ARRAY] concat vs spread operator vs push + spread vs prototype.push.apply

Tests:

Array.prototype.concat
const arr1 = [ "hello", true, 7 ]; const arr2 = [1, 2, 3, 4, 5, 6, 7, 8]; const result = arr1.concat(arr2);
spread operator
const arr1 = [ "hello", true, 7 ]; const arr2 = [1, 2, 3, 4, 5, 6, 7, 8]; const result = [ ...arr1, ...arr2 ];
Push
const arr1 = [ "hello", true, 7 ]; const arr2 = [1, 2, 3, 4, 5, 6, 7, 8]; arr1.push(...arr2);
Array.prototype.push.apply
const arr1 = [ "hello", true, 7 ]; const arr2 = [1, 2, 3, 4, 5, 6, 7, 8]; Array.prototype.push.apply(arr1,arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Array.prototype.push.apply

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	16399235.0 Ops/sec
spread operator	10340824.0 Ops/sec
Push	34011628.0 Ops/sec
Array.prototype.push.apply	25752982.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided is designed to compare different methods of merging two arrays in JavaScript, specifically focusing on the following four approaches:

1. **Array.prototype.concat**
2. **Spread Operator (`...`)**
3. **Array.prototype.push with Spread Syntax**
4. **Array.prototype.push.apply**

### Description of Approaches

1. **Array.prototype.concat**:
   - **Code**: `const result = arr1.concat(arr2);`
   - **Purpose**: This method is used to merge two or more arrays. It returns a new array that contains the elements of the original arrays.
   - **Pros**: Simple and straightforward syntax. It does not mutate the original arrays.
   - **Cons**: May not be the fastest method for large arrays compared to other modern alternatives.

2. **Spread Operator (`...`)**:
   - **Code**: `const result = [ ...arr1, ...arr2 ];`
   - **Purpose**: The spread operator expands an iterable (like an array) into individual elements, which makes it easy to create a new array that combines elements from multiple sources.
   - **Pros**: Very readable and concise syntax. Like `concat`, it does not mutate the original arrays.
   - **Cons**: Performance can be less favorable compared to other methods for very large arrays due to the way it constructs a new array.

3. **Array.prototype.push with Spread Syntax**:
   - **Code**: `arr1.push(...arr2);`
   - **Purpose**: This method pushes all elements of `arr2` into `arr1`, modifying `arr1` in place.
   - **Pros**: Efficient for appending elements since it modifies the array directly and can offer good performance.
   - **Cons**: Mutates the original array (`arr1`), which may not be suitable in cases where immutability is desired.

4. **Array.prototype.push.apply**:
   - **Code**: `Array.prototype.push.apply(arr1, arr2);`
   - **Purpose**: Using `apply` allows for invoking `push` with an array of elements, effectively pushing all elements of `arr2` into `arr1`.
   - **Pros**: Similar to the spread operator, it's efficient for appending. It is also an option for browsers that might not support the spread operator.
   - **Cons**: Also mutates `arr1` and can be less readable than other approaches. It may also hit performance limits due to stack size when used with large arrays.

### Benchmark Results

In the benchmark results from Firefox 134 on a Linux desktop, the execution speeds (Executions Per Second) were as follows:

- **Push**: 34,011,628.0
- **Array.prototype.push.apply**: 25,752,982.0
- **Array.prototype.concat**: 16,399,235.0
- **Spread Operator**: 10,340,824.0

### Considerations

- **Performance**: The benchmark indicates that the `push` method is the most performant, primarily due to its in-place modification of the array. The `apply` variant performs slightly slower, but still better than the traditional `concat` and spread operator.
- **Readability**: The choice of syntax can also depend on the team's coding standards and preferences for readability. The spread operator is modern and concise but may require careful attention to array sizes.
- **Immutability**: In functional programming paradigms, immutability is often preferred. Techniques like `concat` and the spread operator are suitable for this purpose, while `push` and `push.apply` are not.

### Alternatives

Other alternatives for array merging include:

- **Using a for loop**: Manual iteration over elements can sometimes yield better performance but requires more code and is less idiomatic.
- **Using libraries** (e.g., Lodash's `_.union`, which also handles duplicate values).
- **Functional programming techniques**: Using methods like `reduce` to combine arrays into a new structure.

Each approach has its place depending on the requirements of the application, such as performance constraints, readability, and whether mutating the original array is acceptable.

Related benchmarks:

[ARRAY] concat vs spread operator vs push + spread vs prototype.push.apply (version: 1)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: Array.prototype.concat vs spread operator vs Push vs Array.prototype.push.apply

Created: 3 months ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Array.prototype.push.apply

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):