Benchmark: Pushing - MeasureThat.net

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

const arr = new Array(4000).fill(0,1,4000)

Tests:

Push
const arr1 = [] arr1.push(...arr)
Spread
const arr1 = [] for (const element of arr){ arr1.push(element) }

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: one year ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Push

119K/s

Spread

65K/s

View exact numbers

Test name	Executions per second
✓ Push	118,940 Ops/sec
Spread	64,548 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark compares two different methods of adding elements to an array in JavaScript: using the `push()` method with the spread operator (`...`) and using a for-of loop with `push()`. The benchmark aims to measure which of these two approaches performs better in terms of execution speed.

### Test Cases

1. **Push**: 
   - **Code**: `const arr1 = []\r\narr1.push(...arr)`
   - **Description**: This method utilizes the spread operator to expand the contents of the array `arr` when adding them to `arr1`. The spread operator allows the elements of `arr` to be 'spread' into `push()`, enabling all elements to be pushed at once.

2. **Spread**:
   - **Code**: `const arr1 = []\r\nfor (const element of arr){\r\n  arr1.push(element)\r\n}\r\n`
   - **Description**: This method iterates over each element in `arr` and individually pushes each element to `arr1`. It uses a standard `for-of` loop to traverse the array and applies the `push()` method sequentially for each item.

### Pros and Cons

#### Using Spread (`push(...arr)`):
- **Pros**:
  - More concise and expressive, making the code cleaner and easier to read.
  - Tends to be faster for bulk operations since it can handle the entire array in one function call.
  
- **Cons**:
  - Uses more memory because the spread operator creates a shallow copy or expands the elements at the moment of pushing. For very large arrays, this could lead to performance overhead.
  - Not all environments may support the spread operator, although it's widely supported in modern JavaScript.

#### Using For-Of Loop:
- **Pros**:
  - Provides fine-grained control over each element being processed during the push operation.
  - More memory-efficient for very large arrays since it pushes elements directly without creating intermediate copies.
  
- **Cons**:
  - More verbose, leading to potentially harder-to-read code compared to the spread operator.
  - May execute slower because it involves multiple function calls to `push()` for each element in the array.

### Benchmark Results

- **Test Name: Push**: 
  - **Executions Per Second**: 118,939.85
- **Test Name: Spread**: 
  - **Executions Per Second**: 64,547.91

From the results, it is evident that the use of the spread operator (`push(...arr)`) significantly outperforms the `for-of` loop method in this specific case, with nearly double the executions per second.

### Other Considerations

- **Environment**: The results can vary depending on the JavaScript engine (for example, V8 in Chrome, SpiderMonkey in Firefox) and the environment (desktop vs. mobile). In some cases, advanced optimizations might be applied differently in these engines.
- **Array Size**: For very small arrays, the difference in performance between the two methods may be negligible. However, as the size of the array grows, the disparity in performance becomes more noticeable.
- **Code Maintainability**: The choice between the two methods should also consider code readability and maintainability, particularly for larger codebases where team members may have varying levels of experience.

### Alternatives

Other than the methods tested, array concatenation can be performed using `Array.prototype.concat()` or leveraging functional approaches such as `map()` or `reduce()`, though they are generally less performant for this use case. Each alternative comes with its own trade-offs in terms of readability, performance, and memory utilization, which should be carefully weighed against the specific requirements of the project at hand.

Pushing (version: 1)

Comparing performance of: `Push vs Spread`

Created: one year ago by: Guest

Go to the latest result

Push

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Pushing (version: 1)

Comparing performance of: Push vs Spread

Created: one year ago by: Guest

Go to the latest result

Push

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

Related benchmarks

Comparing performance of: `Push vs Spread`