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

Test name	Executions per second
Array.prototype.concat	745020.2 Ops/sec
Push	697513.2 Ops/sec
Spread	336696.0 Ops/sec
push.apply	722093.6 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.

Related benchmarks:

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

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

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