Benchmark: Spread vs. push vs. concat

Tests:

Concat
const arr = ["hello", true, 7]; const arr2 = [ 1, 2, 3 ] const newArr = arr.concat(arr2)
Spread
const arr = ["hello", true, 7]; const arr2 = [ 1, 2, 3 ] const newArr = [...arr, ...arr2]
Push
const arr = ["hello", true, 7]; const arr2 = [ 1, 2, 3 ] const newArr = arr.push(arr2)

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Push

70.8M/s

Spread

41.2M/s

Concat

16.1M/s

Fastest: Push (4.4x faster)

View exact numbers

✓ Push: 70,751,064 ops/sec
• Spread: 41,167,844 ops/sec
• Concat: 16,078,044 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
Spread
Push

Fastest: N/A

Slowest: N/A

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/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Push

32.7M/s

Spread

19.4M/s

Concat

6.2M/s

View exact numbers

Test name	Executions per second
✓ Push	32,688,530 Ops/sec
Spread	19,403,450 Ops/sec
Concat	6,151,996 Ops/sec

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 explain what's being tested.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark, specifically testing three different methods for concatenating arrays: `push`, `concat`, and spread operator (`...`). The goal of this benchmark is to compare the performance of these three approaches in terms of speed and efficiency.

**Options compared**

* **Push**: Using the `push` method to add elements to an array.
* **Concat**: Using the `concat` method to combine two arrays into one.
* **Spread operator**: Using the spread operator (`...`) to create a new array by concatenating multiple arrays.

**Pros and cons of each approach**

1. **Push**:
	* Pros: Efficient in terms of memory usage, as it only adds elements at the end of the array without creating intermediate copies.
	* Cons: Can be slower than other methods due to the need to update the length property of the array, which can lead to more overhead on the JavaScript engine.
2. **Concat**:
	* Pros: Simple and straightforward, with a clear and predictable performance profile.
	* Cons: Creates an intermediate copy of the original arrays, which can be memory-intensive for large datasets.
3. **Spread operator** (`...`):
	* Pros: Efficient in terms of memory usage, as it creates a new array without modifying the original elements.
	* Cons: May have a slight overhead due to the creation of a new array object.

**Library and syntax**

None of the test cases use any external libraries. However, they do utilize JavaScript features such as arrays and methods like `push`, `concat`, and spread operator (`...`).

**Special JS feature or syntax**

The spread operator (`...`) is a relatively recent addition to JavaScript (introduced in ES6), which allows for more concise and expressive code. It's also worth noting that the `push` method has been around since the early days of JavaScript, but its performance profile might be different from modern JavaScript engines.

**Other alternatives**

There are other methods for concatenating arrays in JavaScript, such as:

* `slice()`: Creating a new array by slicing the original array and then concatenating it with another array.
* `Array.prototype.reduce()`: Using the `reduce()` method to concatenate two arrays into one.

However, these approaches might have different performance characteristics compared to the methods tested in this benchmark.

Spread vs. push vs. concat (version: 0) Benchmark.js

Comparing performance of: `Concat vs Spread vs Push`

Created: 2 years ago by: Guest

Go to the latest result

Concat

Spread

Push

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Spread vs. push vs. concat (version: 0) Benchmark.js

Comparing performance of: Concat vs Spread vs Push

Created: 2 years ago by: Guest

Go to the latest result

Concat

Spread

Push

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `Concat vs Spread vs Push`