Benchmark: Concat vs push(...) for large arrays (500 up to 50000)

Script Preparation code:

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

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: 16 days 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)	6743.3 Ops/sec
Concat	18922.7 Ops/sec
Spread	177116.1 Ops/sec
Apply	166348.6 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark measures the performance of different methods to append items to a large JavaScript array. The focus is on comparing four specific approaches: using a for loop with `push`, using concatenation (`concat`), using the spread operator (`...`), and using `apply` with `push`.

### Approaches Tested

1. **Control (for push)**:
   ```javascript
   for (let element of window.test) window.top.tests.control.push(element);
   ```
   - **Description**: This approach iterates over the `window.test` array using a for-of loop and adds each element to the `control` array with the `push` method.
   - **Pros**:
     - Simple and easy to understand.
     - Compatible across all browsers and JavaScript versions.
   - **Cons**:
     - Tends to be slower for large datasets compared to the other methods implemented in this benchmark.

2. **Concat**:
   ```javascript
   window.top.tests.concat = window.top.tests.concat.concat(window.test);
   ```
   - **Description**: This method uses the `concat` function to combine the contents of the `concat` array with the `window.test` array.
   - **Pros**:
     - Returns a new array without modifying the original, which can be beneficial in certain scenarios where immutability is preferred.
   - **Cons**:
     - Can be less performant because it creates a new array, leading to increased memory consumption.

3. **Spread**:
   ```javascript
   window.top.tests.spread.push(...window.test);
   ```
   - **Description**: This utilizes the spread operator (`...`) to expand the elements of the `window.test` array as individual arguments to the `push` method.
   - **Pros**:
     - Convenient syntax that makes the code more readable.
     - Generally faster than the `concat` approach since it operates in place.
   - **Cons**:
     - The maximum length of the array that can be processed is limited by the stack size, which can lead to errors if the array is too large.

4. **Apply**:
   ```javascript
   window.top.tests.apply.push.apply(window.top.tests.apply, window.test);
   ```
   - **Description**: This method leverages the `apply` function to invoke `push` on the target array, treating `window.test` as an argument list.
   - **Pros**:
     - Allows pushing a large number of elements at once and is often expected to be faster than a loop.
   - **Cons**:
     - Can also run into stack size limitations similar to the spread method, and the syntax may be less clear to those unfamiliar with `apply`.

### Benchmark Results Overview

From the benchmark results:
- **Spread** outperformed the others with approximately 177,116 executions per second.
- **Apply** was the next best option at around 166,349 executions per second.
- **Concat** and **Control (for push)** performed significantly slower, with concat at 18,922 and control at just 6,743 executions per second.

### Summary Considerations

- The benchmark indicates that both the spread operator and `apply` are efficient for handling large arrays, with spread being the fastest in this instance.
- The for-loop method with `push` is typically the simplest, but it does not perform well with large datasets.
- When choosing a method to append arrays in JavaScript, consider both performance characteristics and clarity of code. Each approach may be more suitable for different contexts based on the specific requirements of the project.

### Other Alternatives

- **Using `Array.prototype.unshift`**: If elements need to be added to the beginning of an array, `unshift` can be used, but this is typically slower for large arrays due to elements being shifted in memory.
- **Using a Typed Array**: For numerical data sets, Typed Arrays can provide better performance and memory efficiency.
- **Immutable.js or Similar Libraries**: If immutability is a key requirement, consider using libraries like Immutable.js which offer data structures that can handle array mutations efficiently.
- **Performance Libraries**: Libraries such as Lodash or Ramda provide various utilities that may also introduce performance optimizations depending on the specific use cases.

Related benchmarks:

Concat vs push(...) for large arrays (500 up to 50000) (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: 16 days ago by: Guest

Jump to the latest result

Control (for push)

Concat

Spread

Apply

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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