Benchmark: Concat vs Prototype Push vs Push Spread

Tests:

concat
let arr1 = new Array(5000).fill(1234567890); const arr2 = new Array(5000).fill(1234567890); arr1 = arr1.concat(arr2);
prototype push
let arr1 = new Array(5000).fill(1234567890); const arr2 = new Array(5000).fill(1234567890); Array.prototype.push.apply(arr1,arr2);
push spread
let arr1 = new Array(5000).fill(1234567890); const arr2 = new Array(5000).fill(1234567890); arr1.push(...arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
prototype push
push spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36

Browser/OS: Chrome 85 on Mac OS X 10.15.6

View result in a separate tab

Test name	Executions per second
concat	29339.3 Ops/sec
prototype push	13982.5 Ops/sec
push spread	4339.3 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of three different methods for concatenating two arrays in JavaScript: `concat`, `prototype push`, and `push spread`.

**What is being tested?**

In this benchmark, two arrays with 5000 elements each are created and filled with a large number (1234567890). The benchmark then measures how long it takes to concatenate the two arrays using each of the three methods:

1. `concat`: This method uses the built-in `concat` function to merge the two arrays.
2. `prototype push`: This method uses the `push.apply` method, which applies a function to an array, in this case, the `push` method, to add elements to the end of the array.
3. `push spread`: This method uses the spread operator (`...`) to concatenate the two arrays.

**Options compared**

The benchmark compares the performance of each of these three methods on the same input data (two large arrays).

**Pros and Cons of each approach:**

1. **`concat`**:
	* Pros: Easy to use, well-documented.
	* Cons: Creates a new array object, which can be memory-intensive for large inputs.
2. **`prototype push`**:
	* Pros: Efficient in terms of memory usage, as it modifies the original array.
	* Cons: Less intuitive and less documented than `concat`.
3. **`push spread`**:
	* Pros: Concise and expressive syntax, efficient in terms of memory usage.
	* Cons: Less well-documented and potentially slower due to the creation of a new array.

**Library/Function used**

The benchmark uses the following libraries/functions:

1. `Array.prototype.concat`: The built-in JavaScript function for concatenating arrays.
2. `Array.prototype.push.apply`: The built-in JavaScript method for applying a function to an array, which includes pushing elements onto it.
3. Spread operator (`...`): A syntax feature introduced in ECMAScript 2015 that allows concisely expanding arrays or other iterable objects.

**Special JS feature/syntax**

The benchmark uses the spread operator (`...`) to concatenate arrays, which is a modern JavaScript syntax feature introduced in ECMAScript 2015. This feature was added to provide a concise way to merge two arrays into one.

**Other alternatives**

In addition to the three methods mentioned above, there are other ways to concatenate arrays in JavaScript:

1. `Array.prototype.reduce()`: Using the `reduce()` method can also be used to concatenate arrays.
2. Loops: You can use simple loops (e.g., `for` or `while`) to iterate over both arrays and add elements to a new array.

However, these alternatives are generally less efficient than using built-in methods like `concat`, `push.apply`, or the spread operator (`...`).

Related benchmarks:

Concat vs Prototype Push vs Push Spread (version: 0)

Comparing performance of: concat vs prototype push vs push spread

Created: 4 years ago by: Guest

Jump to the latest result

concat

prototype push

push spread

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