Benchmark: Concat vs push(...) for large arrays (----)

Script Preparation code:

window.top.tests = {control:[], concat:[], spread:[], apply: []};
window.test = (new Array(20000)).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 = 500000;

Tests:

Control (for push)
for (let element of window.test) window.top.tests.control.push(element); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Concat
window.top.tests.concat = window.top.tests.concat.concat(window.test); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
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
Control (for push)
Concat
Spread
Apply

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/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Control (for push)	134.8 Ops/sec
Concat	1086.4 Ops/sec
Spread	2254.1 Ops/sec
Apply	2229.8 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark presented in the JSON is designed to compare different methods for appending elements to a large array in JavaScript. Specifically, it evaluates four different approaches:

1. **Control (for push)**: This method uses a traditional `for...of` loop to iterate through `window.test`—an array populated with 20,000 user-like objects—and pushes each element to `window.top.tests.control`. This approach is straightforward but may suffer from performance degradation with larger arrays due to the overhead of multiple `push` calls.

- **Pros**: Clear syntax, easy to understand.
   - **Cons**: Slower performance with larger arrays because of repeated calls to `push`.

2. **Concat**: This method utilizes the `concat` method of arrays to append the entire `window.test` array to `window.top.tests.concat`. This is done in one operation, potentially leading to more efficient memory handling.

- **Pros**: Concatenates arrays in one call, potentially reducing overhead and improving performance.
   - **Cons**: The original `concat` method creates a new array, which may not be memory-efficient if large amounts of data are being handled repeatedly.

3. **Spread**: This technique employs the spread operator (`...`) to push elements of `window.test` into `window.top.tests.spread` in a single operation.

- **Pros**: More concise syntax and clear intent when pushing all elements at once.
   - **Cons**: The performance can vary depending on the implementation of the spread operator in the JavaScript engine. There may be additional overhead for large arrays.

4. **Apply**: This method uses the `apply` function of `push`, combining the two by pushing the elements of `window.test` into `window.top.tests.apply`.

- **Pros**: Efficiently combines multiple pushes into one function call.
   - **Cons**: May have performance implications depending on the engine, particularly for very large arrays.

### Benchmark Results Summary:
Based on the provided execution results:
- **Apply** achieved the highest executions per second at approximately **10,883**.
- **Spread** followed closely behind at around **10,573**.
- **Concat** performed significantly worse at about **7,111**.
- **Control** (using the for loop) was the slowest, at only **370** executions per second.

### Other Considerations and Alternatives:
When choosing between these methods, performance considerations are crucial, especially for applications requiring frequent array manipulations. Developers should also consider readability and maintainability of the code; for instance, the spread operator may be more readable for those familiar with ES6 syntax compared to manageability using `apply`.

Other alternatives for appending to arrays could include using `Array.from()` for creating new arrays from array-like structures or using methods from libraries like Lodash that can simplify and optimize array operations.

In conclusion, the benchmark clearly illustrates how different methods of appending to arrays can yield varying performance, especially with larger datasets. Choosing the right method depends on the specific use case, and developers should balance performance with clarity and maintainability.

Related benchmarks:

Concat vs push(...) for large arrays (----) (version: 1)

Comparing the various ways to append to a large array

Comparing performance of: Control (for push) vs Concat vs Spread vs Apply

Created: one year ago by: Guest

Jump to the latest result

Control (for push)

Concat

Spread

Apply

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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