Benchmark: Array concat vs spread operator vs push vs forEach vs for...of

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
forEach
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ] params.forEach(p => other.push(p));
for...of
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ] for (const p of params) { other.push(p) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
forEach
for...of

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7799720.5 Ops/sec
spread operator	27628408.0 Ops/sec
Push	33196830.0 Ops/sec
forEach	29688302.0 Ops/sec
for...of	30313030.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark you provided compares various methods for combining arrays in JavaScript, specifically focusing on five different approaches: `Array.prototype.concat`, the ES6 spread operator, the `push` method, `forEach`, and `for...of`.

### Comparison of the Approaches

1. **Array.prototype.concat**
   - **Benchmark Definition**: `var other = [ 1, 2 ].concat(params);`
   - **Pros**: 
     - Simple and easy to read.
     - An established method for merging arrays.
   - **Cons**: 
     - Generally slower than other approaches in modern engines, especially for larger datasets.
     - Creates a new array rather than modifying the existing one, which could lead to increased memory usage.

2. **Spread Operator**
   - **Benchmark Definition**: `var other = [ 1, 2, ...params ];`
   - **Pros**: 
     - Concise and readable syntax introduced in ES6.
     - Avoids the overhead of method calls, making it faster in many scenarios.
   - **Cons**: 
     - Although performance is generally good, it can be slightly slower than the `push` method in some cases due to array destructuring mechanics.

3. **Push Method**
   - **Benchmark Definition**: `var other = [ 1, 2 ]; other.push(...params);`
   - **Pros**: 
     - Very efficient for adding multiple items to an existing array.
     - Directly modifies the target array, which can save memory and improve performance.
   - **Cons**: 
     - Slightly less readable when compared to the spread operator and `concat` for merging arrays.

4. **forEach**
   - **Benchmark Definition**: `params.forEach(p => other.push(p));`
   - **Pros**: 
     - Allows for operation on each item, which can be useful if any preprocessing or transformation is needed during the merge.
   - **Cons**: 
     - Slower than methods like `push` or the spread operator for simple concatenation, as it involves a callback function.
     - Less concise than alternatives.

5. **for...of**
   - **Benchmark Definition**: `for (const p of params) { other.push(p); }`
   - **Pros**: 
     - Directly iterates over iterable objects, making it clear and easy to read.
     - Offers similar performance benefits to `push` in most cases.
   - **Cons**: 
     - Slightly more verbose than using the spread operator.
     - Still has the overhead of a loop.

### Performance Results

From the benchmark results, we see that:
- `Push` had the highest executions per second (33,196,830), making it the fastest method for combining arrays in this test.
- `for...of` followed closely, showing that it is efficient for combining array elements.
- `forEach` was next, performing slightly less efficiently than `for...of`.
- The spread operator performed reasonably well but was slower than the previous methods in this benchmark.
- `Array.prototype.concat` lagged significantly behind, confirming its status as the slowest option in modern JavaScript engines, primarily due to its method-call overhead.

### Conclusion

In conclusion, the choice of method for combining arrays should be dictated by the specific needs of the application:
- If performance is paramount and you're combining many elements, `push` or `for...of` might be the best choices.
- If simplicity and readability are more critical—and when working with fewer elements—the spread operator is a strong candidate.
- The `concat` method may be more familiar to those coming from older JavaScript versions, but its inefficiency in performance-sensitive contexts should be noted.

For cases where transformation or additional logic is required during the merge, `forEach` or `for...of` is appropriate despite their potential performance downsides. Always consider the context and constraints of your application when selecting a method.

Related benchmarks:

Array concat vs spread operator vs push vs forEach vs for...of (version: 0)

Compare the new ES6 spread operator with the traditional concat() method, push, forEach, and for...of

Comparing performance of: Array.prototype.concat vs spread operator vs Push vs forEach vs for...of

Created: 2 months ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

forEach

for...of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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