Benchmark: Array.prototype.concat vs spread operator (2 separate arrays)

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var initial = [1,2] var other = initial.concat(params);
spread operator
var params = [ "hello", true, 7 ] var initial = [1,2] var other = [ ...initial, ...params ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	16023513.0 Ops/sec
spread operator	40405404.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a benchmark test on MeasureThat.net, which compares the performance of two approaches to concatenate arrays in JavaScript: the traditional `concat()` method and the ES6 spread operator (`...`).

**What is being tested?**

Two individual test cases are defined:

1. **Array.prototype.concat**: This test case creates an array `initial` with elements `[1, 2]`, and then concatenates another array `params` containing elements `"hello"`, `true`, and `7`. The resulting concatenated array is stored in the variable `other`.
2. **Spread operator (ES6)**: This test case also creates an array `initial` with elements `[1, 2]`, and then uses the spread operator (`...`) to concatenate the `params` array directly into `initial`.

**Options compared**

The two approaches are compared:

*   Traditional `concat()` method
*   ES6 spread operator

**Pros and Cons of each approach:**

### Array.prototype.concat

Pros:
-   Well-established, widely supported method.
-   Easy to use, even for beginners.

Cons:
-   Can be slower than the spread operator due to its overhead (function call, argument passing).
-   Does not short-circuit, meaning it always creates a new array instance.

### Spread operator (ES6)

Pros:
-   Faster performance compared to `concat()` because it does not create an intermediate array.
-   Short-circuits, stopping immediately when the first non-iterable element is encountered, making it more efficient for large arrays.

Cons:
-   Introduced in ECMAScript 2015, so support may vary across older browsers and environments.
-   May be less familiar to developers without recent exposure to modern JavaScript features.

**Library used**

In neither test case is a library explicitly mentioned. The spread operator is a built-in JavaScript feature introduced in ES6 (ECMAScript 2015), while `concat()` is also a built-in method on arrays.

**Special JS feature or syntax**

The spread operator (`...`) is the special syntax being tested and compared here.

**Other alternatives**

For concatenating arrays, other approaches might include using `Array.prototype.push()`, which can be less efficient than both methods mentioned above. However, for this specific comparison, the spread operator stands out due to its performance benefits.

In summary, the benchmark test on MeasureThat.net compares two approaches to concatenate arrays in JavaScript: traditional `concat()` and the ES6 spread operator. The test results show that the spread operator offers better performance, making it a good choice when efficiency matters.

Related benchmarks:

Array.prototype.concat vs spread operator (2 separate arrays) (version: 0)

Compare the ES6 spread operator with the traditional concat() method

Comparing performance of: Array.prototype.concat vs spread operator

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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