Benchmark: Concat vs Prototype Push vs Push Spread vs 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);
spread
let arr1 = new Array(5000).fill(1234567890); const arr2 = new Array(5000).fill(1234567890); arr1 = [...arr1, ...arr2]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
prototype push
push spread
spread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
concat	42295.6 Ops/sec
prototype push	34232.1 Ops/sec
push spread	34187.2 Ops/sec
spread	18124.9 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 world of JavaScript microbenchmarks on MeasureThat.net.

The benchmark being tested is the performance difference between three ways to concatenate or add elements to an array: `concat`, `prototype push`, and two variations using spread operators (`push spread` and `spread`). We'll explore each approach, their pros and cons, and other considerations.

**1. Concat**

```javascript
arr1 = arr1.concat(arr2);
```

The `concat()` method creates a new array by concatenating the elements of `arr1` and `arr2`. It returns a new array object, leaving both original arrays unchanged.

Pros:

* Simple and straightforward to use.
* Creates a new array, which can be beneficial for performance-critical applications.

Cons:

* Requires an extra memory allocation, as it creates a new array.
* May incur additional overhead due to the creation of a new array object.

**2. Prototype Push**

```javascript
Array.prototype.push.apply(arr1, arr2);
```

The `push()` method adds one or more elements to the end of an array and returns the updated length of the array. By using `apply()`, we pass `arr1` as the receiver, allowing us to add elements to its own array.

Pros:

* Uses existing memory allocation for `arr1`.
* Reduces memory overhead compared to concatenation.
* Faster than concatenation due to the reuse of existing memory.

Cons:

* Can be confusing for those who are not familiar with prototype methods or `apply()`.
* May not work as expected if `arr1` is already full (i.e., has no available space).

**3. Push Spread**

```javascript
arr1.push(...arr2);
```

The spread operator (`...`) allows us to expand the elements of `arr2` into individual arguments for the `push()` method.

Pros:

* Simple and easy to read.
* Reduces memory overhead compared to concatenation or prototype push.

Cons:

* Only supported in modern browsers (ECMAScript 2018+) that implement the spread operator.
* May not work as expected if `arr1` is already full (i.e., has no available space).

**4. Spread**

```javascript
arr1 = [...arr1, ...arr2];
```

The spread operator (`...`) allows us to expand the elements of both arrays into a new array.

Pros:

* Simple and easy to read.
* Reduces memory overhead compared to concatenation or prototype push.
* Works in modern browsers that implement the spread operator.

Cons:

* Only supported in modern browsers (ECMAScript 2018+) that implement the spread operator.
* May be slower than prototype push due to the creation of a new array.

Other considerations:

* Modern browsers often have performance optimizations for arrays and their methods, so benchmark results may vary depending on the browser and version used.
* The number of elements in `arr1` and `arr2` can significantly impact performance. For example, increasing the size of `arr2` from 5000 to 50,000 might change the relative performance of each approach.

To create a benchmark like this on MeasureThat.net, you would:

1. Create an account on MeasureThat.net.
2. Fill out the benchmark definition form with your chosen script preparation code and HTML preparation code (usually empty).
3. Add individual test cases for each approach using the `Benchmark Definition` section.
4. Configure the test settings to run multiple executions per second.
5. Run the benchmark and compare the results.

Keep in mind that MeasureThat.net is primarily intended for testing JavaScript microbenchmarks, so you may want to use a different tool or framework if your specific requirements involve other programming languages or more complex benchmarks.

Related benchmarks:

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

Comparing performance of: concat vs prototype push vs push spread vs spread

Created: 4 years ago by: Guest

Jump to the latest result

concat

prototype push

push spread

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