Benchmark: Array.prototype.concat vs spread operator

Script Preparation code:

var array1 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array2 = Array(400).fill().map(() => Math.round(Math.random() * 40));

Tests:

Array.prototype.concat
var others = array1.concat(array2);
spread operator
var others = [...array1, ...array2];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two methods for concatenating arrays in JavaScript:

**1. `Array.prototype.concat()`:** This is the traditional method using the built-in `concat()` function available on arrays.

* **Benchmark Definition:** `var others = array1.concat(array2);`
   * **Pros:** Well-established, widely understood. 
   * **Cons:** Can be slower than the spread operator for large arrays due to its underlying implementation which involves creating a new array.

**2. Spread Operator (`...`)**: Introduced in ES6, this syntax allows you to expand the elements of an array into individual items.

* **Benchmark Definition:** `var others = [...array1, ...array2];`
   * **Pros:** Often more concise and potentially faster for large arrays as it avoids creating a new array object.
   * **Cons:** Requires ES6 support (not present in all browsers).

**Other Considerations:**

* **Array Size:** The performance difference between these methods becomes more noticeable with larger arrays.
* **Data Type:**  The type of data within the arrays can also influence performance.

**Alternatives:**

While `concat()` and the spread operator are common, there are other ways to combine arrays in JavaScript:

* **`Array.prototype.push()`: ** This method adds elements from one array to the end of another. It's efficient for appending but not ideal for creating a new combined array.
* **`for...of` loop:** You can iterate through an array and manually construct a new array containing all the elements.

**Important Notes:**

The benchmark results you provided show that the spread operator is significantly faster than `concat()` in this specific scenario. However, real-world performance can vary depending on factors mentioned above.

Let me know if you have any more questions or want to explore other benchmarks!

Related benchmarks:

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

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

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

Created: 8 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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