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)

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

Test name	Executions per second
Concat	6151995.5 Ops/sec
Spread	19403450.0 Ops/sec
Push	32688530.0 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.

Related benchmarks:

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

Comparing performance of: Concat vs Spread vs Push

Created: 2 years ago by: Guest

Jump to the latest result

Concat

Spread

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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