Benchmark: Array concat vs spread operator vs push with more data

Script Preparation code:

var array1 = [...Array(1000).keys()]
var array2 = array1.map(i => i * 10)

Tests:

Array.prototype.concat
const result = array1.concat(array2);
spread operator
const result = [ ...array1, ...array2 ]
Push
const result = array1.push(...array2);

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

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

Browser/OS: Firefox 136 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	264782.2 Ops/sec
spread operator	75444.9 Ops/sec
Push	32985.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is tested on the provided JSON?**

The provided JSON represents a JavaScript microbenchmark test case created using MeasureThat.net. The test compares three approaches for concatenating two arrays: `Array.prototype.concat()`, the spread operator (`...`), and the `push()` method with multiple elements.

**Options compared**

1. **Array.prototype.concat**: This method creates a new array by copying all elements from both input arrays.
2. **Spread operator (`...`)**: This operator spreads the elements of an iterable (such as an array) into a new array, allowing for concatenation in a concise way.
3. **Push with multiple elements**: This approach uses `push()` to add elements to the end of an array.

**Pros and cons of each approach**

1. **Array.prototype.concat**
	* Pros: Efficient and widely supported; suitable for large datasets.
	* Cons: Creates a new array, which can lead to memory allocation issues.
2. **Spread operator (`...`)** 
	* Pros: Concise and expressive; efficient in most cases.
	* Cons: May be slower than `concat()` due to the creation of an intermediate array; requires modern JavaScript engines.
3. **Push with multiple elements**
	* Pros: Efficient, as it modifies the original array without creating a new one.
	* Cons: Requires multiple push() calls for each element, which can lead to slower performance.

**Library usage**

None in this specific test case. However, if any of these approaches rely on libraries or external dependencies, they would need to be considered in the analysis.

**Special JavaScript feature or syntax**

The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for concise array concatenation and spreading elements into new arrays. This test case likely relies on this feature to demonstrate its performance compared to traditional methods.

**Other alternatives**

1. **Array.prototype.push() with spread operator**: Another way to concatenate arrays is by using `push()` followed by the spread operator: `[...array, ...array2]`. However, this approach still requires multiple push() calls and may not be as efficient as the spread operator alone.
2. **Array.from() method**: Introduced in ECMAScript 2015 (ES6), `Array.from()` can also be used to create a new array from an iterable, but it's less common for concatenation use cases.

**Benchmarking considerations**

* The test uses MeasureThat.net, which is a popular benchmarking tool specifically designed for JavaScript microbenchmarks.
* The test case focuses on comparing the performance of three approaches, ensuring that the results are relevant and comparable.
* The use of multiple executions per second (ExecutionsPerSecond) helps to mitigate variations in individual runs and provides a more accurate picture of each approach's performance.

By considering these factors, we can gain insights into the relative performance and efficiency of the three array concatenation approaches.

Related benchmarks:

Array concat vs spread operator vs push with more data (version: 0)

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: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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