Benchmark: Array.prototype.concat vs spread operator(push) vs for of

Script Preparation code:

var arr = Array(100).fill([{n: ''}]);
var arr2 = Array(100).fill([{n: ''}]);

Tests:

Array.prototype.concat
var other = arr.concat(arr2);
spread operator
arr.push(...arr2); var other = arr;
array.push
for(let item of arr2) { arr.push(item); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
array.push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Linux; Android 9; SM-J530F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Mobile Safari/537.36

Browser/OS: Chrome Mobile 80 on Android

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	182079.0 Ops/sec
spread operator	18459.0 Ops/sec
array.push	14502.5 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):

LLMs can make mistakes. Check important info.

This benchmark compares three methods for combining two arrays in JavaScript:

* **`Array.prototype.concat()`**: This is the traditional method for joining arrays, creating a new array containing all elements from both input arrays. 
    * **Pros:** Well-established, widely understood syntax. Works reliably with any array type.
    * **Cons:** Can be slower than other methods, especially with large arrays due to potentially allocating new memory for the combined array.

* **Spread Operator (`...`)**: This is a more modern approach introduced in ES6, using the three dots syntax to expand an array into its individual elements. 
    * **Pros:** Concise and readable syntax. Often considered faster than `concat()` due to how it handles memory allocation.
    * **Cons:**  Requires understanding of ES6 features, might not be supported in older browsers.

* **`array.push()` loop**: This method iterates through the second array and adds each element to the first array using the `push()` method. 
    * **Pros:**  Provides more granular control over the process. Can potentially be optimized for specific use cases.
    * **Cons:** More verbose syntax compared to spread operator.  Potentially slower than spread operator in most scenarios.

**Other Considerations:**

* **Array Size**: The performance difference between these methods can become more significant as the size of the arrays increases. 
* **Memory Usage**: `concat()` creates a new array, which might impact memory consumption. Spread operator and `push()` loop modify existing arrays, potentially having less impact on memory usage.

**Alternatives:**

* Using libraries like Lodash or Underscore: These libraries offer optimized functions for array manipulation, potentially offering better performance than native methods.
*  `Array.prototype.forEach` with a function to build a new array. This approach offers flexibility and can be customized based on specific requirements.

The benchmark results show that the spread operator is generally the fastest method in this scenario, followed by `concat()`, and then the `push()` loop. Keep in mind that these results are specific to the environment where the benchmark was run (Chrome Mobile 80 on Android) and might vary on different platforms or browsers.

Related benchmarks:

Array.prototype.concat vs spread operator(push) vs for of (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: Array.prototype.concat vs spread operator vs array.push

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

array.push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one month ago):