Benchmark: Concat vs push(...) for large arrays (100000 up to 5000000)

Script Preparation code:

window.top.tests = {control:[], concat:[], spread:[], apply: []};
window.test = (new Array(100000)).fill(null).map((e, i) => ( {
    "_id": "6756f95de1bf2a3657bf2262",
    "index": 0,
    "guid": "bdc23f10-a1ac-47ad-a423-1c498f5d7857",
    "isActive": true,
    "balance": "$2,288.04",
    "picture": "http://placehold.it/32x32",
    "age": i,
    "eyeColor": "brown",
    "name": "Reid Holden",
    "gender": "male",
    "company": "KAGGLE",
    "email": "reidholden@kaggle.com",
    "phone": "+1 (844) 427-3173",
    "address": "923 Dewitt Avenue, Macdona, Florida, 2333",
    "about": "Eu quis amet ipsum id occaecat reprehenderit cillum cupidatat ullamco ad duis. Lorem tempor incididunt culpa dolor labore et officia nulla aliqua et incididunt amet dolor reprehenderit. Ut voluptate est elit quis fugiat ex magna irure eiusmod esse duis sint qui. Exercitation duis duis ullamco est eiusmod sunt eiusmod velit laboris ex elit.\r\n",
    "registered": "2017-07-12T07:52:14 -02:00",
    "latitude": 49.456753,
    "longitude": -37.824429,
    "tags": [
      "est",
      "laborum",
      "laborum",
      "incididunt",
      "adipisicing",
      "anim",
      "sit"
    ],
    "friends": [
      {
        "id": 0,
        "name": "Gutierrez Collins"
      },
      {
        "id": 1,
        "name": "Lisa Richardson"
      },
      {
        "id": 2,
        "name": "Wilson Kane"
      }
    ],
    "greeting": "Hello, Reid Holden! You have 4 unread messages.",
    "favoriteFruit": "strawberry"
  }));

window.cutoff = 50000;

Tests:

Spread
window.top.tests.spread.push(...window.test); if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }
Apply
window.top.tests.apply.push.apply(window.top.tests.apply, window.test); if (window.top.tests.apply.length > window.cutoff) { window.top.tests.apply = []; console.log('reset apply'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Apply

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Windows

View result in a separate tab

Test name	Executions per second
Spread	1959.8 Ops/sec
Apply	1922.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of different methods of appending items to large arrays in JavaScript. Specifically, it looks at two methods: *spread operator* and *Function.prototype.apply()*. The benchmark aims to assess how these methods handle a large dataset by measuring the number of executions per second for each approach as items are pushed to an array.

### Methods Compared

1. **Spread Operator (`...`)**
   - **Benchmark Definition**: 
     ```javascript
     window.top.tests.spread.push(...window.test);
     if (window.top.tests.spread.length > window.cutoff) { 
       window.top.tests.spread = []; 
       console.log('reset spread'); 
     }
     ```
   - **Purpose**: This syntax allows for expanding an iterable (like an array) into individual elements. In this case, `window.test` is spread into individual elements and then pushed into `window.top.tests.spread`.

2. **Function.prototype.apply()**
   - **Benchmark Definition**: 
     ```javascript
     window.top.tests.apply.push.apply(window.top.tests.apply, window.test);
     if (window.top.tests.apply.length > window.cutoff) { 
       window.top.tests.apply = []; 
       console.log('reset apply'); 
     }
     ```
   - **Purpose**: The `apply()` method calls a function with a given `this` value and arguments provided as an array (or array-like object). Here, it is used to push all elements of `window.test` into `window.top.tests.apply`.

### Pros & Cons

#### Spread Operator
- **Pros**:
  - More concise and easier to read.
  - Suitable for modern JavaScript environments (ES6 and above).
  - Directly includes items as arguments, which can be useful for many functions that take a variable number of arguments.

- **Cons**:
  - For very large arrays, the spread operator can lead to performance degradation and even stack overflow due to the way it operates (it essentially expands the array into individual elements).

#### Function.prototype.apply()
- **Pros**:
  - Works with very large arrays without risk of stack overflow.
  - Can be more performant in scenarios where large datasets are involved since it doesn't need to expand all items upfront and instead works with references.

- **Cons**:
  - More verbose syntax, which may reduce readability.
  - Can have compatibility issues in environments that do not support certain modern JavaScript syntax features.

### Other Considerations

- **Performance Results**: 
  The benchmark results show that the 'Apply' method has a slightly higher execution rate than the 'Spread' method (471.006 vs. 460.579 executions per second). This indicates that while both methods are performant, the apply method is more efficient for large datasets in this specific test case.

- **Cutoff Mechanism**:
  Both methods include a mechanism that resets the array when it grows larger than a specified cutoff (`window.cutoff` = 50000). This is essential in long-running benchmarks to prevent memory overflow and to maintain performance testing integrity by clearing the accumulated data.

### Alternatives

1. **Array.prototype.push()**
   - Standard method to add one or more elements to the end of an array. However, pushing elements one by one could be significantly slower than batch operations.

2. **Array concatenation** (`concat()` method)
   - Using `array.concat(otherArray)` can also be an alternative way to merge arrays, but it does not modify the existing array and is usually less efficient than `push()` for bulk additions.

3. **Using loops**
   - One could also iterate over an array and push each individual element manually, but this approach is often less performant, especially for larger datasets.

In conclusion, the benchmark is pragmatic in nature as it allows software engineers to understand the performance implications of different methods for handling arrays in JavaScript. Opting for the most efficient method can yield significant performance benefits, particularly in applications where large datasets are manipulated frequently.

Related benchmarks:

Concat vs push(...) for large arrays (100000 up to 5000000) (version: 1)

Comparing the various ways to append to a large array

Comparing performance of: Spread vs Apply

Created: 15 days ago by: Guest

Jump to the latest result

Spread

Apply

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 15 days ago):