Benchmark: Spread vs Push3 - MeasureThat.net

Tests:

Spread Operator
let arr1 = Array.from({length:10}).map((_,i)=>i); let arr2 = Array.from({length:100}).map((_,i)=>arr1); let arr3 = []; arr2.forEach(e=>{ arr3 = [ ... arr3, ... e]; })
Push with Spread
let arr1 = Array.from({length:10}).map((_,i)=>i); let arr2 = Array.from({length:100}).map((_,i)=>arr1); let arr3 = []; arr2.forEach(e=>{ arr3.push(...e); })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread Operator
Push with Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
Spread Operator	1028.7 Ops/sec
Push with Spread	4938.0 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 benchmark test and its results.

**Benchmark Test**

The benchmark test is designed to compare the performance of two approaches:

1. **Spread Operator (`...`)**: This approach uses the spread operator (`...`) to concatenate arrays. In the provided code, `Array.from({length: 10}).map((_, i) => i)` creates an array `arr1` with 10 elements. Then, `Array.from({length: 100}).map((_, i) => arr1)` creates another array `arr2` with 100 elements, where each element is a copy of `arr1`. Finally, `forEach(e => { arr3 = [...arr3, ...e]; })` concatenates the elements of `arr2` into an array `arr3`.

2. **Push with Spread (`push(...)`)**: This approach uses the `push()` method with the spread operator (`...`) to concatenate arrays. In this code, `Array.from({length: 10}).map((_, i) => i)` creates an array `arr1` as before. Then, `Array.from({length: 100}).map((_, i) => arr1)` creates another array `arr2` as before. Finally, the `forEach()` method uses `push(...e)` to concatenate the elements of `arr2` into an array `arr3`.

**Pros and Cons**

* **Spread Operator (`...`)**:
	+ Pros: More concise and expressive code.
	+ Cons: May be slower than `push()` due to the overhead of creating a new array on each concatenation.
* **Push with Spread (`push(...)`)**:
	+ Pros: Can be faster than the spread operator, as it avoids the overhead of creating a new array on each concatenation.
	+ Cons: Less concise and expressive code.

**Library and Special JS Features**

There are no libraries or special JavaScript features mentioned in this benchmark test. The code only uses built-in JavaScript methods and syntax.

**Other Alternatives**

For comparing performance, you might consider other approaches, such as:

* Using `Array.prototype.reduce()` to concatenate arrays.
* Using a library like Lodash or Ramda for array manipulation.
* Comparing the performance of different array buffers or typed arrays (e.g., Int8Array, Uint8Array).

**Benchmark Results**

The latest benchmark results show that the "Push with Spread" approach is faster than the spread operator approach. This may be due to the optimization and caching mechanisms used in modern browsers, which can improve performance for certain operations.

Keep in mind that these results are specific to Chrome 124 running on Windows Desktop, and may not generalize to other browsers or platforms. Additionally, microbenchmarks like this one should be taken with a grain of salt, as they often do not reflect real-world usage scenarios.

Related benchmarks:

Spread vs Push3 (version: 0)

Comparing performance of: Spread Operator vs Push with Spread

Created: 2 years ago by: Guest

Jump to the latest result

Spread Operator

Push with Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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