Benchmark: Array push vs spread vs concat

Script Preparation code:

var arr = [4, 2, 1];

Tests:

Concat
arr = arr.concat(3);
Push
arr.push(3)
Spread syntax
arr = [...arr, 3]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
Push
Spread syntax

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Opera 105 on Windows

View result in a separate tab

Test name	Executions per second
Concat	3047.6 Ops/sec
Push	14180134.0 Ops/sec
Spread syntax	1.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The main goal of this benchmark is to compare the performance of three different ways to add an element to an array: `push`, `spread syntax` (also known as "rest parameter syntax"), and `concat`. The test case assumes that the original array must contain the new element, thus modifying it in the process.

**Test Cases**

There are three individual test cases:

1. **Concat**: This test case measures the performance of using the `concat()` method to add a new element to an array.
2. **Push**: This test case measures the performance of using the `push()` method to add a new element to an array.
3. **Spread syntax**: This test case measures the performance of using the spread syntax (e.g., `arr = [...arr, 3]`) to add a new element to an array.

**Library: None**

None of the test cases use any external libraries.

**Special JS Feature/Syntax: Spread Syntax**

The spread syntax is a relatively recent feature introduced in ECMAScript 2015. It allows you to create a new array by spreading the elements of an existing array into a new array.

**Performance Comparison**

When adding an element to an array, all three approaches have similar performance characteristics:

* **Push**: This approach creates a new array and assigns it to the `arr` variable, while modifying the original array by incrementing its length. The operation has a constant time complexity of O(1), making it the fastest option.
* **Concat**: This approach also creates a new array and returns it, while leaving the original array unchanged. However, since the original array is modified in the process (by having its length incremented), this operation has a slightly higher overhead compared to `push`. The time complexity is still O(n), where n is the number of elements in the array.
* **Spread syntax**: This approach creates a new array and assigns it to the `arr` variable, while modifying the original array by assigning it a new value. The time complexity is similar to `concat`, which is O(n).

**Pros and Cons**

Here's a summary of the pros and cons of each approach:

* **Push**:
	+ Pros: Fastest, with a constant time complexity.
	+ Cons: May have higher overhead due to the need to create a new array and increment the length of the original array.
* **Concat**:
	+ Pros: Easy to implement and understand.
	+ Cons: Slightly slower than `push` due to the overhead of creating a new array.
* **Spread syntax**:
	+ Pros: Modern and concise way to add elements to an array.
	+ Cons: Similar to `concat` in terms of performance.

**Alternatives**

If you're looking for alternative ways to add elements to an array, here are a few options:

* **Array.prototype.splice()**: This method replaces the element at the specified position with the new value. It can be slower than `push` and `spread syntax`, but it's useful when you need to remove or replace multiple elements.
* **Array.prototype.unshift()**: This method adds an element to the beginning of the array. It has a similar time complexity to `push`, but it may have higher overhead due to the need to create a new array and increment the length of the original array.

In summary, when adding an element to an array, `push` is generally the fastest approach, followed by `concat` and then `spread syntax`. However, the choice of method ultimately depends on your specific use case and personal preference.

Related benchmarks:

Array push vs spread vs concat (version: 0)

When adding an element to an array, measure the performance of push, spread syntax and concat. The case is when original array must contain the new element, thus modifying it in process.

Comparing performance of: Concat vs Push vs Spread syntax

Created: 5 years ago by: Registered User

Jump to the latest result

Concat

Push

Spread syntax

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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