Benchmark: Array concat vs push vs spread syntax vs push.apply

Tests:

Array.prototype.concat
var arr1 = []; var arr2 = []; for(let i=0; i<10; ++i){ arr1.push("phantasy") arr1.push("joesguns") arr1.push("max-hardware") arr1.push("sigma-cosmetics") arr1.push("harakiri-sushi") arr1.push("foodnstuff") arr1.push("hong-fang-tea") arr1.push("iron-gym") arr2.push("nectar-net") arr2.push("omega-net") arr2.push("silver-helix") arr2.push("zer0") arr2.push("n00dles") arr2.push("neo-net") arr2.push("the-hub") arr2.push("crush-fitness") } var other = arr1.concat(arr2);
Push
var arr1 = []; var arr2 = []; for(let i=0; i<10; ++i){ arr1.push("phantasy") arr1.push("joesguns") arr1.push("max-hardware") arr1.push("sigma-cosmetics") arr1.push("harakiri-sushi") arr1.push("foodnstuff") arr1.push("hong-fang-tea") arr1.push("iron-gym") arr2.push("nectar-net") arr2.push("omega-net") arr2.push("silver-helix") arr2.push("zer0") arr2.push("n00dles") arr2.push("neo-net") arr2.push("the-hub") arr2.push("crush-fitness") } var other = arr1.push(...arr2);
Spread
var arr1 = []; var arr2 = []; for(let i=0; i<10; ++i){ arr1.push("phantasy") arr1.push("joesguns") arr1.push("max-hardware") arr1.push("sigma-cosmetics") arr1.push("harakiri-sushi") arr1.push("foodnstuff") arr1.push("hong-fang-tea") arr1.push("iron-gym") arr2.push("nectar-net") arr2.push("omega-net") arr2.push("silver-helix") arr2.push("zer0") arr2.push("n00dles") arr2.push("neo-net") arr2.push("the-hub") arr2.push("crush-fitness") } var other = [...arr1, ...arr2];
push.apply
var arr1 = []; var arr2 = []; for(let i=0; i<10; ++i){ arr1.push("phantasy") arr1.push("joesguns") arr1.push("max-hardware") arr1.push("sigma-cosmetics") arr1.push("harakiri-sushi") arr1.push("foodnstuff") arr1.push("hong-fang-tea") arr1.push("iron-gym") arr2.push("nectar-net") arr2.push("omega-net") arr2.push("silver-helix") arr2.push("zer0") arr2.push("n00dles") arr2.push("neo-net") arr2.push("the-hub") arr2.push("crush-fitness") } var other = arr1.push.apply(arr1, arr2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Push
Spread
push.apply

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Browser/OS: Firefox 132 on Windows

View result in a separate tab

Array.prototype.concat

745K/s

push.apply

722K/s

Push

698K/s

Spread

337K/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat	745,020 Ops/sec
push.apply	722,094 Ops/sec
Push	697,513 Ops/sec
Spread	336,696 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.

**Benchmark Overview**

The benchmark compares the performance of four ways to concatenate arrays in JavaScript:

1. `Array.prototype.concat()`
2. Using the spread operator (`...`)
3. Using `push()` with multiple arguments
4. Using `push.apply()`

The goal is to determine which approach is the fastest.

**Options Compared**

Here's a brief description of each option:

* **`Array.prototype.concat()`**: Concatenates two arrays using the `concat()` method.
	+ Pros: Easy to use, well-documented, and widely supported.
	+ Cons: Can be slower than other methods due to the overhead of creating a new array.
* **Using the spread operator (`...`)**: Spreads one or more arrays into another array.
	+ Pros: Concise, modern, and efficient. It creates a new array without the need for intermediate variables.
	+ Cons: Requires support for ES6 syntax, which may not be available in older browsers or environments.
* **Using `push()` with multiple arguments**: Pushes multiple elements onto an array using `push()`.
	+ Pros: Simple to use and widely supported. It's a good fallback option when the spread operator isn't available.
	+ Cons: Can lead to slower performance due to repeated function calls.
* **Using `push.apply()```**: Calls `push()` on an array with multiple arguments.
	+ Pros: Efficiently passes multiple elements to `push()`, reducing overhead.
	+ Cons: May not be as readable or concise as other options.

**Library Usage**

None of the provided benchmark code uses any external libraries. However, it's worth noting that the spread operator (`...`) is a feature introduced in ECMAScript 2015 (ES6), so support for this syntax may vary across browsers and environments.

**Benchmark Results**

The latest benchmark results show the performance of each option:

* `Array.prototype.concat()`: ~1019056.5 executions per second
* `push.apply()`: ~887458.4375 executions per second
* Using the spread operator (`...`): ~748621.6875 executions per second
* Using `push()` with multiple arguments: ~902472.5 executions per second

Based on these results, using `push()` with multiple arguments appears to be the fastest option, followed closely by `Array.prototype.concat()`. The spread operator and `push.apply()` are slower due to their respective syntax requirements and additional function calls.

However, it's essential to consider other factors that might affect performance, such as:

* Browser and environment support
* Array size and complexity
* Specific use case requirements

In conclusion, while the benchmark results provide a general idea of which options are faster, it's crucial to evaluate each approach in the context of your specific application and performance requirements.

Array concat vs push vs spread syntax vs push.apply (version: 0) Benchmark.js

Compare the new ES6 spread operator with the traditional concat() method and push, and throw in spread syntax and push.apply().

Comparing performance of: `Array.prototype.concat vs Push vs Spread vs push.apply`

Created: 4 years ago by: Guest

Go to the latest result

Array.prototype.concat

Push

Spread

push.apply

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array concat vs push vs spread syntax vs push.apply (version: 0) Benchmark.js

Compare the new ES6 spread operator with the traditional concat() method and push, and throw in spread syntax and push.apply().

Comparing performance of: Array.prototype.concat vs Push vs Spread vs push.apply

Created: 4 years ago by: Guest

Go to the latest result

Array.prototype.concat

Push

Spread

push.apply

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.concat vs Push vs Spread vs push.apply`