Benchmark: [].concat vs spread operator

Tests:

Array.prototype.concat
var params = [ "hello", {one: 'two'} , 4, 3, 2, ['one', 'two', 'three'] ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", {one: 'two'} , 4, 3, 2, ['one', 'two', 'three'] ]; var other = [ 1, 2, ...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: 4 years ago)

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

Browser/OS: Chrome 81 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	6494781.5 Ops/sec
spread operator	21639738.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition**

The provided JSON represents a benchmark definition for measuring the performance difference between two approaches: the traditional `concat()` method and the ES6 spread operator (`...`).

In essence, this benchmark is designed to compare the efficiency of these two methods when concatenating arrays.

**Options Compared**

Two options are being compared:

1. **Traditional Concat Method**: Using the `concat()` method to concatenate arrays.
2. **ES6 Spread Operator**: Using the spread operator (`...`) to concatenate arrays.

**Pros and Cons of Each Approach:**

*   **Traditional Concat Method (concat())**:
    *   Pros: Widely supported, easy to understand and implement.
    *   Cons: Inefficient for large array concatenations, as it creates new arrays in each step.
*   **ES6 Spread Operator (...)**:
    *   Pros: Efficient and concise way to concatenate arrays, as it avoids creating intermediate arrays.
    *   Cons: May be less readable or familiar to developers without ES6 experience.

**Library Used (if any)**

None is explicitly mentioned in the provided benchmark definition. However, if we look at the individual test cases, they don't seem to rely on any external libraries for their implementation.

**Special JS Feature/Syntax**

The spread operator (`...`) is a relatively new feature introduced in ES6. It allows you to expand an array or object into another array or object by using the syntax `arrayName [...array]` or `{ ...object }`.

In this benchmark, the spread operator is used to create a new array from the `params` variable without creating intermediate arrays.

**Other Alternatives**

If we want to explore other alternatives for concatenating arrays in JavaScript, here are a few:

*   **Array.prototype.push()**: You can use `push()` method to add elements to an array and then return the modified array.
    ```javascript
var params = [ "hello", {one: 'two'}, 4, 3, 2, ['one', 'two', 'three'] ];
var other = [];
params.forEach(function (element) {
   other.push(element);
});
```
*   **Array.prototype.reduce()**: Another way to concatenate arrays is using the `reduce()` method.
    ```javascript
var params = [ "hello", {one: 'two'}, 4, 3, 2, ['one', 'two', 'three'] ];
var other = [];
params.reduce(function (acc, element) {
   acc.push(element);
   return acc;
}, []);
```
*   **Array.prototype.slice()**: You can use `slice()` method to create a shallow copy of an array and then concatenate it with another array.
    ```javascript
var params = [ "hello", {one: 'two'}, 4, 3, 2, ['one', 'two', 'three'] ];
var other = [];
other.push(...params.slice());
```
Keep in mind that these alternatives may have different performance characteristics compared to the traditional `concat()` method and the ES6 spread operator.

Related benchmarks:

[].concat vs spread operator (version: 0)

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

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):