Benchmark: Merging two arrays

Tests:

Array.prototype.push apply
const base = [1]; const added = [1, 2, 3]; const combined = Array.prototype.push.apply(base, added);
array.push spread
const base = [1]; const added = [1, 2, 3]; const combined = base.push(...added);
array.concat
const base = [1]; const added = [1, 2, 3]; const combined = base.concat(added);
spread operator
const base = [1]; const added = [1, 2, 3]; const combined = [...base, ...added];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.push apply
array.push spread
array.concat
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Browser/OS: Chrome 141 on Windows

View result in a separate tab

array.push spread

34.2M/s

Array.prototype.push apply

26.6M/s

spread operator

21.8M/s

array.concat

7.6M/s

View exact numbers

Test name	Executions per second
✓ array.push spread	34,223,876 Ops/sec
Array.prototype.push apply	26,572,018 Ops/sec
spread operator	21,807,296 Ops/sec
array.concat	7,581,910 Ops/sec

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 definition and test cases.

**Benchmark Definition:**

The benchmark is designed to measure the performance of different ways to merge two arrays in JavaScript. The merged array will have elements from both the original arrays, `base` and `added`.

**Script Preparation Code:**
There is no script preparation code provided for the benchmark, which means that the test cases are self-contained and don't rely on any external functions or variables.

**Test Cases:**

The benchmark consists of four test cases, each testing a different approach to merge the two arrays:

1. **Array.prototype.push.apply()**: This method uses the `apply()` method to invoke `push()` with an array of elements. The `base` and `added` arrays are merged in a single operation.
2. **array.push spread** (also known as array concatenation using the spread operator): This method uses the spread operator (`...`) to merge the two arrays into a new array.
3. **array.concat()**: This method uses the `concat()` method to merge the two arrays into a new array.
4. **spread operator**: This method uses the spread operator (`...`) to merge the two arrays into a new array.

**Pros and Cons of Each Approach:**

1. **Array.prototype.push.apply()**:
	* Pros: Can be more efficient for large arrays, as it avoids creating an intermediate array.
	* Cons: May not be compatible with older browsers or environments that don't support `apply()`.
2. **array.push spread** (array concatenation):
	* Pros: Widely supported in modern browsers and environments, easy to read and write.
	* Cons: Creates a new array, which can lead to memory usage issues for very large arrays.
3. **array.concat()**:
	* Pros: Easy to use, creates a new array (but can be optimized by reusing the existing array).
	* Cons: May not be as efficient as `push.apply()` or spread operator for very large arrays.

**Library/Functionality Used:**

None of these test cases rely on any external libraries or functions beyond the built-in JavaScript features mentioned above.

**Special JS Feature/Syntax:**

The spread operator (`...`) is a relatively recent addition to JavaScript, introduced in ECMAScript 2015. It allows for concise and expressive array merging and other operations.

**Other Alternatives:**

Some alternative approaches to merge two arrays include:

* Using `Array.prototype.slice()` to create a new array with elements from both original arrays.
* Using `Array.prototype.reduce()` to build a new array by combining elements from both original arrays.
* Using a loop or recursion to manually iterate over and combine the elements of both arrays.

Keep in mind that these alternative approaches may not be as efficient or concise as the methods tested in this benchmark.

Merging two arrays (version: 0)

Comparing performance of: `Array.prototype.push apply vs array.push spread vs array.concat vs spread operator`

Created: 3 years ago by: Guest

Go to the latest result

Array.prototype.push apply

array.push spread

array.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Merging two arrays (version: 0)

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

Created: 3 years ago by: Guest

Go to the latest result

Array.prototype.push apply

array.push spread

array.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.prototype.push apply vs array.push spread vs array.concat vs spread operator`