Benchmark: Array merge -> Concat | Push spread | Concat Apply | Push Apply | Spread | Loop Push (large array)

Array merge -> Concat | Push spread | Concat Apply | Push Apply | Spread | Loop Push (large array) (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Script Preparation code:

var params = [];
for ( i = 0; i < 100000; i++ ) {
  params.push(Math.random());
}

var concat = (input) => [1,2,3].concat(params);
var push = (input) => [1,2,3].push(...input);
var concatApply = (input) => Array.prototype.concat.apply([1,2,3], input);
var pushApply = (input) => Array.prototype.push.apply([1,2,3], input);
var spread = (input) => [1,2,3,...input];
var loop = (input) => {
  var acc = [1,2,3];
  for(var i = 0, l = input.length; i < l; i++) {
    acc.push(input[i]);
  }
  return acc;
}

Tests:

Array.prototype.concat
const result = concat(params);
Array.prototype.push spread
const result = push(params);
Array.prototype.concat.apply
const result = concatApply(params);
Array.prototype.push.apply
const result = pushApply(params);
Spread
const result = spread(params);
Loop Push
const result = spread(params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to compare six different approaches for merging an array with another array of random numbers:

1. `Array.prototype.concat`
2. Spread operator (`...` in JavaScript)
3. `Array.prototype.concat.apply`
4. `Array.prototype.push` followed by spread operator (`push(...)` in JavaScript)
5. Spread operator (`...` in JavaScript) without the initial array
6. Loop-based approach using `push`

**Options Compared**

The six approaches are being compared to determine which one is the most efficient.

* **Pros and Cons:**
	+ `Array.prototype.concat`: A traditional method that uses a new array object to concatenate two arrays. It's simple but may be slower for large datasets due to the overhead of creating a new array.
	+ Spread operator (`...`): A new ES6 feature that allows for more concise and expressive code. It can be faster than `concat` because it avoids the overhead of creating a new array object.
	+ `Array.prototype.concat.apply`: Similar to `concat`, but uses the `apply` method to pass multiple arguments to the `concat` function. This approach is slightly slower due to the added indirection.
	+ `Array.prototype.push` followed by spread operator (`push(...)`): This approach avoids creating a new array object, but it's less concise than using the spread operator directly.
	+ Spread operator without initial array (`...`): This approach requires an existing array as input, which may be slower for large datasets due to the need to create a temporary array or use another data structure.
	+ Loop-based approach using `push`: The slowest approach, as it involves manually iterating over the arrays and pushing elements into each other. It's also less concise than the other approaches.

**Library/Functionality Used**

The benchmark uses several functions:

* `Array.prototype.concat`
* `Array.prototype.concat.apply`
* `Array.prototype.push`
* Spread operator (`...`)

These functions are built-in to JavaScript and are widely supported by most browsers.

**Special JS Feature/ Syntax**

The benchmark uses the new ES6 spread operator (`...`) in several places. This feature allows for more concise code, as it avoids the need to use `Array.prototype.concat` or `Array.prototype.push` with arrays of arguments.

Overall, this benchmark is designed to provide a fair comparison of different approaches for merging arrays in JavaScript, highlighting the benefits and trade-offs of each approach.

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 85 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	2245.9 Ops/sec
Array.prototype.push spread	238.0 Ops/sec
Array.prototype.concat.apply	360.4 Ops/sec
Array.prototype.push.apply	242.2 Ops/sec
Spread	497.5 Ops/sec
Loop Push	493.6 Ops/sec

Related benchmarks:

Array merge -> Concat | Push spread | Concat Apply | Push Apply | Spread | Loop Push (large array) (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Array.prototype.push spread

Array.prototype.concat.apply

Array.prototype.push.apply

Spread

Loop Push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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