Benchmark: merging two 10k items array comparison

Tests:

Array.prototype.concat
const arr1 = Array.from({ length: 100000 }, (value, index) => `${index}`); const arr2 = Array.from({ length: 100000 }, (value, index) => `${index}`); const result = arr1.concat(arr2)
spread operator
const arr1 = Array.from({ length: 100000 }, (value, index) => `${index}`); const arr2 = Array.from({ length: 100000 }, (value, index) => `${index}`); const result = [...arr1, ...arr2]
Array.prototype.push + spread operator
const arr1 = Array.from({ length: 100000 }, (value, index) => `${index}`); const arr2 = Array.from({ length: 100000 }, (value, index) => `${index}`); const result = arr1.push(...arr2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Array.prototype.push + spread operator

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON data represents two benchmark cases: merging two 10k items array comparison.

**Options Compared**

In the provided benchmark definitions, three options are compared:

1. **Array.prototype.concat()**: This method concatenates two arrays using the `+` operator.
2. **Spread Operator (`...`)**: This operator is used to spread the elements of one or more arrays into another array.
3. **Array.prototype.push() + Spread Operator**: This combination uses `push()` to add elements from an array using the spread operator.

**Pros and Cons**

*   **Array.prototype.concat()**:
    *   Pros: Can be a simple and straightforward approach for small arrays, can utilize browser optimizations like ` concat()` cache.
    *   Cons: May have performance issues when dealing with large arrays (especially in older browsers), uses more memory as it creates a new array object containing all elements from both input arrays.
*   **Spread Operator (`...`)**:
    *   Pros: More efficient than concatenation for large arrays, does not create a new array object like `concat()` does. It also avoids potential issues with the size of the result array growing too large to fit in memory.
    *   Cons: Requires support for the spread operator in JavaScript, which was introduced in ECMAScript 2015 (ES6).
*   **Array.prototype.push() + Spread Operator**:
    *   Pros: Combines efficiency and simplicity. The `push()` method only modifies the existing array and adds new elements, while the spread operator allows us to add multiple elements without having to concatenate or create a new array.
    *   Cons: Creates an intermediate result that contains all elements from both arrays before modifying the original array.

**Library Usage**

None of the benchmark cases use external libraries. The script and HTML preparation codes are simple and do not include any notable libraries.

**Special JavaScript Features/Syntax**

None of the benchmark cases utilize special JavaScript features or syntax, such as async/await, Promises, or Generators.

**Alternative Approaches**

For array merging, other approaches might be considered:

*   **Array.prototype.reduce()**: This method accumulates a value from each element in an array. It could be used to merge arrays, but it would likely have performance and readability issues compared to the current benchmarks.
*   **Array.prototype.map() + Array.prototype.concat()**: Using `map()` to create a new array with merged elements and then using `concat()` might not provide a significant performance advantage over the current spread operator-based approaches.

Keep in mind that while these alternative approaches can be considered, they might also have drawbacks such as higher memory usage or more complex code structures.

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

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	103.8 Ops/sec
spread operator	100.0 Ops/sec
Array.prototype.push + spread operator	97.7 Ops/sec

Related benchmarks:

merging two 10k items array comparison (version: 1)

Comparing performance of: Array.prototype.concat vs spread operator vs Array.prototype.push + spread operator

Created: one year ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Array.prototype.push + spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):