Benchmark: Array extension techniques 2

Array extension techniques 2 (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) }

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

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) }

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/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
repeated spread -- output = [...output, ...batch]	2710.8 Ops/sec
repeated concat -- output = output.concat(batch)	7952.2 Ops/sec
spread concat -- output = [].concat(...batches)	257649.8 Ops/sec
push spread -- output.push(...batch)	37212.6 Ops/sec
push loop -- for (const v of batch) { output.push(v) }	40958.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark titled "Array extension techniques 2" is designed to evaluate the performance of different methods for combining arrays in JavaScript. The underlying goal is to measure the efficiency of these methods when used to concatenate multiple batches of arrays.

### Benchmark Overview

The benchmark compares five different approaches to merging arrays:

1. **Repeated Spread**: 
   ```javascript
   let result = []
   for (const batch of batches) {
     result = [...result, ...batch]
   }
   return result
   ```
   - **Description**: This method uses the spread operator (`...`) inside a loop, where each `batch` is spread into a new array along with the existing `result`.
   - **Pros**: The syntax is clean and concise, making it easy to read.
   - **Cons**: Because each concatenation creates a new array, it may lead to performance issues with larger datasets due to frequent memory allocation and deallocation.

2. **Repeated Concat**:
   ```javascript
   let result = []
   for (const batch of batches) {
     result = result.concat(batch)
   }
   return result
   ```
   - **Description**: This method relies on the `concat` method to combine the `result` and each `batch`.
   - **Pros**: The `concat` method is designed specifically for array concatenation and can be clearer in intent than the spread operator.
   - **Cons**: Similar to the spread operator, it creates a new array each time, leading to potential performance degradation with many iterations.

3. **Spread Concat**:
   ```javascript
   let result = []
   result = result.concat(...batches)
   return result
   ```
   - **Description**: This instance merges all batches at once using `concat` with spread syntax.
   - **Pros**: It efficiently processes multiple arrays in one method call.
   - **Cons**: If the `batches` array is very large, it can still lead to memory issues as all arrays are concatenated at once.

4. **Push Spread**:
   ```javascript
   let result = []
   for (const batch of batches) {
     result.push(...batch)
   }
   return result
   ```
   - **Description**: This method pushes each value of `batch` directly into `result` using the spread operator.
   - **Pros**: It avoids intermediate array creation for each concatenation, potentially leading to better performance for large datasets.
   - **Cons**: The performance still depends on the number of elements being pushed; if there are many nested arrays, it can become less efficient.

5. **Push Loop**:
   ```javascript
   let result = []
   for (const batch of batches) {
     for (const v of batch) {
       result.push(v)
     }
   }
   return result
   ```
   - **Description**: This method involves two nested loops, where each element of each `batch` is pushed into `result`.
   - **Pros**: This straightforward approach can be more performant for large datasets because it avoids array creation for every concatenation.
   - **Cons**: It may be less readable than the other methods and can be verbose; it also involves more explicit control of the loop.

### Performance Results

From the benchmark results, we observe the following executions per second for each method on a Chrome 134 setup:

- **Spread Concat**: 257,649 executions/second (fastest)
- **Push Loop**: 40,959 executions/second
- **Push Spread**: 37,213 executions/second
- **Repeated Concat**: 7,952 executions/second
- **Repeated Spread**: 2,711 executions/second (slowest)

### Considerations

- **Readability vs. Performance**: Preferences for a method may depend on whether developers prioritize code readability or performance, especially in applications dealing with large datasets.
- **Use Cases**: If performance is critical and the number of arrays to concatenate is large, the push methods may be preferable. For smaller arrays or one-off concatenations, the readability of the spread operator or `concat` methods might be suitable.
- **Modern JavaScript Features**: While the benchmark does not use any controversial or specialized JavaScript features beyond ES6 syntax, it's worth noting that choosing features aligned with modern JavaScript practices (e.g., using `let` and arrow functions) can help ensure long-term maintainability of code.

### Alternatives

Beyond the methods tested in this benchmark, developers might also consider:

- **Array.prototype.flat()**: If the arrays are nested, using `flat()` can simplify various concatenation scenarios.
- **Libraries**: Utility libraries like Lodash provide functions (`_.concat`, for example) that may have optimized performance characteristics for specific use cases.
- **Typed Arrays**: In performance-critical applications, evaluating the use of typed arrays may provide benefits, especially in scenarios involving large sets of numerical data.

In conclusion, developers must evaluate their needs when choosing an approach for array concatenation, balancing performance with code clarity.

Related benchmarks:

Array extension techniques 2 (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) }

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) }

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):