Benchmark: updating the existing value of array using concat vs spread operator vs push

Tests:

Array.prototype.concat
var other = [ 1, 2 ]; var params = [ "hello", true, 7 ]; other = other.concat(params);
spread operator
var other = [ 1, 2 ]; var params = [ "hello", true, 7 ] other = [ ...other, ...params ]
Push
var other = [ 1, 2 ]; var params = [ "hello", true, 7 ]; other.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:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0

Browser/OS: Firefox 75 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	11001552.0 Ops/sec
spread operator	9385643.0 Ops/sec
Push	3132691.2 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The benchmark is designed to compare three different approaches for updating an array in JavaScript:

1. `concat()`: The traditional method of concatenating two arrays using the `+` operator or the `concat()` method.
2. Spread Operator (`...`): A new way of creating a copy of an array and then merging it with another array, introduced in ES6.
3. `push(...)` : A more concise way to append elements to an array using the spread operator.

**Options Compared**

The benchmark compares the performance of these three approaches:

* **Pros:**
	+ Spread Operator (`...`): It's a more modern and efficient approach that avoids creating intermediate arrays, which can lead to better performance.
	+ `push(...)` : It's a concise way to append elements to an array, making it easy to read and maintain.
* **Cons:**
	+ `concat()`: It creates an intermediate array, which can be slower than the other two approaches.

**Considerations**

When choosing between these approaches, consider the trade-offs:

* Performance: Spread Operator (`...`) is likely to be faster due to its avoidance of intermediate arrays.
* Readability: `push(...)` is more concise and readable, while `concat()` can be less intuitive for some developers.

**Library Usage**

In this benchmark, there are no external libraries used. The code is self-contained, using only built-in JavaScript features.

**Special JS Features or Syntax**

There are no special features or syntax mentioned in the JSON. All three approaches use standard JavaScript syntax.

**Other Alternatives**

If you need to update an array in JavaScript, here are some alternative approaches:

* `slice()`: Create a copy of the original array and then concatenate with another array using `slice()` and `concat()`.
* `reduce()`: Use the `reduce()` method to iterate over the elements of both arrays and accumulate them into a new array.
* `forEach()`: Use the `forEach()` method to iterate over the elements of both arrays and update the original array in place.

These alternatives may have different performance characteristics compared to the spread operator and `push(...)` methods.

Related benchmarks:

updating the existing value of array using concat vs spread operator vs push (version: 1)

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: Registered User

Jump to the latest result

Array.prototype.concat

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 one month ago):