Benchmark: Array concat vs double spread operator vs push with 10 objects

Tests:

Array.prototype.concat
var originArray = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }] var appendingArray = [{ id: 11 }, { id: 12 }, { id: 13 }, { id: 14 }, { id: 15 }, { id: 16 }, { id: 17 }, { id: 18 }, { id: 19 }, { id: 20 }]; originArray = originArray.concat(appendingArray);
double spread operator
var originArray = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }] var appendingArray = [{ id: 11 }, { id: 12 }, { id: 13 }, { id: 14 }, { id: 15 }, { id: 16 }, { id: 17 }, { id: 18 }, { id: 19 }, { id: 20 }]; originArray = [...originArray, ...appendingArray];
Push
var originArray = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }] var appendingArray = [{ id: 11 }, { id: 12 }, { id: 13 }, { id: 14 }, { id: 15 }, { id: 16 }, { id: 17 }, { id: 18 }, { id: 19 }, { id: 20 }]; originArray.push(...appendingArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
double spread operator
Push

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared options, pros and cons of each approach, and other considerations.

**Benchmark Overview**

The benchmark is comparing three ways to concatenate arrays: `Array.prototype.concat`, the double spread operator (`...`), and the `push` method with spreading (`...`). The test case uses two identical arrays, `originArray` and `appendingArray`, which are populated with 10 objects each.

**Options Compared**

1. **Array.prototype.concat**: A traditional method for concatenating arrays, using the `concat()` function.
2. **Double Spread Operator (`...`)**: A new ES6 feature that allows spreading an array into multiple arguments for a function call or assignment.
3. **Push with Spreading (`...`)**: Using the `push()` method to add elements to an array and then spreading the resulting array using the double spread operator.

**Pros and Cons of Each Approach**

1. **Array.prototype.concat**:
	* Pros: Wide browser support, simple to use.
	* Cons: Can create a new array object, potentially leading to memory issues if not used carefully.
2. **Double Spread Operator (`...`)**:
	* Pros: Concise syntax, efficient for small arrays.
	* Cons: Only available in modern browsers (since ES6), may have performance issues with large arrays due to the overhead of creating multiple array objects.
3. **Push with Spreading (`...`)**:
	* Pros: Efficient for large arrays, allows using `push()` and then spreading the resulting array.
	* Cons: Requires understanding of how `push()` works internally, may not be as readable as other approaches.

**Other Considerations**

* The benchmark is measuring the number of executions per second (ExecutionsPerSecond), which indicates the performance of each approach. Lower values indicate better performance.
* The browser and device used for testing (Chrome 77 on Windows Desktop) might affect the results, so it's essential to consider different scenarios.
* The benchmark doesn't account for memory usage or garbage collection, which could be relevant factors in a real-world application.

**Libraries Used**

None are explicitly mentioned in the provided JSON. However, `Array.prototype.concat()` is a built-in JavaScript method.

**Special JS Features/Syntax**

The double spread operator (`...`) is a new ES6 feature introduced in 2015. It allows spreading an array into multiple arguments for a function call or assignment.

Latest run results:

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

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

Browser/OS: Chrome 77 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	1715096.2 Ops/sec
double spread operator	2845163.8 Ops/sec
Push	2939615.8 Ops/sec

Related benchmarks:

Array concat vs double spread operator vs push with 10 objects (version: 0)

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

Comparing performance of: Array.prototype.concat vs double spread operator vs Push

Created: 5 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

double spread operator

Push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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