Benchmark: Array Concat vs (Push + Spread) vs Spread

Script Preparation code:

var arr1 = ["hello", "world", "test"];
var arr2 = [];
for (let i = 0; i < 500; i++) {
	arr2.push(Math.random());
}

Tests:

concat
arr1 = arr1.concat(arr2)
push & spread
arr1.push(...arr2)
spread
arr1 = [arr1, ...arr2]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
push & spread
spread

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare three approaches for concatenating arrays:

1. `arr1 = arr1.concat(arr2)`
2. `arr1.push(...arr2)`
3. `arr1 = [arr1, ...arr2]`

These approaches are also known as "concatenation methods" in JavaScript.

**What's being tested?**

The benchmark is testing the performance of these three approaches on a large array of 500 random elements. The test is running on a Chrome browser with an Intel Mac OS X 11_2_0 operating system and is executed at a rate of approximately 16783 executions per second.

**Options compared**

The three options being compared are:

1. **`arr1 = arr1.concat(arr2)`**: This method uses the `concat()` function to concatenate two arrays.
2. **`arr1.push(...arr2)`**: This method uses the `push()` function with a spread operator (`...`) to append elements from another array.
3. **`arr1 = [arr1, ...arr2]`**: This method uses the spread operator (`...`) to create a new array by concatenating two arrays.

**Pros and Cons**

Here's a brief summary of each approach:

1. `arr1 = arr1.concat(arr2)`:
	* Pros: Well-supported in older browsers, relatively simple implementation.
	* Cons: Can be slow for large arrays due to the creation of an intermediate array.
2. `arr1.push(...arr2)`:
	* Pros: Fast and efficient, as it modifies the existing array directly.
	* Cons: Only supported in modern browsers (ES6+), may not work in older browsers or environments that don't support spread operators.
3. **`arr1 = [arr1, ...arr2]`**:
	* Pros: Fast and efficient, creates a new array with the desired structure.
	* Cons: May require more memory allocation for large arrays, requires modern browser support.

**Libraries and syntax**

There are no libraries being used in this benchmark. However, note that the spread operator (`...`) is a JavaScript syntax feature introduced in ES6 ( ECMAScript 2015). It's not available in older browsers or environments that don't support it.

**Other alternatives**

If you need to concatenate arrays in an environment without modern browser support, you can use:

1. `arr1 = arr1.concat(arr2)` (as mentioned earlier)
2. `arr1 = new Array().set(arr1).concat(arr2)` (a more explicit way of concatenating arrays)

In summary, the benchmark is testing the performance of three approaches for concatenating arrays in a modern browser environment with JavaScript syntax support. The results can help developers choose the most efficient method for their use case.

Related benchmarks:

Array Concat vs (Push + Spread) vs Spread (version: 0)

Comparing performance of: concat vs push & spread vs spread

Created: 5 years ago by: Guest

Jump to the latest result

concat

push & spread

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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