Benchmark: concat vs spread operator vs push (big array)

Script Preparation code:

var array1 = [...Array(50000).keys()] // [0, 1, 2, ..., 49999]
var array2 = [...Array(50000).keys()] // [0, 1, 2, ..., 49999]

Tests:

Array.prototype.concat
array1 = array1.concat(array2)
Spread operator
array1 = [...array1, array2]
Array.prototype.push
array1.push(...array2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Spread operator
Array.prototype.push

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 llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Measuring the performance of different approaches to concatenate or push arrays in JavaScript can be beneficial for developers who need to optimize their code.

The provided benchmark uses three test cases:

1.  `Array.prototype.concat()`: This method creates a new array by copying elements from an existing array and concatenating them with another array.
2.  The spread operator (`...`): This syntax is used to create a new array by spreading the elements of an existing array.
3.  `Array.prototype.push()`: This method adds one or more elements to the end of an array.

**Comparison**

The benchmark compares the performance of these three approaches for large arrays (50,000 elements).

**Pros and Cons:**

*   **`Array.prototype.concat()`**:
    *   Pros:
        *   Well-documented and widely supported.
        *   Can be used to concatenate two arrays of different lengths.
    *   Cons:
        *   Creates a new array, which can lead to performance issues for large datasets.
        *   May not be as efficient as other methods for very large arrays due to the overhead of creating a new object.
*   **Spread operator (`...`)**:
    *   Pros:
        *   Memory-efficient, as it creates a new array without allocating additional memory for an intermediate object.
        *   Can be used with ES6+ syntax and is supported by modern browsers and Node.js versions.
    *   Cons:
        *   Less familiar than `Array.prototype.concat()` or `Array.prototype.push()`, which might affect performance in older environments.
*   **`Array.prototype.push()`**:
    *   Pros:
        *   Modifies the original array, reducing memory allocation overhead compared to concatenating with a new array.
        *   More efficient for large arrays since it only requires updating the existing array's length and elements.
    *   Cons:
        *   Requires modifying the original array, which might be undesirable in some scenarios.

**Library Usage**

The benchmark uses the `Array.prototype.concat()` method from the ECMAScript standard. The spread operator (`...`) is also used as a feature of the JavaScript language.

**Special JS Feature or Syntax**

None are mentioned in this benchmark.

**Other Alternatives**

Alternatives to these approaches include:

*   Using `Array.from()`: This method creates a new array from an iterable, similar to the spread operator. However, it's more verbose and less efficient for large datasets.
*   Utilizing `slice()` with `concat()` or `push()`: This approach involves creating a new array using `slice()` followed by concatenation or push operation. It can be more efficient than pushing elements to an existing array but might not outperform the spread operator in most cases.

When writing performance-critical code, it's essential to consider these factors and choose the approach that best suits your specific use case.

Related benchmarks:

concat vs spread operator vs push (big array) (version: 0)

Compare the spread operator vs concat and push with big arrays.

Comparing performance of: Array.prototype.concat vs Spread operator vs Array.prototype.push

Created: 6 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Spread operator

Array.prototype.push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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