Benchmark: Merge 3 small arrays

Script Preparation code:

var array1 = [];
var array2 = [];
var array3 = [];
for (let m = 0; m < 10; m++) {
  array1.push(m);
  array2.push(m + 10);
  array3.push(m + 20);
}

Tests:

Using array spread
let array = [...array1, ...array2, ...array3];
Using clone and push loop
let array = array1.slice(); for (let i = 0; i < array2.length; i++) { array.push(array2[i]); } for (let i = 0; i < array3.length; i++) { array.push(array3[i]); }
Using clone and push spread
let array = array1.slice(); array.push(...array2); array.push(...array3);
Using clone and push spread 2
let array = array1.slice(); array.push(...array2, ...array3);
Using push spread
let array = []; array.push(...array1, ...array2, ...array3);
Using array concat
let array = [].concat(array1, array2, array3);
Using array concat (2)
let array = [].concat(array1).concat(array2).concat(array3);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using array spread
Using clone and push loop
Using clone and push spread
Using clone and push spread 2
Using push spread
Using array concat
Using array concat (2)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0

Browser/OS: Firefox 113 on Linux

View result in a separate tab

Test name	Executions per second
Using array spread	5324139.0 Ops/sec
Using clone and push loop	10082558.0 Ops/sec
Using clone and push spread	4393178.5 Ops/sec
Using clone and push spread 2	3553577.8 Ops/sec
Using push spread	2945258.8 Ops/sec
Using array concat	7670045.0 Ops/sec
Using array concat (2)	3492119.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmarking test cases and explanations.

**Benchmark Definition:**

The benchmark definition is simple: merging three small arrays of 10 elements using different approaches. The script preparation code creates three empty arrays (`array1`, `array2`, and `array3`) and populates them with numbers from 0 to 9, respectively, in separate loops. This setup ensures that the test cases only depend on the order and size of the input arrays, making it easier to compare different approaches.

**Options compared:**

The benchmark compares six different approaches for merging the three arrays:

1. **Using array spread (`array = [...array1, ...array2, ...array3];`)**: This approach uses the spread operator (`...`) to concatenate the arrays.
2. **Using clone and push loop (`let array = array1.slice(); for (let i = 0; i < array2.length; i++) { array.push(array2[i]); } for (let i = 0; i < array3.length; i++) { array.push(array3[i]); };`)**: This approach creates a clone of the first array using `array1.slice()` and then pushes each element from the other two arrays onto it.
3. **Using clone and push spread (`let array = array1.slice(); array.push(...array2); array.push(...array3);`)**: Similar to the previous one, but uses the spread operator for pushing elements.
4. **Using clone and push spread 2 (`let array = array1.slice(); array.push(...array2, ...array3);`)**: This approach combines the clone of `array1` with both `array2` and `array3` using multiple spread operators.
5. **Using push spread (`let array = []; array.push(...array1, ...array2, ...array3);`)**: Similar to the previous one, but initializes an empty array and pushes all elements onto it using the spread operator.
6. **Using array concat (`let array = [].concat(array1, array2, array3);`)**: This approach uses the `concat()` method to concatenate the arrays.

**Pros and Cons:**

Here's a brief overview of each approach:

*   **Using array spread**: Pros: concise and efficient. Cons: might be less readable for developers unfamiliar with the spread operator.
*   **Using clone and push loop**: Pros: flexible, allows for customization of the order of elements. Cons: can be slower due to the use of `slice()` and loops.
*   **Using clone and push spread**: Similar pros and cons as the previous one, but with the added benefit of being more concise.
*   **Using clone and push spread 2**: Pros: combines efficiency of cloning with flexibility of the array spread approach. Cons: might be less readable for some developers due to the multiple spread operators.
*   **Using push spread**: Pros: simple and concise. Cons: assumes that the resulting array is not too large, as it creates a new array on each iteration.
*   **Using array concat**: Pros: simple and efficient. Cons: might be slower than other approaches due to the use of `concat()` methods.

**Libraries and special features:**

No external libraries are used in this benchmark, but some modern JavaScript features like `const` and arrow functions (`=>`) are implicitly used due to the nature of the code.

**Other considerations:**

*   **Array length**: The benchmark is designed to test performance for small arrays. As array lengths increase, other factors like caching and locality of reference might become more significant.
*   **Browser performance**: The benchmark results demonstrate how different browsers (in this case, Firefox) can exhibit variations in performance due to their respective implementation optimizations.

In conclusion, the benchmark helps highlight the trade-offs between different approaches for merging arrays. By considering both pros and cons, developers can choose the most suitable method for their specific use cases.

Related benchmarks:

Merge 3 small arrays (version: 0)

Merge 3 arrays of 10 elements

Comparing performance of: Using array spread vs Using clone and push loop vs Using clone and push spread vs Using clone and push spread 2 vs Using push spread vs Using array concat vs Using array concat (2)

Created: one year ago by: Guest

Jump to the latest result

Using array spread

Using clone and push loop

Using clone and push spread

Using clone and push spread 2

Using push spread

Using array concat

Using array concat (2)

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):