Benchmark: concat vs spread operator vs push vs assign

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 ]; var other = [ 1, 2 ].push(...params);
Assign
var params = [ "hello", true, 7 ]; var other = Object.assign([ 1, 2 ], params)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Assign

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	13743646.0 Ops/sec
spread operator	61130456.0 Ops/sec
Push	68231712.0 Ops/sec
Assign	1874298.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares four different methods for combining arrays in JavaScript: the traditional `Array.prototype.concat()` method, the ES6 spread operator, the `Array.prototype.push()` method, and the `Object.assign()` method. Each of these methods serves the purpose of creating a new array by combining existing arrays or adding elements to an array.

### Individual Methods Explained

1. **Array.prototype.concat()**
   - **Benchmark Code**: 
     ```javascript
     var params = [ "hello", true, 7 ];
     var other = [ 1, 2 ].concat(params);
     ```
   - **Description**: The `concat()` method creates a new array by combining its calling array with the arrays and/or values passed as arguments.
   - **Pros**: It is well-established and widely understood by JavaScript developers. It doesn’t mutate the original arrays and returns a new array.
   - **Cons**: It can be slower in performance when compared to more modern methods, especially for large arrays, since it creates a copy of the entire array rather than modifying it in place.

2. **Spread Operator**
   - **Benchmark Code**: 
     ```javascript
     var params = [ "hello", true, 7 ];
     var other = [ 1, 2, ...params ];
     ```
   - **Description**: The spread operator (`...`) expands the elements of an iterable (like an array) into individual elements. 
   - **Pros**: It is syntactically concise and can improve readability. It’s generally faster than the `concat()` method as it efficiently constructs the new array.
   - **Cons**: Requires ES6 support. It can lead to misunderstandings if used improperly, such as considering it a method call when it is a syntax feature.

3. **Array.prototype.push()**
   - **Benchmark Code**: 
     ```javascript
     var params = [ "hello", true, 7 ];
     var other = [ 1, 2 ].push(...params);
     ```
   - **Description**: The `push()` method adds one or more elements to the end of an array and returns the new length of the array. 
   - **Pros**: It is usually very fast, especially when adding multiple items at once due to its in-place operation.
   - **Cons**: It mutates the original array since it adds the new elements to the array invoking the method, which may be undesirable in cases where immutability is preferred.

4. **Object.assign()**
   - **Benchmark Code**: 
     ```javascript
     var params = [ "hello", true, 7 ];
     var other = Object.assign([ 1, 2 ], params);
     ```
   - **Description**: The `Object.assign()` method is primarily used to copy the values of all enumerable own properties from one or more source objects to a target object. In this case, it’s being used to extend an array. 
   - **Pros**: Useful for combining properties of objects, and it is a functional approach to merge arrays, making it possible to mix data types.
   - **Cons**: It is not intended for array concatenation, and because it mutates the first argument, it can lead to unexpected behavior or bugs. This method can also perform poorly with arrays compared to purpose-built methods.

### Benchmark Results

According to the benchmark results provided, here is the performance in terms of executions per second:

- **Push**: 37,494,668.0 executions/sec
- **Spread Operator**: 30,548,278.0 executions/sec
- **Array.prototype.concat**: 8,500,527.0 executions/sec
- **Assign**: 1,286,300.75 executions/sec

### Conclusions & Considerations

- **Performance**: The results indicate that `Array.prototype.push()` is the fastest method for adding elements, which is likely due to its nature of operation (mutating the existing array rather than creating a new one). The spread operator is also efficient and provides a modern syntax.
- **Use Cases**: The choice of method often depends on the need for immutability (favoring `concat` or the spread operator) versus performance needs (favoring `push`).
- **Alternatives**: In addition to these, other alternatives include using libraries like Lodash, which offers utility functions like `_.merge()` for deeply merging objects and arrays, but they may introduce additional overhead.

Ultimately, the selection of approach should be based on context, performance considerations, and the specific use case of the application.

Related benchmarks:

concat vs spread operator vs push vs assign (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 vs Assign

Created: 2 months ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):