Benchmark: Array push vs spread when reducing over results

Tests:

Push
Array(10000).fill(1).reduce((acc, i) => {acc.push(i); return acc;}, []);
Spread
Array(10000).fill(1).reduce((acc, i) => {return [...acc, i]}, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Push
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 120 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Push	24751.2 Ops/sec
Spread	28.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition:**

The benchmark is comparing two approaches for reducing an array over its results:

1. `Array(10000).fill(1).reduce((acc, i) => {acc.push(i); return acc;}, [])`: This uses the traditional `.push()` method to add elements to the accumulator.
2. `Array(10000).fill(1).reduce((acc, i) => {return [...acc, i]}, [])`: This uses the new ES6 spread operator (`...`) to create a new array with the accumulated values.

**Options Compared:**

The benchmark is comparing two options:

* `.push()` method (traditional approach)
* Spread operator (`...`) (new ES6 approach)

**Pros and Cons of Each Approach:**

1. **.push() Method:**
	* Pros:
		+ Widely supported across browsers and JavaScript engines.
		+ Generally faster, as it's a single function call.
	* Cons:
		+ Can lead to slower performance in certain scenarios due to the need to update the array length.
2. **Spread Operator (`...`):**
	* Pros:
		+ More concise and expressive code.
		+ Can be faster for large datasets, as it avoids updating the array length.
	* Cons:
		+ May not work correctly in older browsers or JavaScript engines that don't support spread operators.

**Library:**

None of the test cases use a specific library. The benchmark is focusing solely on the JavaScript built-in methods and syntax.

**Special JS Feature or Syntax:**

The test case uses the new ES6 spread operator (`...`). This feature was introduced in ECMAScript 2015 (ES6) and allows for creating a new array with elements from an existing array.

**Other Considerations:**

* The benchmark is running on a desktop platform using Chrome 120, which suggests that it's targeting modern browsers and JavaScript engines.
* The test case uses a large dataset of 10,000 elements, which may impact the results. Larger datasets can lead to more significant differences in performance between approaches.

**Alternatives:**

If you were to implement this benchmark yourself, you could consider using other JavaScript methods or libraries for reducing arrays over its results, such as:

* `Array.prototype.concat()`
* `Lodash` library (e.g., `lodash.forEach`)
* `Underscore.js` library (e.g., `_reduceRight`)

Keep in mind that the performance differences between these alternatives may vary depending on the specific use case and browser/JavaScript engine being targeted.

Related benchmarks:

Array push vs spread when reducing over results (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: Push vs Spread

Created: 2 years ago by: Guest

Jump to the latest result

Push

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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