Benchmark: Array concat vs spread operator vs push (forEach) 123

HTML Preparation code:

<div id=''></div>

Script Preparation code:

var arr = ['', '', ''];

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ ...[1, 2], ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ]; params.forEach((item) => { other.push(item); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push

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/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	6536605.5 Ops/sec
spread operator	19648604.0 Ops/sec
Push	32052992.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring performance differences between various approaches to manipulate arrays in JavaScript is an essential task for any developer.

The provided benchmark, "Array concat vs spread operator vs push (forEach)", tests the performance of three different methods:

1. **`concat()` method**: This is a traditional way to concatenate arrays in JavaScript.
2. **Spread operator (`...`)**: Introduced in ES6, this is a new and efficient way to merge arrays.
3. **`push()` with `forEach()`**: This approach uses the `push()` method to add elements to an array while iterating over another array using `forEach()`.

**Options Comparison:**

*   **Performance:** The spread operator generally outperforms the traditional `concat()` method because it creates a new array without the need for copying existing elements. On the other hand, `push()` with `forEach()` has better performance in terms of cache efficiency and avoids the overhead of creating a new array.
*   **Code Readability:** The spread operator is often considered more readable and concise than traditional `concat()`. However, `push()` with `forEach()` can be more intuitive for developers familiar with this pattern.

**Pros and Cons:**

*   **Spread Operator (new ES6 feature):**
    *   Pros:
        *   Efficient performance
        *   Concise code
    *   Cons:
        *   Limited support in older browsers
        *   May require additional imports for polyfills
*   **Concat() method:**
    *   Pros:
        *   Widespread browser support
        *   No additional imports required
    *   Cons:
        *   Poor performance due to array copying
*   **Push() with forEach():**
    *   Pros:
        *   Cache-efficient and fast
        *   Intuitive for developers familiar with this pattern
    *   Cons:
        *   May not be immediately clear to less experienced developers

**Library Usage:**

There are no external libraries used in the benchmark.

**Special JS Features or Syntax:**

None mentioned. However, some browsers may require additional imports or polyfills for modern features like the spread operator.

**Benchmark Results:**

The latest benchmark results show that:

*   **Push() with forEach():** Offers the best performance at 32052992 executions per second.
*   **Spread Operator:** Provides good performance at 19648604 executions per second, slightly faster than traditional `concat()` due to its more efficient implementation.

**Alternatives:**

Other alternatives for array manipulation in JavaScript include:

*   **Array.prototype.reduce()**: A more functional approach that can be used for concatenation and other operations.
*   **For loops**: Basic iteration using a traditional loop structure.
*   **Array.prototype.set()**: For updating array elements or replacing specific values.

Keep in mind that performance comparisons may vary depending on the specific use case, browser support, and version requirements.

Related benchmarks:

Array concat vs spread operator vs push (forEach) 123 (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

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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