Benchmark: Array concat vs spread operator vs push large list

Tests:

Array.prototype.concat
var params = [ "hello", true, 7000000 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7000000 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7000000 ]; var other = [ 1, 2 ].push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Purpose**

The benchmark compares three approaches for concatenating or adding elements to an array:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. `Array.prototype.push()` with the spread operator (`...`)

These methods are used to add one or more arrays (or values) to an existing array.

**Options Compared**

The benchmark compares the performance of these three approaches for a large list:

* **Array.prototype.concat()**: This method creates a new array by concatenating two or more arrays.
* **Spread Operator (`...`)**: This operator is used to expand an array into individual elements, allowing them to be added to another array.
* **Push with Spread Operator (`Array.prototype.push(...)`**): This approach uses the spread operator to add one or more arrays (or values) to an existing array by modifying its length property.

**Pros and Cons of Each Approach**

1. **Array.prototype.concat()**
	* Pros: Simple, intuitive, and widely supported.
	* Cons: Creates a new array, which can be memory-intensive for large lists.
2. **Spread Operator (`...`)**:
	* Pros: More concise than `concat()` and doesn't create a new array (it modifies the existing one).
	* Cons: Introduced in ES6, so not supported by older browsers. Also, it might have performance implications due to its nature of modifying an array.
3. **Push with Spread Operator (`Array.prototype.push(...)`**:
	* Pros: Combines the benefits of `concat()` and spread operator (no new array creation).
	* Cons: Requires using `push()` method, which can be less intuitive than other approaches.

**Library Used**

None, as this benchmark only uses built-in JavaScript features.

**Special JS Feature/Syntax**

The use of spread operators (`...`) is a special feature introduced in ES6. It allows for more concise and expressive code when working with arrays.

**Benchmark Results**

According to the provided results:

* `Array.prototype.concat()` has the highest number of executions per second (40,767,652), indicating it's likely the fastest approach.
* `Push with Spread Operator (`Array.prototype.push(...)`**) has a lower number of executions per second (8,019,978.5), suggesting it might be slower due to the additional function call.
* The spread operator (`...`) falls in between, with a moderate number of executions per second (3,405,136).

**Other Alternatives**

Some alternative approaches for concatenating or adding elements to an array include:

1. Using `Array.prototype.reduce()` method
2. Using `Array.prototype.slice()` method followed by assignment to the original array.
3. Creating a new array using the `Array.from()` method.

However, these alternatives are not tested in this benchmark and might have different performance characteristics depending on the specific use case.

Related benchmarks:

Array concat vs spread operator vs push large list (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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