Benchmark: Array spread operator vs push in reduce v2

Tests:

spread operator
var arr = [ { "opportunityId": 5943111, "findingList": [ { "findingId": 6919 } ], }, { "opportunityId": 5943111, "findingList": [ { "findingId": 6918, "findingId": 6917 } ] } ] arr.reduce((acc, findingInOpp) => [...acc, ...findingInOpp.findingList.map(({ findingId }) => findingId)],[])
Push
var arr = [ { "opportunityId": 5943111, "findingList": [ { "findingId": 6919 } ], }, { "opportunityId": 5943111, "findingList": [ { "findingId": 6918, "findingId": 6917 } ] } ] arr.reduce((acc, findingInOpp) => { findingInOpp.findingList.forEach(({ findingId }) => acc.push(findingId)) return acc },[])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 13_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.92 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 85 on iOS 13.3

View result in a separate tab

Test name	Executions per second
spread operator	1786017.9 Ops/sec
Push	4701227.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark is designed to compare two approaches for flattening an array of objects in JavaScript: using the `Array.prototype.reduce()` method with the spread operator (`...`) and pushing elements onto an accumulator array. The test measures which approach is faster, but we'll also explore the pros and cons of each approach.

**Options Compared**

The benchmark compares two options:

1. **Push**: Using the `push()` method to add elements to an accumulator array in a loop.
2. **Spread Operator (`...`)**: Using the spread operator to create a new array from an existing array or object, and then adding it to the accumulator array.

**Pros and Cons of Each Approach**

### Push

Pros:

* Wide compatibility across different JavaScript engines and versions.
* Simple to implement and understand.

Cons:

* Can be slower for large arrays due to the overhead of repeated `push()` calls.
* May not be as efficient as using the spread operator, especially when dealing with large datasets.

### Spread Operator (`...`)

Pros:

* More concise and readable code.
* Efficient for large datasets, as it avoids the overhead of repeated array mutations.
* Native support in modern JavaScript engines.

Cons:

* May not work correctly in older JavaScript versions or certain browsers that don't support the spread operator.
* Can be less intuitive to understand than using `push()`.

**Library Usage**

There are no libraries used in this benchmark. The test code only uses built-in JavaScript features and methods.

**Special JS Feature/Syntax**

The benchmark uses the spread operator (`...`), which is a relatively new feature introduced in ES6 (2015). This syntax allows for more concise and expressive array manipulation, but may not be supported in older browsers or versions of JavaScript.

**Other Alternatives**

If you're interested in exploring alternative approaches to this benchmark, here are a few options:

* Using `Array.prototype.concat()` instead of `push()`.
* Implementing your own custom flattening function using loops and array mutations.
* Utilizing libraries like Lodash or Ramda for more functional programming approaches.

Keep in mind that the choice of approach depends on the specific requirements of your project, including performance, code readability, and compatibility with different JavaScript versions and browsers.

Related benchmarks:

Array spread operator vs push in reduce v2 (version: 0)

Compare the new ES6 spread operator with push inside reduce

Comparing performance of: spread operator vs Push

Created: 3 years ago by: Guest

Jump to the latest result

spread operator

Push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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