Benchmark: Array.prototype.concat vs spread operator vs apply

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ]; var other = params.push(...[1, 2]);
apply proto
var params = [ "hello", true, 7 ]; Array.prototype.push.apply(params, [1, 2]);
params.push
var params = [ "hello", true, 7 ]; var other = params.push.apply(params, [1, 2]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days 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 approaches to merge two arrays in JavaScript: `Array.prototype.concat()`, the spread operator (`...`), and `Array.prototype.push.apply()`.

**What are we comparing?**

We're comparing the execution time of each approach when merging a fixed-size array (`[ "hello", true, 7 ]`) with an already existing array (`[1, 2]`). The three approaches to merge these arrays are:

1. **`Array.prototype.concat()`**: This method creates a new array by concatenating two or more arrays.
2. **Spread operator (`...`)**: This syntax allows you to expand an iterable (like an array) into individual elements.
3. **`Array.prototype.push.apply()`**: This method adds multiple elements to the end of an array.

**Pros and Cons of each approach:**

1. **`Array.prototype.concat()`**:
	* Pros: Simple, straightforward implementation, widely supported.
	* Cons: Creates a new array, which can lead to increased memory allocation and garbage collection overhead.
2. **Spread operator (`...`)**:
	* Pros: More concise and expressive than `concat()`, avoids creating a new array.
	* Cons: Requires modern JavaScript support (ES6+), may not work in older browsers or environments.
3. **`Array.prototype.push.apply()`**:
	* Pros: Avoids creating a new array, only modifies the existing one.
	* Cons: Less intuitive than `concat()` or spread operator, may lead to unexpected behavior if not used carefully.

**Library and special JavaScript features:**

In this benchmark, none of the libraries are explicitly mentioned. However, it's worth noting that the spread operator was introduced in ES6 (ECMAScript 2015), which means older browsers and environments might not support it.

No special JavaScript features are explicitly mentioned in this benchmark.

**Benchmark preparation code:**

The script preparation code is null, indicating that no specific setup or initialization is required for the benchmark. This is likely because the focus is on measuring the performance of these three approaches.

**Individual test cases:**

Each test case represents a single execution of one of the three approaches. The `Test Name` field indicates which approach is being measured:

1. **`Array.prototype.concat()`**: Merges `[ "hello", true, 7 ]` with `[1, 2]`.
2. **Spread operator (`...`)**: Expands `[ "hello", true, 7 ]` into individual elements and merges them with `[1, 2]`.
3. **`Array.prototype.push.apply()`**: Adds ` [1, 2]` to the end of `[ "hello", true, 7 ]`.
4. **`params.push()`**: This test case is slightly different; it merges two arrays using `push()`, which adds elements to the end of an array.

**Other alternatives:**

If you want to explore other approaches for merging arrays in JavaScript, consider the following:

* `Array.prototype.slice().concat()`: Creates a new array by concatenating slices of the original arrays.
* `Array.prototype.splice()`: Modifies the existing array by inserting or removing elements.
* `Array.prototype.unshift()`: Adds elements to the beginning of an array (not applicable for merging two arrays).
* Using `reduce()` or other aggregation methods to merge arrays.

Keep in mind that each approach has its own trade-offs, and the best choice depends on your specific use case and performance requirements.

Latest run results:

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

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

Browser/OS: Chrome 109 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	17030786.0 Ops/sec
spread operator	68333856.0 Ops/sec
apply proto	9461015.0 Ops/sec
params.push	67424496.0 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator vs apply (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and apply

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

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

apply proto

params.push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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