Benchmark: speed test: concat vs spread vs push

Tests:

concat
var array1 = ["dog", "cat", "red", "blue", "yellow", "one", "two" ]; var array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1.concat(array2);
push
var array1 = ["dog", "cat", "red", "blue", "yellow", "one", "two" ]; var array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array2.map(el => array1.push(el));
spread
var array1 = ["dog", "cat", "red", "blue", "yellow", "one", "two" ]; var array2 = ["bird", "snake", "green", "brown", "black", "three", "four" ]; array1 = [...array1, ...array2];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
push
spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
concat	17000994.0 Ops/sec
push	34585948.0 Ops/sec
spread	34870324.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance differences between three approaches to concatenate arrays: `concat()`, `push()` with `map()`, and spread syntax (`...`). The benchmark aims to identify which approach is the fastest for concatenating two arrays.

**Benchmark Definition**

The benchmark definition in JSON format specifies:

*   Three test cases, each testing a different array concatenation method.
*   No script preparation code or HTML preparation code are required for this benchmark.

**Test Cases**

1.  **Concat**: This test case uses the traditional `concat()` method to concatenate two arrays, `array1` and `array2`. The script prepares these two arrays with some sample values.
2.  **Push**: This test case uses the `push()` method in combination with `map()` to concatenate the same two arrays, `array1` and `array2`.
3.  **Spread**: This test case utilizes the spread syntax (`...`) to concatenate the two arrays, `array1` and `array2`.

**Options Compared**

The three options being compared are:

*   `concat()`: The traditional method of concatenating arrays using the `concat()` function.
*   `push()` with `map()`: This approach uses the `push()` method in combination with `map()` to concatenate the arrays. However, this is not a direct concatenation method and involves additional operations.
*   Spread syntax (`...`): A newer approach that allows for more concise array manipulation.

**Pros and Cons**

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

*   **concat()**: Pros:
    *   Widely supported
    *   Easy to understand and implement
*   Cons:
    *   Can be slower due to its nature (creating a new array)
*   **Push** with `map()`: Pros:
    *   More efficient than traditional concatenation methods in some cases
*   Cons:
    *   Involves additional operations, which can affect performance
*   **Spread**: Pros:
    *   Concise and expressive syntax
    *   Can be more efficient than traditional concatenation methods
*   Cons:
    *   May require better browser support

**Library Used**

None of the test cases explicitly use a library. However, they do rely on standard JavaScript features like `map()`.

**Special JS Feature or Syntax**

The spread syntax (`...`), used in the "spread" test case, is an example of a newer feature introduced in ECMAScript 2015 (ES6).

**Alternative Approaches**

Other alternatives for array concatenation include:

*   Using `Array.prototype.push.apply()`
*   Utilizing `Array.concat.apply()`

Related benchmarks:

speed test: concat vs spread vs push (version: 0)

Comparing performance of: concat vs push vs spread

Created: 4 years ago by: Registered User

Jump to the latest result

concat

push

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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