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

Tests:

Array.prototype.concat
var params1 = new Array(100_000).fill('a'); var params2 = new Array(100_000).fill('b'); var other = params1.concat(params2);
spread operator
var params1 = new Array(100_000).fill('a'); var params2 = new Array(100_000).fill('b'); var other = [...params1, ...params2 ]
Push
var params1 = new Array(100_000).fill('a'); var params2 = new Array(100_000).fill('b'); params2.forEach((item) => { params1.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/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	440.8 Ops/sec
spread operator	242.1 Ops/sec
Push	237.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the provided benchmark.

**Benchmark Overview**

The benchmark compares three methods for concatenating arrays in JavaScript: `concat()`, spread operator (`...`), and using `forEach()` with `push()`. The goal is to determine which method is most efficient.

**Options Compared**

1. **`concat()`**: This is a traditional method of concatenating arrays in JavaScript, which creates a new array by copying the elements from both input arrays.
2. **Spread Operator (`...`)**: Introduced in ES6, this operator allows creating a new array by spreading the elements of an existing array or an iterable object.
3. **`forEach()` with `push()`**: This method uses the `forEach()` function to iterate over the elements of one array and pushes each element onto another array.

**Pros and Cons**

*   **`concat()`**:
    *   Pros: Simple, widely supported.
    *   Cons: Creates a new array, which can be memory-intensive for large datasets.
*   **Spread Operator (`...`)**:
    *   Pros: Creates a new array without the overhead of `concat()`, and is more concise.
    *   Cons: Only available in modern browsers (since ES6), might not work in older environments.
*   **`forEach()` with `push()`**:
    *   Pros: Can be more memory-efficient than `concat()`, as it modifies the original array instead of creating a new one.
    *   Cons: Requires iterating over each element, which can lead to slower performance for large datasets.

**Library and Syntax**

The benchmark uses no external libraries. The syntax used is plain JavaScript.

There are no special JavaScript features or syntaxes mentioned in this benchmark.

**Alternative Approaches**

Other methods to concatenate arrays could be:

*   **`Array.prototype.reduce()`**: This method can be used to concatenate two arrays by reducing the first array to an empty array and then pushing each element of the second array onto it.
*   **`Array.prototype.splice()`**: This method can be used to concatenate two arrays by splicing the elements from one array into another.

However, these alternatives might not be as efficient or concise as the methods being tested in this benchmark.

Related benchmarks:

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