Benchmark: Array extension techniques 3

Array extension techniques 3 (version: 1)

Like https://www.measurethat.net/Benchmarks/Show/7699/0/array-concat-vs-spread-vs-push-spread-loop-apply but uses more batches of a larger size each

Comparing performance of: repeated spread -- output = [...output, ...batch] vs repeated concat -- output = output.concat(batch) vs spread concat -- output = [].concat(...batches) vs push spread -- output.push(...batch) vs push loop -- for (const v of batch) { output.push(v) } vs flat

Created: 21 days ago by: Guest

Jump to the latest result

Script Preparation code:

const batches = []
for (let i = 0; i < 100; i++) {
  batches.push(new Array(100).fill(i))
}

Tests:

repeated spread -- output = [...output, ...batch]
let result = [] for (const batch of batches) { result = [...result, ...batch] } return result
repeated concat -- output = output.concat(batch)
let result = [] for (const batch of batches) { result = result.concat(batch) } return result
spread concat -- output = [].concat(...batches)
let result = [] result = result.concat(...batches) return result
push spread -- output.push(...batch)
let result = [] for (const batch of batches) { result.push(...batch) } return result
push loop -- for (const v of batch) { output.push(v) }
let result = [] for (const batch of batches) { for (const v of batch) { result.push(v) } } return result
flat
let result = [] result = batches.flat() return result

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
repeated spread -- output = [...output, ...batch]
repeated concat -- output = output.concat(batch)
spread concat -- output = [].concat(...batches)
push spread -- output.push(...batch)
push loop -- for (const v of batch) { output.push(v) }
flat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
repeated spread -- output = [...output, ...batch]	3121.4 Ops/sec
repeated concat -- output = output.concat(batch)	9547.4 Ops/sec
spread concat -- output = [].concat(...batches)	314803.5 Ops/sec
push spread -- output.push(...batch)	40061.4 Ops/sec
push loop -- for (const v of batch) { output.push(v) }	45435.4 Ops/sec
flat	13187.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark on MeasureThat.net titled "Array extension techniques 3" evaluates the performance of various methods for combining arrays in JavaScript. Specifically, it compares different techniques to merge multiple batches of arrays generated in the preparation step. This allows for a performance analysis of common array manipulation techniques within JavaScript.

### Techniques Compared

1. **Repeated Spread**
   - **Code**: `result = [...result, ...batch];`
   - **Pros**: The spread operator is generally considered a more modern and readable syntax for combining arrays.
   - **Cons**: This method creates a new array during each iteration, which can be inefficient, leading to degraded performance with a large number of arrays.

2. **Repeated Concat**
   - **Code**: `result = result.concat(batch);`
   - **Pros**: `concat` is a well-understood method for merging arrays without mutating the original arrays.
   - **Cons**: Similar to the repeated spread method, it also generates a new array in each iteration, which can impact performance.

3. **Spread Concat**
   - **Code**: `result = [].concat(...batches);`
   - **Pros**: This method allows for merging all batches into a single array in one call, which can be more efficient than doing it individually in a loop.
   - **Cons**: While this approach limits the overhead of maintaining multiple intermediate arrays per iteration, it still has to handle all the input arrays at once.

4. **Push Spread**
   - **Code**: `result.push(...batch);`
   - **Pros**: This method uses the spread operator within `push` to add elements directly, minimizing the creation of intermediate arrays.
   - **Cons**: Like other methods, it can still be suboptimal for very large arrays due to potential stack overflow issues when spreading very large arrays.

5. **Push Loop**
   - **Code**: `for (const v of batch) { result.push(v); }`
   - **Pros**: This approach gives precise control over how elements are added and can be less memory-intensive compared to other methods.
   - **Cons**: While efficient in terms of operations, it can be verbose and less readable than more modern practices.

6. **Flat**
   - **Code**: `result = batches.flat();`
   - **Pros**: The `flat` method is designed to flatten nested arrays into a single-level array efficiently.
   - **Cons**: This approach assumes that the input is an array of arrays and may not perform as well with very deep or irregular nesting levels.

### Performance Results

The benchmark results show the number of executions per second for each method when tested in a specific browser environment (Chrome 135 on Mac OS X). Here’s a summary of the performance as seen in the provided results:

- **Best Performer**: The **Spread Concat** method, which achieved over 314,000 executions per second, demonstrating its efficiency when handling multiple arrays in one go.
- **Worst Performer**: The **Repeated Spread** method, significantly lagging behind at just over 3,000 executions per second. This indicates that continually creating new arrays in a loop is not optimal for performance.
- **Variable Performance**: The **Push Loop** and **Push Spread** methods also showed varied performances, suggesting that while they are efficient for certain cases, they can be outpaced by more direct array manipulation methods like `concat` and `flat`.

### Alternative Approaches

While the benchmark focuses on the discussed methods, other potential alternatives for merging arrays in JavaScript could include:

- **Manual Iteration**: Using traditional loops to iterate through indexes might offer customization at the cost of brevity and readability.
- **Using Libraries**: Libraries like Lodash offer utility functions like `_.flatten` or `_.concat` that might provide optimized implementations, but introduce dependency overhead.
- **Typed Arrays or Buffers**: For numerical data, using typed arrays can provide performance benefits over standard arrays, though they come with different constraints and types.
- **Functional Programming Techniques**: Tools such as `reduce` could offer functional approaches to combining arrays, but might not always outperform imperative styles in terms of performance.

### Conclusion

This benchmark highlights different array concatenation techniques, showcasing their performance implications in modern JavaScript development. While newer syntax like spread might enhance code readability, performance must always be weighed against the specific requirements of the application, especially when dealing with large datasets. Understanding these trade-offs allows developers to make informed decisions on which method to utilize depending on their specific use case.

Related benchmarks:

Array extension techniques 3 (version: 1)

Like https://www.measurethat.net/Benchmarks/Show/7699/0/array-concat-vs-spread-vs-push-spread-loop-apply but uses more batches of a larger size each

Comparing performance of: repeated spread -- output = [...output, ...batch] vs repeated concat -- output = output.concat(batch) vs spread concat -- output = [].concat(...batches) vs push spread -- output.push(...batch) vs push loop -- for (const v of batch) { output.push(v) } vs flat

Created: 21 days ago by: Guest

Jump to the latest result

repeated spread -- output = [...output, ...batch]

repeated concat -- output = output.concat(batch)

spread concat -- output = [].concat(...batches)

push spread -- output.push(...batch)

push loop -- for (const v of batch) { output.push(v) }

flat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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