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

Tests:

Using concat
const arr1 = ["test", true ,"concat", 791, "push"] const arr2 = [false, "es", 6, "spread operator", "measurethat.net"] const newArr = arr2.concat(arr1);
Using prototype.push.apply
const arr1 = ["test", true ,"concat", 791, "push"] const arr2 = [false, "es", 6, "spread operator", "measurethat.net"] Array.prototype.push.apply(arr1, arr2);
Using arr1.push.apply
const arr1 = ["test", true ,"concat", 791, "push"] const arr2 = [false, "es", 6, "spread operator", "measurethat.net"] arr1.push.apply(arr1, arr2);
Using push spread operator
const arr1 = ["test", true ,"concat", 791, "push"] const arr2 = [false, "es", 6, "spread operator", "measurethat.net"] arr1.push(...arr2)
Using spread operator
const arr1 = ["test", true ,"concat", 791, "push"] const arr2 = [false, "es", 6, "spread operator", "measurethat.net"] const newArr = [...arr1, ...arr2]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using concat
Using prototype.push.apply
Using arr1.push.apply
Using push spread operator
Using spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Test name	Executions per second
Using concat	13379905.0 Ops/sec
Using prototype.push.apply	34477092.0 Ops/sec
Using arr1.push.apply	38837304.0 Ops/sec
Using push spread operator	38052888.0 Ops/sec
Using spread operator	28727492.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The benchmark compares four different approaches to merge two arrays in JavaScript:

1. `concat()`: The classic array concatenation method.
2. `push.apply()`: Using `Array.prototype.push()` with an additional argument for each element.
3. `arr1.push.apply(arr1, arr2)`: A variation of the previous one where the first array is used as both the target and source.
4. Spread operator (`...`): The new ES6 spread operator for merging arrays.

**Options compared**

The benchmark compares the performance of these four approaches on a simple test case:

```javascript
const arr1 = ["test", true, "concat", 791, "push"];
const arr2 = [false, "es", 6, "spread operator", "measurethat.net"];
```

Each approach has its pros and cons:

* `concat()`: Simple and widely supported, but can be slower for large arrays.
* `push.apply()`: More efficient than `concat()` for large arrays, as it avoids creating a new array. However, it requires the target array to be the same length as the source array.
* `arr1.push.apply(arr1, arr2)`: Similar to `push.apply()`, but uses the first array as both the target and source. This can lead to unexpected behavior if not used carefully.
* Spread operator (`...`): The most concise way to merge arrays, but may be slower than the other approaches due to its complexity.

**Library usage**

None of the test cases use a specific library. However, it's worth noting that `Array.prototype.push.apply()` is a built-in method that relies on the `push()` method being implemented by each browser engine.

**Special JS feature or syntax**

The spread operator (`...`) is a new feature introduced in ECMAScript 2015 (ES6). It allows arrays to be merged using the `...` operator, which distributes elements from one array into another. This feature is supported by modern browsers and JavaScript engines.

**Other alternatives**

If none of these approaches are suitable for your use case, you may consider other options:

* Using a library like Lodash or Ramda, which provide more comprehensive merging functions.
* Implementing a custom merging function that suits your specific requirements.
* Using the `concat()` method with a transpiler like Babel to support older browsers.

In summary, the benchmark on MeasureThat.net compares the performance of four different approaches to merge arrays in JavaScript: `concat()`, `push.apply()`, `arr1.push.apply(arr1, arr2)`, and the spread operator (`...`). The choice of approach depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

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

Compare the new ES6 spread operator with the concat and apply method

Comparing performance of: Using concat vs Using prototype.push.apply vs Using arr1.push.apply vs Using push spread operator vs Using spread operator

Created: 4 years ago by: Registered User

Jump to the latest result

Using concat

Using prototype.push.apply

Using arr1.push.apply

Using push spread operator

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