Benchmark: speed test: concat vs spread vs push BdB

Tests:

concat
let array1 = []; const array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1 = array1.concat(array2);
push
const array1 = []; const array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1.push(...array2);
spread
let array1 = []; const array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1 = [...array1, ...array2];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
push
spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.0.1

View result in a separate tab

Test name	Executions per second
concat	37911440.0 Ops/sec
push	23434042.0 Ops/sec
spread	64675644.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark is designed to compare the performance of three different approaches for concatenating arrays in JavaScript:

1. `concat()`
2. Spread syntax (`...`)
3. `push()` with array spreading

These methods are commonly used in JavaScript to combine arrays, but their performance can vary depending on the specific use case.

**Options Compared**

Here's a brief overview of each option and its pros and cons:

1. **`concat()`**: This method creates a new array by copying elements from an existing array and adding new elements.
	* Pros: Simple and straightforward, works well for small arrays.
	* Cons: Creates a new array, which can lead to memory allocation overhead.
2. **Spread syntax (`...`)**: This syntax uses the spread operator to create a new array by taking elements from another array.
	* Pros: Efficient, creates a new array with minimal overhead, and is compatible with most browsers.
	* Cons: May be less intuitive for some developers, requires JavaScript version 3.8+.
3. **`push()` with array spreading**: This method uses the `push()` method to add elements to an existing array and then spreads the newly added elements onto the original array using the spread operator (`...`).
	* Pros: Efficient, creates a new array with minimal overhead, similar to spread syntax but may be slightly slower.
	* Cons: May be less intuitive for some developers, requires JavaScript version 3.8+.

**Library and Special JS Features**

None of these benchmarks use any external libraries or special JavaScript features beyond the standard language syntax.

**Other Considerations**

When choosing between these methods, consider the following factors:

* **Memory allocation overhead**: If you're working with large arrays, creating a new array using `concat()` might lead to significant memory allocation overhead. Spread syntax and `push()` with array spreading are generally more efficient in this regard.
* **Browser compatibility**: If you need to support older browsers, you may want to avoid using spread syntax or `push()` with array spreading, as they require JavaScript version 3.8+.

**Benchmark Results**

The provided benchmark results show that:

* `concat()` is the slowest option, likely due to its memory allocation overhead.
* Spread syntax and `push()` with array spreading are very close in performance, with spread syntax being slightly faster.

Keep in mind that these results may vary depending on your specific use case, JavaScript version, and browser environment.

**Alternatives**

If you're interested in exploring other options for concatenating arrays, consider the following alternatives:

* **`Array.prototype.concat()`**: This method is similar to `concat()`, but it takes an array as an argument instead of returning a new array.
* **`Array.prototype.push.apply()`**: This method uses `push()` with array spreading (similar to `push()` with `...`) but applies it to the entire array at once.
* **Native array concatenation methods** (e.g., `concat()`, `push()`, and spread syntax): These methods may have different performance characteristics depending on your JavaScript version and browser environment.

I hope this explanation helps you understand the benchmark results and choose the best approach for your specific use case!

Related benchmarks:

speed test: concat vs spread vs push BdB (version: 0)

Comparing performance of: concat vs push vs spread

Created: 4 years ago by: Guest

Jump to the latest result

concat

push

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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