Benchmark: Array spread operator vs unshift vs push reverse in reduce

Tests:

spread operator
var arr = [ { "opportunityId": 5943111, "findingList": [ { "findingId": 6919 } ], }, { "opportunityId": 5943111, "findingList": [ { "findingId": 6918, "findingId": 6917 } ] } ] arr.reduce((acc, findingInOpp) => [...findingInOpp.findingList.map(({ findingId }) => findingId), ...acc],[])
unshift
var arr = [ { "opportunityId": 5943111, "findingList": [ { "findingId": 6919 } ], }, { "opportunityId": 5943111, "findingList": [ { "findingId": 6918, "findingId": 6917 } ] } ] arr.reduce((acc, findingInOpp) => { acc.unshift(...findingInOpp.findingList.map(({ findingId }) => findingId)) return acc },[])
push reverse
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 },[]).reverse()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
unshift
push reverse

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Browser/OS: Firefox 145 on Linux

View result in a separate tab

Test name	Executions per second
spread operator	15505971.0 Ops/sec
unshift	10954551.0 Ops/sec
push reverse	11854828.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The benchmark is designed to compare the performance of three different approaches:

1. **Array spread operator**: This method uses the `...` syntax to create a new array by spreading the elements of an existing array.
2. **Unshift**: This method modifies the original array by adding one or more elements at the beginning using the `unshift()` method.
3. **Push and reverse**: This method adds elements to the end of the original array using the `push()` method and then reverses the order of the elements.

The benchmark is testing how these three approaches compare in terms of performance, specifically in reducing an array of objects while preserving the object's properties.

**Pros and Cons:**

* **Array spread operator**: This method is concise and easy to read. It also creates a new array, which can be beneficial if you need to preserve the original data.
	+ Pros: concise, efficient
	+ Cons: creates a new array, may not be suitable for large datasets
* **Unshift**: This method modifies the original array, which can be beneficial if you're working with small datasets or need to add elements frequently.
	+ Pros: modifies original array, fast
	+ Cons: modifies original data, may be less efficient than spread operator for large datasets
* **Push and reverse**: This method adds elements to the end of the original array and then reverses it. While this approach preserves the original order, it can be slower due to the `reverse()` operation.
	+ Pros: preserves original order, simple to implement
	+ Cons: slower than spread operator or unshift, may not be suitable for large datasets

**Libraries and Special Features:**

None of the benchmark cases use any external libraries. However, they do utilize some special JavaScript features:

* **ES6 spread operator**: The `...` syntax is used to create a new array by spreading elements from an existing array.
* **Unshift and push methods**: These methods are part of the Array prototype and are used to modify the original array.

**Alternatives:**

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

* Using `concat()` instead of spread operator: This method creates a new array by concatenating two or more arrays. While it's not as concise as the spread operator, it can be useful if you need to combine multiple arrays.
* Using `splice()` instead of push and reverse: This method modifies the original array by removing or inserting elements at a specified index. While it's not as intuitive as push and reverse, it can be useful for more complex data manipulation tasks.

Keep in mind that these alternatives may have different performance characteristics and may require additional optimizations to achieve good results.

Related benchmarks:

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

Compare the new ES6 spread operator with unshift and push reverse inside reduce

Comparing performance of: spread operator vs unshift vs push reverse

Created: one year ago by: Guest

Jump to the latest result

spread operator

unshift

push reverse

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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