Benchmark: Array spread operator vs push in reduce

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) => { acc.push(...findingInOpp.findingList.map(({ findingId }) => findingId)) return acc },[])

Historical Performance Data aggregated from 68 community runs

Desktop Results:

Chrome 62 runs

Push

6.0M/s

spread operator

5.6M/s

View exact numbers

✓ Push: 6,007,470 ops/sec
• spread operator: 5,640,828 ops/sec

Firefox 6 runs

spread operator

11.6M/s

Push

7.9M/s

Fastest: spread operator (1.5x faster)

View exact numbers

✓ spread operator: 11,556,572 ops/sec
• Push: 7,884,877 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
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

Push

8.9M/s

spread operator

7.9M/s

View exact numbers

Test name	Executions per second
✓ Push	8,917,301 Ops/sec
spread operator	7,940,262 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two approaches:

1. Using the new ES6 spread operator (`...`).
2. Using the `push()` method inside the `reduce()` function.

**Description of Options Compared**

* The first option uses the spread operator to create a new array and then passes this array as an argument to the `map()` function, which returns another array with the desired values.
* The second option uses `push()` to add elements to the accumulator array inside the `reduce()` function.

**Pros and Cons of Each Approach**

1. **Spread Operator (First Option)**
	* Pros:
		+ More concise and readable code.
		+ Less memory-intensive, as it creates a new array instead of modifying an existing one.
		+ Efficient, as it avoids the need to iterate over the entire accumulator array.
	* Cons:
		+ Might be slower in some cases due to the overhead of creating a new array.
2. **Push (Second Option)**
	* Pros:
		+ May be faster due to the caching effect of `push()` on arrays, as it avoids the need to create a new array.
	* Cons:
		+ Less readable code, as it involves modifying an existing array inside the `reduce()` function.
		+ More memory-intensive, as it modifies the accumulator array instead of creating a new one.

**Library Used**

There is no specific library mentioned in the benchmark definition. However, it's likely that the `reduce()` function and the `map()` function are part of the built-in JavaScript API.

**Special JS Feature or Syntax**

The use of the spread operator (`...`) is a feature introduced in ECMAScript 2015 (ES6). It allows for concise array creation by spreading elements from one array into another.

**Other Considerations**

* The benchmark likely aims to determine which approach is more efficient and scalable, especially for large datasets.
* The use of Chrome as the test browser might introduce some biases, as it's a popular browser with optimized performance.
* The benchmark result should be taken as an indication of the relative performance difference between the two approaches, but further testing may be necessary to confirm the results.

**Alternatives**

If you're interested in exploring alternative approaches or optimizations, consider:

1. Using other array methods, such as `forEach()` or `filter()`, to reduce the size of the accumulator array.
2. Utilizing specialized libraries like Lodash or Ramda for functional programming and array manipulation.
3. Investigating compiler optimizations or transpilation techniques to improve performance.

Keep in mind that the benchmark result should be taken as a starting point, and further testing may be necessary to confirm the findings and identify potential biases.

Array spread operator vs push in reduce (version: 0) Benchmark.js

Compare the new ES6 spread operator with push inside reduce

Comparing performance of: `spread operator vs Push`

Created: 6 years ago by: Registered User

Go to the latest result

spread operator

Push

Historical Performance Data aggregated from 68 community runs

Desktop Results:

Chrome 62 runs

Firefox 6 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 spread operator vs push in reduce (version: 0) Benchmark.js

Compare the new ES6 spread operator with push inside reduce

Comparing performance of: spread operator vs Push

Created: 6 years ago by: Registered User

Go to the latest result

spread operator

Push

Historical Performance Data aggregated from 68 community runs

Desktop Results:

Chrome 62 runs

Firefox 6 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: `spread operator vs Push`