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

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

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months 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.

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 2 months ago):