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 ]

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: 2 months ago)

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

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
concat	15643135.0 Ops/sec
spread	56559312.0 Ops/sec
push spread	65201224.0 Ops/sec
for of push	61358436.0 Ops/sec
for push	66265932.0 Ops/sec
map push	54268556.0 Ops/sec
multi spread	40921500.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months 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.

Related benchmarks:

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

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: 5 years ago by: Registered User

Jump to the latest result

concat

spread

push spread

for of push

for push

map push

multi spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):