Benchmark: Array concat vs spread operator vs push 100k v5

Script Preparation code:

const arrayLength = 100000;

// Function to generate random data (number, string, or boolean)
const getRandomData = () => {
  const randomNumber = Math.floor(Math.random() * 1000); // Random number between 0 and 999
  const randomString = Math.random().toString(36).substring(7); // Random string
  const randomBoolean = Math.random() < 0.5; // Random boolean (true or false)

  // Randomly choose one of the three data types
  const randomDataType = [randomNumber, randomString, randomBoolean][
    Math.floor(Math.random() * 3)
  ];

  return randomDataType;
};

var largeArray1 = Array.from({ length: arrayLength }, () => getRandomData());
var largeArray2 = Array.from({ length: arrayLength }, () => getRandomData());
var largeArray3 = [...largeArray1];

Tests:

Array.prototype.concat
var other = [1,2,3].concat(largeArray2);
spread operator
var other = [...[1,2,3], ...largeArray2]
Push with new array
var other = [1,2,3].push(...largeArray2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push with new array

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4555.4 Ops/sec
spread operator	1355.8 Ops/sec
Push with new array	1030.9 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided JSON and explain what's being tested, compared, and discussed.

**Benchmark Definition**

The website MeasureThat.net provides a benchmark that compares the performance of three approaches:

1.  **Array.prototype.concat**: This is a traditional method for concatenating arrays in JavaScript.
2.  **Spread Operator (`...`)**: This is a new syntax introduced in ECMAScript 2015 (ES6) that allows for more concise array creation and manipulation.
3.  **Push with new array**: This approach involves using the `push()` method to add elements to an existing array.

**Benchmark Preparation Code**

The provided JSON includes a script preparation code snippet that generates random data:

*   `getRandomData()`: A function that returns a random number, string, or boolean value.
*   Two large arrays (`largeArray1` and `largeArray2`) are created using `Array.from()` with the same length of 100,000 elements. Each element is generated by calling `getRandomData()`. The third array (`largeArray3`) is created by spreading the contents of `largeArray1`.

**Html Preparation Code**

There is no HTML preparation code provided for this benchmark.

**Individual Test Cases**

The benchmark consists of three test cases that compare the performance of each approach:

1.  **`Array.prototype.concat`**: This test case creates a new array using `concat()` and concatenates it with `largeArray2`.
2.  **Spread Operator (`...`)**: This test case uses the spread operator to create a new array by spreading the elements of `[1,2,3]` and `largeArray2`.
3.  **Push with new array**: This test case uses `push()` to add the elements of `largeArray2` to an existing array (`[1,2,3]`).

**Pros and Cons**

Here's a brief overview of the pros and cons for each approach:

*   **Array.prototype.concat**:
    *   Pros: Traditional method with good browser support.
    *   Cons: Can be slower due to the overhead of creating a new array.
*   **Spread Operator (`...`)**:
    *   Pros: Concise syntax, efficient, and modern.
    *   Cons: May require a newer JavaScript engine or environment for optimal performance.
*   **Push with new array**:
    *   Pros: Can be faster since it avoids creating a new array.
    *   Cons: May lead to slower performance in some cases due to the overhead of `push()`.

**Libraries and Special JS Features**

None of these approaches rely on specific libraries or special JavaScript features.

**Alternatives**

Other alternatives for performing array concatenation could be:

*   Using `Array.prototype.slice().concat()`: This approach creates a new slice from the original array, which can lead to additional overhead.
*   Using `Array.prototype.reduce()` with an accumulator: This approach can be more functional and concise but might have performance implications due to the overhead of reduction.

For benchmarking purposes, MeasureThat.net likely aims to compare these approaches in a standardized way to help developers choose the most efficient method for their specific use cases.

Related benchmarks:

Array concat vs spread operator vs push 100k v5 (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 with new array

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push with new array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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