Benchmark: Array spread operator vs push [variant]

Tests:

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

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: 4 years ago)

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

Browser/OS: Chrome 84 on Mac OS X 10.15.5

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	31436734.0 Ops/sec
spread operator	36305768.0 Ops/sec
Push	47257152.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the provided JavaScript microbenchmark.

**Benchmark Overview**

The benchmark compares three approaches for concatenating arrays in JavaScript:

1. The traditional `concat()` method
2. The new ES6 spread operator (`...`)
3. Using the `push()` method on an array

**Options Compared**

The benchmark tests each of these options with different input scenarios:

*   `Array.prototype.concat`: Concatenates two arrays using the `concat()` method.
*   `spread operator`: Uses the spread operator (`...`) to concatenate two arrays.
*   `Push`: Pushes a new element onto an array and returns the updated array.

**Pros and Cons of Each Approach**

Here's a brief summary of each approach, including their pros and cons:

### 1. Traditional `concat()` Method

The traditional `concat()` method has been the standard way to concatenate arrays in JavaScript for a long time. Here are its pros and cons:

*   **Pros**:
    *   Widely supported and well-documented
    *   Easy to use and understand
*   **Cons**:
    *   Creates a new array, which can be inefficient if dealing with large arrays
    *   Not optimized for performance

### 2. Spread Operator (`...`)

The spread operator is a relatively new addition to the JavaScript language, introduced in ES6. It allows you to spread elements of an iterable (such as an array) into another iterable. Here are its pros and cons:

*   **Pros**:
    *   More concise and expressive than `concat()`
    *   Optimized for performance
*   **Cons**:
    *   Not supported in older browsers or versions of JavaScript
    *   Can be less readable for some developers, especially those not familiar with the spread operator

### 3. Using `push()` Method on an Array

The `push()` method is another way to add elements to an array in JavaScript. Here are its pros and cons:

*   **Pros**:
    *   Does not create a new array
    *   Can be faster than `concat()` for large arrays
*   **Cons**:
    *   Returns the updated array, which can be confusing if you're expecting to return a new value
    *   Not optimized for performance in all browsers or JavaScript versions

**Library Used**

The benchmark does not explicitly use any libraries. However, it's worth noting that the `concat()` method is part of the `Array.prototype` object, which is built-in to JavaScript.

**Special JS Feature/Syntax**

The spread operator (`...`) is a relatively new feature in JavaScript, introduced in ES6. It allows you to spread elements of an iterable into another iterable.

**Benchmark Preparation Code and HTML Preparation Code**

The benchmark preparation code is empty, indicating that the script is not executed before running the benchmark.

The HTML preparation code is also empty, suggesting that no specific HTML setup is required for this benchmark.

**Alternative Benchmarks**

There are alternative benchmarks available for comparing array concatenation methods in JavaScript:

*   [jsbench](https://jsbench.io/): A online platform for writing and sharing JavaScript benchmarks.
*   [Benchmark.js](http://benchmarkjs.com/): A popular benchmarking library for JavaScript that includes pre-built benchmarks for various scenarios, including array concatenation.

These alternatives can provide additional insights into the performance characteristics of different approaches to array concatenation in JavaScript.

Related benchmarks:

Array spread operator vs push [variant] (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):