Benchmark: Array concat vs spread operator vs push Raw

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 ]; const paramsLength = params.length; var other = [ 1, 2 ]; for(let i = 0; i< paramsLength; i++) { other.push(params[i]); }

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

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

The provided benchmark measures the performance differences between three approaches for concatenating arrays in JavaScript:

1.  **`Array.prototype.concat()`**: This is the traditional method for concatenating arrays. It creates a new array and copies elements from both arrays to it.
2.  **Spread Operator (`...`)**: Introduced in ES6, the spread operator allows you to create a new array by spreading the elements of an existing array. In this benchmark, `...params` is used to spread the `params` array into the `other` array.
3.  **`push()` method**: This approach uses the `push()` method to add elements to the end of an array. It's more efficient than concatenating arrays using the `concat()` method.

**Pros and Cons:**

*   **`Array.prototype.concat()`**:
    *   Pros: Simple, well-supported, and widely available.
    *   Cons: Creates a new array, which can lead to performance issues with large datasets or when memory is limited.
*   **Spread Operator (`...`)**:
    *   Pros: Efficient, modern, and widely supported. It doesn't create a new array in the classical sense; instead, it modifies the existing array.
    *   Cons: May not be compatible with older browsers or JavaScript engines.
*   **`push()` method**:
    *   Pros: Efficient, as it avoids creating a new array. Also, `push()` can modify an array in place without creating a copy of it.
    *   Cons: Requires more code and might be less intuitive for some developers.

**Library Usage:**

None of the benchmark tests use any external libraries, so there are no additional dependencies to consider.

**Special JS Features or Syntax:**

The spread operator (`...`) is a new syntax feature introduced in ES6. It's used to create a new array by spreading its elements into another array.

**Other Alternatives:**

While not explicitly tested in this benchmark, other alternatives for concatenating arrays include:

*   **`Array.prototype.slice()`**: Creates a shallow copy of an array and then uses the `concat()` method.
*   **`String.fromCharCode()`**: Used to create a new string by converting individual characters from a character code array.

Keep in mind that these alternative methods may have different performance characteristics and trade-offs compared to the methods tested in this benchmark.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:77.0) Gecko/20100101 Firefox/77.0

Browser/OS: Firefox 77 on Ubuntu

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	10852068.0 Ops/sec
spread operator	8789644.0 Ops/sec
Push	9907059.0 Ops/sec

Related benchmarks:

Array concat vs spread operator vs push Raw (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: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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