Benchmark: Array concat vs spread operator vs push vs push FOR OF vs push FOR vs map vs multi spread

Tests:

concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
push spread
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
for of push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; for (const obj of params) { other.push(obj); };
for push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; for (var i = 0; i < params.length; i++) { other.push(params[i]); };
map push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; params.map(obj => { other.push(obj); });
multi spread
var params = [ "hello", true, 7 ] var other = [ 1, 2 ] other = [ ...other, ...params ]

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

push spread

64.9M/s

for of push

53.4M/s

spread

52.6M/s

for push

51.8M/s

map push

39.1M/s

multi spread

35.3M/s

concat

13.8M/s

Fastest: push spread (4.7x faster)

View exact numbers

✓ push spread: 64,878,144 ops/sec
• for of push: 53,427,008 ops/sec
• spread: 52,569,648 ops/sec
• for push: 51,802,156 ops/sec
• map push: 39,136,892 ops/sec
• multi spread: 35,301,804 ops/sec
• concat: 13,771,824 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread
push spread
for of push
for push
map push
multi spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Windows

View result in a separate tab

for push

36.6M/s

push spread

35.5M/s

for of push

24.9M/s

concat

24.8M/s

spread

24.2M/s

map push

23.3M/s

multi spread

18.3M/s

View exact numbers

Test name	Executions per second
✓ for push	36,551,516 Ops/sec
push spread	35,484,064 Ops/sec
for of push	24,942,988 Ops/sec
concat	24,811,936 Ops/sec
spread	24,194,116 Ops/sec
map push	23,324,476 Ops/sec
multi spread	18,301,452 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark is designed to compare the performance of different methods for concatenating arrays in JavaScript. The tests are run on multiple browsers and devices, providing insights into the most efficient approach.

**Methods Compared**

The benchmark compares six methods:

1. **concat()**: A traditional method using the `concat()` function.
2. **Spread Operator (`...`)**: A new ES6 feature that allows spreading an array's elements into another array.
3. **Push with Spread Operator (`push(...)`)**: Combining the spread operator with the `push()` method.
4. **For-of loop with Push (`for (const obj of params) { other.push(obj); }`)**: Using a for-of loop to iterate over an array and push its elements into another array.
5. **For loop with Push (`for (var i = 0; i < params.length; i++) { other.push(params[i]); }`)**: Using a traditional for loop to iterate over an array and push its elements into another array.
6. **Map with Push (`params.map(obj => { other.push(obj); });`)**: Using the `map()` function to create a new array and then pushing its elements into another array.

**Pros and Cons**

Here's a brief summary of the pros and cons for each method:

* **concat()**: Pros: Simple, widely supported. Cons: Can be slow due to the overhead of creating a new array.
* **Spread Operator (`...`)**: Pros: Efficient, modern feature. Cons: Not as widely supported in older browsers or environments.
* **Push with Spread Operator (`push(...)`**): Pros: Combines the efficiency of the spread operator with the simplicity of `push()`. Cons: May have compatibility issues with older browsers.
* **For-of loop with Push**: Pros: Easy to understand and implement. Cons: Can be slower due to the overhead of the loop and push operations.
* **For loop with Push**: Pros: Widely supported and relatively fast. Cons: More complex than the for-of loop approach.
* **Map with Push**: Pros: Efficient, modern feature. Cons: May have compatibility issues with older browsers.

**Other Considerations**

When choosing a method, consider the following factors:

* Compatibility: If you need to support older browsers or environments, choose a more widely supported method like `concat()` or `for` loops.
* Performance: The spread operator (`...`) and `push(...)` are generally faster than traditional methods like `concat()`.
* Code readability: For-of loops and the spread operator can be easier to understand for some developers.

**Alternatives**

If you're looking for alternative approaches, consider:

* Using a library like Lodash or Ramda, which provide efficient array manipulation functions.
* Implementing your own custom array concatenation function using techniques like buffer allocation or chunked iteration.
* Utilizing other modern features like `Array.prototype.flat()` or `Array.prototype.flatMap()`, which can simplify some concatenation scenarios.

Keep in mind that the best approach will depend on your specific use case, performance requirements, and target audience.

Array concat vs spread operator vs push vs push FOR OF vs push FOR vs map vs multi spread (version: 2) Benchmark.js

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: `concat vs spread vs push spread vs for of push vs for push vs map push vs multi spread`

Created: 6 years ago by: Registered User

Go to the latest result

concat

spread

push spread

for of push

for push

map push

multi spread

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Array concat vs spread operator vs push vs push FOR OF vs push FOR vs map vs multi spread (version: 2) Benchmark.js

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: concat vs spread vs push spread vs for of push vs for push vs map push vs multi spread

Created: 6 years ago by: Registered User

Go to the latest result

concat

spread

push spread

for of push

for push

map push

multi spread

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `concat vs spread vs push spread vs for of push vs for push vs map push vs multi spread`