Benchmark: concat() vs spread (...) for combining two arrays

Tests:

concat()
const a = [1, 2, 3, 4]; const b = [5, 6, 7, 8]; const result = a.concat(b);
spread
const a = [1, 2, 3, 4]; const b = [5, 6, 7, 8]; const result = [...a, ...b];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat()
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Browser/OS: Chrome 145 on Windows

View result in a separate tab

Test name	Executions per second
concat()	18850142.0 Ops/sec
spread	47852236.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON aims to compare the performance of two different methods for combining two arrays in JavaScript: the `concat()` method and the spread operator (`...`).

### Benchmark Details

1. **Options Compared**:
   - **concat()**:
     - This method is called on an array and takes one or more arrays as arguments, combining them into a new array.
     - Example: `const result = a.concat(b);` combines arrays `a` and `b`.
   
   - **Spread Operator**:
     - This newer syntax allows for the expansion of iterable elements (like arrays) into a new array. The syntax `[...a, ...b]` incorporates all the elements from both arrays into a new array.
     - Example: `const result = [...a, ...b];` spreads the elements of array `a` followed by those of array `b` into a new array.

### Performance Results

The latest benchmark results show the following execution rates:
- **Spread Operator**: 36,490,768 executions/second.
- **concat()**: 13,281,358 executions/second.

This indicates that, in this particular test case, the spread operator is significantly faster than the `concat()` method.

### Pros and Cons

- **concat()**:
  - **Pros**:
    - More explicit about its purpose of combining arrays, which may enhance code readability for some developers.
    - It works well with legacy code and environments where the spread operator is not supported.
  - **Cons**:
    - Slower performance in this benchmark.
    - It creates a new instance of the array for each call and can be less efficient with larger datasets.

- **Spread Operator**:
  - **Pros**:
    - Faster performance, as shown in the benchmark results.
    - Allows for combining arrays in a concise manner and can be used to insert additional elements between arrays or manipulate elements more flexibly.
    - More modern syntax, which aligns with other ES6 features and may provide better clarity and maintainability.
  - **Cons**:
    - May not be supported in older browsers or environments, although compatibility is generally robust in modern JavaScript environments.

### Other Considerations

- **Browsers and Environments**: Performance can vary based on the JavaScript engine implementation in different browsers. This benchmark was conducted on Chrome 131, which may not reflect behavior in other browsers like Firefox or Safari.
  
- **Alternatives**: 
  - Other methods for combining arrays include using array methods like `Array.prototype.push()` in conjunction with `apply()` or `forEach()`, but these can be more verbose and less performant compared to the spread operator and `concat()`.
  - Some developers might also consider using libraries like Lodash, which provides utility functions like `_.concat()` for combining arrays, although this typically adds additional overhead in bundling the library.

In summary, this benchmark illustrates the performance differences between two popular methods for combining arrays in JavaScript, with the spread operator demonstrating a clear advantage in terms of speed.

Related benchmarks:

concat() vs spread (...) for combining two arrays (version: 1)

Comparing performance of: concat() vs spread

Created: one year ago by: Guest

Jump to the latest result

concat()

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):