Benchmark: reduce() push vs reduce() spread

Script Preparation code:

var arr = [];
var i = 0;

while (i <= 1E5) arr[i] = i++;

Tests:

reduce() push
arr.reduce((acc, cur) => { if (cur % 12 && cur % 5 && cur % 3) { acc.push(cur / 100) } return acc }, [])
reduce() spread
arr.reduce((acc, cur) => { let newArr = [] if (cur % 12 && cur % 5 && cur % 3) { newArr = [(cur / 100), ...acc] } return newArr }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce() push
reduce() spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
reduce() push	882.1 Ops/sec
reduce() spread	699.1 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!

**What is being tested?**

The provided JSON represents a benchmark test case on MeasureThat.net, which compares two approaches to reducing an array in JavaScript: using `push` versus using `spread`.

In the first benchmark definition, we see code like this:
```javascript
arr.reduce((acc, cur) => {
  if (cur % 12 && cur % 5 && cur % 3) {
    acc.push(cur / 100)
  }
  return acc
}, [])
```
This uses the `push` method to add new elements to the accumulator (`acc`) array.

In contrast, the second benchmark definition uses the spread operator (new syntax introduced in ECMAScript 2018) like this:
```javascript
arr.reduce((acc, cur) => {
  let newArr = []
  if (cur % 12 && cur % 5 && cur % 3) {
    newArr = [(cur / 100), ...acc]
  }
  return newArr
}, [])
```
Here, a new array (`newArr`) is created by concatenating the accumulator (`acc`) with a new element.

**Options compared**

The two options being compared are:

1. **`push`**: adding elements to an array using `arr.push(cur / 100)`
2. **Spread operator (`...`)**: creating a new array by concatenating existing arrays with a new element

**Pros and Cons of each approach**

### Push

Pros:

* **Faster execution**: In general, pushing elements onto the end of an array is faster than using the spread operator.
* **Less memory allocation**: When using `push`, JavaScript only needs to allocate a new slot on the heap for the added element, whereas creating a new array with the spread operator allocates more memory.

Cons:

* **Less efficient for large arrays**: Using `push` can lead to poor cache locality and slower performance for larger arrays.
* **Less readable code**: Some developers may find the use of `push` less readable than using the spread operator.

### Spread Operator

Pros:

* **More efficient for large arrays**: The spread operator is generally faster and more efficient for handling large arrays, as it avoids the overhead of pushing elements onto the end of the array.
* **Easier to read code**: Using the spread operator can make code more readable, especially when working with arrays.

Cons:

* **Slower execution**: In some cases, using the spread operator can be slower than using `push`.
* **More memory allocation**: Creating a new array with the spread operator allocates more memory than using `push`.

**Library or special JS feature**

There is no explicit library being used in these benchmark definitions. However, the use of the spread operator (`...`) is a relatively recent addition to JavaScript (introduced in ECMAScript 2018).

**Considerations**

When deciding between `push` and the spread operator, consider the specific requirements of your project:

* If you're working with large arrays or need optimal performance, using the spread operator might be a better choice.
* If readability is more important than performance, using the push method could be a better option.

**Other alternatives**

There are other ways to reduce an array in JavaScript, such as using `concat`:
```javascript
arr.concat([cur / 100])
```
However, this approach creates a new array and may not be as efficient as using `push`.

Another alternative is to use the `reduce()` method with a custom accumulator function that uses `push` or the spread operator internally.

Related benchmarks:

reduce() push vs reduce() spread (version: 0)

in a reduce(), is it better to push to the accumulator or return a spread of the accumulator with the new value in it

Comparing performance of: reduce() push vs reduce() spread

Created: one year ago by: Guest

Jump to the latest result

reduce() push

reduce() spread

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):