Benchmark: Array merge -> Concat | Push spread | Concat Apply | Push Apply | Spread

Script Preparation code:

var params = [ "hello", true, 1, { foo: 'bar' } ];

var concat = (input) => [].concat(params);
var push = (input) => [].push(...input);
var concatApply = (input) => Array.prototype.concat.apply([], input);
var pushApply = (input) => Array.prototype.push.apply([], input);
var spread = (input) => [...input];
var loop = (input) => {
  var acc = [];
  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 dive into the explanation of the benchmark.

**Benchmark Definition**

The benchmark is designed to compare six different approaches for merging arrays in JavaScript:

1. Using `Array.prototype.concat()`
2. Using the spread operator (`...`)
3. Using the spread operator (`...`) with a function (`pushApply`)
4. Using the push method followed by spreading (`loopPush`)
5. Using the spread operator with a function (`concatApply`)
6. Using the push method followed by spreading (`pushApply`)

The benchmark aims to determine which approach is the most efficient and scalable for merging arrays in JavaScript.

**Options Compared**

Here are the options compared in the benchmark:

1. **Array.prototype.concat()**: This is the traditional way of concatenating arrays in JavaScript.
2. **Spread operator (`...`)**: This is a new feature introduced in ES6 that allows spreading an array or object into another array or object.
3. **PushApply**: This is a variation of the spread operator used with a function to push elements onto an array.
4. **LoopPush**: This is another variation of the push method followed by spreading elements onto an array.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Array.prototype.concat()**:
	* Pros: Simple, widely supported, and well-documented.
	* Cons: Can be slow for large arrays, as it creates a new array object.
2. **Spread operator (`...`)**:
	* Pros: Fast, modern, and efficient way of merging arrays.
	* Cons: May not be supported in older browsers or environments.
3. **PushApply**:
	* Pros: Similar to the spread operator, but with an extra layer of indirection.
	* Cons: Less efficient than the spread operator due to the function call overhead.
4. **LoopPush**:
	* Pros: Simple and easy to understand, similar to the push method followed by spreading.
	* Cons: Less efficient than other approaches due to the loop overhead.

**Other Considerations**

The benchmark also considers the impact of device platform (Desktop or Mobile), operating system (Windows), and browser version (Chrome 101) on the performance of each approach. This is important because different browsers and devices may have varying levels of support for modern JavaScript features and algorithms.

**Library Used**

There is no specific library used in this benchmark, as all the implementations are part of the standard JavaScript language.

**Special JS Feature or Syntax**

The spread operator (`...`) is a special feature introduced in ES6 that allows spreading an array or object into another array or object. This syntax is supported by most modern browsers and environments.

**Benchmark Results**

According to the benchmark results, the spread operator (`...`) is the fastest approach, followed closely by `Array.prototype.concat()`. The other approaches are slower due to various overheads such as function call overhead (PushApply), loop overhead (LoopPush), or lack of support in older browsers and environments.

Latest run results:

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

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

Browser/OS: Chrome 101 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3234381.5 Ops/sec
Array.prototype.push spread	3916858.2 Ops/sec
Array.prototype.concat.apply	1560971.9 Ops/sec
Array.prototype.push.apply	2314218.2 Ops/sec
Spread	4666604.0 Ops/sec
Loop Push	4761129.5 Ops/sec

Related benchmarks:

Array merge -> Concat | Push spread | Concat Apply | Push Apply | Spread | Loop Push (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: 6 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):