Benchmark: concat vs unshift vs spread (huge arrays)

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

var array = new Array(1000).fill(1);

Tests:

unshift
array.unshift(0);
concat
array = [0].concat(array)
spread
array = [0,...array]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
unshift
concat
spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 14 days ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
unshift	21226.9 Ops/sec
concat	338.1 Ops/sec
spread	38.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 14 days ago):

LLMs can make mistakes. Check important info.

The benchmark in question compares three different approaches for adding an element to the beginning of a large array in JavaScript. The three methods tested are:

1. **unshift**
2. **concat**
3. **spread**

The benchmark definition and preparation code indicate that the test will work with arrays that contain 1,000 elements, all initialized to the value of `1`.

### Test Cases Explanation

1. **unshift**:
   - **Benchmark Definition**: `array.unshift(0);`
   - **Description**: The `unshift` method adds one or more elements to the beginning of an array and returns the new length of the array. This method modifies the original array in place.
   - **Performance Result**: This approach has the highest performance with 21,226.88 executions per second.
   - **Pros**: 
     - Straightforward and easy to read.
     - Efficient when modifying the array in place.
   - **Cons**:
     - Can be less efficient on very large arrays, as it may require shifting all existing elements.

2. **concat**:
   - **Benchmark Definition**: `array = [0].concat(array);`
   - **Description**: The `concat` method is used to create a new array by combining the given elements (here, `[0]`) with another array (`array`). The original array remains unchanged.
   - **Performance Result**: This method is slower, with 338.14 executions per second.
   - **Pros**:
     - Does not modify the original array, which can be beneficial for immutability.
     - Can be used for more complex concatenations.
   - **Cons**:
     - Creates a new array, which can be less memory efficient, especially with larger arrays.
     - More overhead due to the creation of a new array and copying elements.

3. **spread**:
   - **Benchmark Definition**: `array = [0,...array];`
   - **Description**: The spread operator (`...`) allows an iterable (like an array) to be expanded into individual elements. In this case, it creates a new array by prepending `0` to the existing elements of `array`.
   - **Performance Result**: This method has the lowest performance at 38.29 executions per second.
   - **Pros**:
     - Very concise and readable syntax.
     - Useful for combining or cloning arrays in a functional style.
   - **Cons**:
     - Generally slower due to the overhead of the spread operator and array creation.
     - Also creates a new array, which can be unideal for memory consumption with larger datasets.

### Key Considerations
- **Performance**: The `unshift` method significantly outperforms both `concat` and `spread`, making it the most efficient choice if modifying the original array is acceptable.
- **Immutability**: For projects that prioritize immutability, `concat` and the spread operator provide mechanisms to create new arrays, at the expense of performance.
- **Readability**: The choice of approach can also depend on team coding standards for readability. The spread operator is particularly expressive in functional programming contexts.

### Alternatives
- **Push**: If the goal is to add an element to the end of the array instead of the beginning, `push` would be the optimal choice.
- **Manual Iteration**: For very specific scenarios, manually constructing a new array with a loop might offer optimizations that are tailored to the application's requirements, although this is often less readable.
- **Using Libraries**: Libraries such as Lodash provide various utility functions for array manipulation, but they may not necessarily outperform native methods for simple operations like those tested here.

In conclusion, the benchmark evaluates how different JavaScript methods for adding elements to arrays compare in terms of performance and memory efficiency, providing useful insights for software engineers when deciding on the best approach for their specific needs.

Related benchmarks:

concat vs unshift vs spread (huge arrays) (version: 1)

Comparing performance of: unshift vs concat vs spread

Created: 14 days ago by: Guest

Jump to the latest result

unshift

concat

spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 14 days ago):