Benchmark: [] + push vs new Array() + index insertion (random insertion order) (fixed)

HTML Preparation code:

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

Script Preparation code:

const ITEMS_COUNT = 100000
function shuffleArray(array) {
    for (var i = array.length - 1; i >= 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
  return array;
}
const ITEMS_IN_RANDOM_ORDER = shuffleArray(Array.from(Array(ITEMS_COUNT).keys()))

Tests:

[] + push
const arr = []; for (const i of ITEMS_IN_RANDOM_ORDER) { arr.push(i); }
new Array() + index insertion
const arr = new Array(ITEMS_COUNT) for (const i of ITEMS_IN_RANDOM_ORDER) { arr[i] = i }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
[] + push
new Array() + index insertion

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
[] + push	3530.9 Ops/sec
new Array() + index insertion	7152.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares two different approaches for inserting elements into an array in JavaScript. The test focuses on the performance of appending values to an array using the `push` method versus directly assigning values at specific indices.

### Benchmark Summary

1. **Test Case 1: `[] + push`**
   - **Description**: This method initializes an empty array (`const arr = []`) and iteratively pushes values into it using the `push` method, which adds an element to the end of the array.
   - **Code Logic**: 
     ```javascript
     const arr = [];
     for (const i of ITEMS_IN_RANDOM_ORDER) {
       arr.push(i);
     }
     ```
   - **Performance Result**: Achieved approximately 3530.93 executions per second.

2. **Test Case 2: `new Array() + index insertion`**
   - **Description**: This method initializes an array with a predetermined length (`const arr = new Array(ITEMS_COUNT)`) and assigns values at specific indices directly based on the shuffled input.
   - **Code Logic**: 
     ```javascript
     const arr = new Array(ITEMS_COUNT);
     for (const i of ITEMS_IN_RANDOM_ORDER) {
       arr[i] = i;
     }
     ```
   - **Performance Result**: Achieved approximately 7152.21 executions per second.

### Comparison of Options

- **Array Initialization**:
  - `[] + push`: This approach starts with a dynamic array that grows as items are added.
  - `new Array() + index insertion`: This approach initializes a fixed-size array upfront, which can offer better performance when the number of inserted elements is known, as it reduces the overhead of resizing the array.

- **Insertion Method**:
  - `push`: The method adds elements one by one at the end of the array, which is generally quick for appending. However, if the array grows beyond its current allocation, it may lead to performance hits due to array resizing.
  - Index assignment: Directly assigning values using indices (like `arr[i] = i`) can be faster because it utilizes direct memory access, assuming the indices are calculated effectively without overhead.

### Pros and Cons

#### Pros:
- **`[] + push`**:
  - Simple and more readable syntax.
  - Ideal for cases where the final array size is unknown or when elements are added conditionally.
  
- **`new Array() + index insertion`**:
  - More efficient for inserting a large amount of data when the indices are known.
  - Reduces the need for dynamic resizing, thus potentially improving performance on large datasets.

#### Cons:
- **`[] + push`**:
  - Can be slower if adding a very large number of items because of the potential need for resizing which involves memory allocation overhead.
  
- **`new Array() + index insertion`**:
  - The code can be more complex and less flexible.
  - Assumes that the input data is properly ordered to match indices, which can lead to issues if the random ordering does not conform to the expected range.

### Other Considerations

- **Memory Usage**: The `new Array()` approach uses memory more efficiently for large known collections, while `push` might lead to more frequent memory reallocations and copies.
- **Performance**: The benchmark results show a clear advantage in performance for the indexed insertion approach using `new Array()` for this specific case.
  
### Alternatives

1. **Using `Array.concat()`**: This method can combine multiple arrays, but it creates new arrays instead of modifying existing ones, leading to potential performance drawbacks.
   
2. **Typed Arrays or Buffers**: For numerical data processing, using Typed Arrays can provide better performance while preventing issues related to dynamic resizing.

3. **Using a List/Collection Libraries (e.g., Lodash)**: They might offer additional functionality and optimizations, although it can add extra overhead.

In conclusion, this benchmark provides insight into the performance characteristics of two standard array manipulation techniques in JavaScript, highlighting when each approach can be beneficial or detrimental based on context.

Related benchmarks:

[] + push vs new Array() + index insertion (random insertion order) (fixed) (version: 1)

Comparing performance of: [] + push vs new Array() + index insertion

Created: 2 months ago by: Guest

Jump to the latest result

[] + push

new Array() + index insertion

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):