Benchmark: concat vs push vs push loop

HTML Preparation code:

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

Tests:

concat
const largeArray = new Array(10000); let rows = new Array(100000); rows = rows.concat(largeArray);
push
const largeArray = new Array(10000); const rows = new Array(100000); rows.push(...largeArray);
push in a loop
const largeArray = new Array(10000); const rows = new Array(100000); for (const item of largeArray) { rows.push(item); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
push
push in a loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
concat	1325.6 Ops/sec
push	354.8 Ops/sec
push in a loop	281.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in this context compares three different methods of adding elements to an array in JavaScript: using the `concat` method, the `push` method with the spread operator, and the `push` method in a loop. Each approach manipulates an array by adding elements from a large source array (`largeArray`), which contains 10,000 elements, to a target array (`rows`), initially set to have 100,000 indices.

### Benchmark Approaches

1. **Concat Method**
   - **Code**: `rows = rows.concat(largeArray);`
   - **Description**: This method creates a new array that contains elements from the original `rows` array followed by the elements of `largeArray`. `concat` does not modify the existing arrays, rather, it returns a new one.
   - **Pros**: 
     - Easy to read and understand.
     - Ideal for combining arrays without mutating existing ones.
   - **Cons**: 
     - Involves creating a new array, which can incur additional memory costs and lead to overhead in performance.
   - **Performance**: This method produced the highest executions per second in the benchmark, indicating that it may be optimized well in modern browsers.

2. **Push with Spread Operator**
   - **Code**: `rows.push(...largeArray);`
   - **Description**: This method uses the spread operator (`...`) to unpack the elements of `largeArray` and push them into the `rows` array.
   - **Pros**: 
     - Concise syntax and preserves mutability (i.e., modifies the existing `rows` array).
     - More efficient than `concat` in some cases since it does not create a new array.
   - **Cons**: 
     - The spread operator can lead to performance degradation if the array size is exceptionally large due to the creation of intermediate values during unpacking.
   - **Performance**: The execution speed is significantly lower than `concat`, showing that although it's a good syntax choice, it might have performance limitations with larger datasets.

3. **Push in a Loop**
   - **Code**: 
     ```javascript
     for (const item of largeArray) {
         rows.push(item);
     }
     ```
   - **Description**: This method involves iterating over each element in `largeArray` and pushing it to `rows` individually.
   - **Pros**: 
     - Very explicit in operation; clear what’s happening at each step.
     - Can be more flexible if additional processing is required for each item before pushing.
   - **Cons**: 
     - Considerably slower performance compared to the other methods; it involves multiple function calls and array lookups per item, which adds overhead.
   - **Performance**: This method had the lowest executions per second, indicating that for batch operations, it is less optimal.

### Considerations and Conclusions

- **Performance**: Based on the benchmark results, `concat` proved to be the most efficient for this case. However, performance can be context-dependent. For smaller arrays, the differences may be negligible.
  
- **Memory Usage**: The `concat` method creates a new array; thus, it can be less memory efficient than the `push` variants, especially with large arrays.

- **Readability and Maintainability**: While the `concat` and `push` with the spread operator are compact and easier to understand at a glance, the traditional loop method can be beneficial for complex scenarios requiring additional processing logic during the merge.

### Alternatives

- **Map and Reduce**: Other functional programming techniques could apply here, such as using `map` or `reduce` in combination with `concat` or `push`, but they might not improve performance significantly for this specific use case.
  
- **ForEach**: Instead of a traditional loop, you could use the `forEach` method to iterate over the array and push items into `rows`.

- **Typed Arrays**: If performance is critical and the data type is known, using typed arrays (like `Uint8Array`, `Float64Array`) can provide better performance for numerical data due to their optimized structure.

By examining these methods, developers can choose the most appropriate approach based on their specific use case requirements, understanding the trade-offs between performance, readability, and memory efficiency.

Related benchmarks:

concat vs push vs push loop (version: 1)

Comparing performance of: concat vs push vs push in a loop

Created: 5 months ago by: Guest

Jump to the latest result

concat

push

push in a loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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