Benchmark: Array.prototype.concat vs spread vs push operator

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

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.108 Safari/537.36

Browser/OS: Chrome 74 on Linux

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5612366.5 Ops/sec
spread operator	19128534.0 Ops/sec
push	17531060.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of three different methods to concatenate arrays in JavaScript: `concat()`, spread operator (`...`), and push operator (`push(...))`. The benchmark is designed to compare these approaches, which are used extensively in modern JavaScript development.

**Test Cases**

There are three test cases:

1. **Array.prototype.concat**: This test case uses the traditional `concat()` method to concatenate an array with another array.
2. **Spread Operator (spread)**: This test case uses the new ES6 spread operator (`...`) to concatenate an array with another array.
3. **Push Operator (push)**: This test case uses the push operator (`push(...))` to concatenate an array with another array.

**Options Compared**

The benchmark compares the performance of these three methods:

* `concat()`: a traditional method for concatenating arrays
* spread operator (`...`): a new feature introduced in ES6 for spreading arrays
* push operator (`push(...))`: a more modern approach to concatenation using the push method

**Pros and Cons**

Here's a brief overview of each method:

* **concat()**: This is a traditional and well-established method for concatenating arrays. It's straightforward but may have performance implications due to the creation of a new array.
	+ Pros: widely supported, easy to read
	+ Cons: potential performance overhead, less efficient than other methods
* **Spread Operator (spread)**: This is a new feature introduced in ES6 that allows for more concise and expressive code. It's gaining popularity but may not be supported by older browsers or environments.
	+ Pros: concise, expressive, modern approach
	+ Cons: may not work in older browsers or environments, potential performance issues due to array creation
* **Push Operator (push)**: This method uses the push operator (`push(...))` to concatenate arrays. It's a more efficient and modern approach than `concat()`, but still creates a new array.
	+ Pros: efficient, modern approach, less overhead than concat()
	+ Cons: may not be supported by older browsers or environments, can be confusing for some developers

**Library Usage**

The benchmark uses the Array prototype object, which is a built-in JavaScript library. The `concat()` method is a part of this object.

**Special JS Features/Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's standard in modern JavaScript (ES6+).

**Alternative Approaches**

Other alternatives for concatenating arrays include:

* Using the `Array.prototype.push()` and `Array.prototype.pop()` methods, which can be used to build up a new array incrementally.
* Using a loop with array literals to create a new array element by element.
* Using third-party libraries or utility functions that provide optimized concatenation implementations.

However, these alternatives are not typically used in production code due to their potential performance overhead and complexity. The benchmark's focus is on comparing the performance of the three main methods: `concat()`, spread operator (`...`), and push operator (`push(...))`.

Related benchmarks:

Array.prototype.concat vs spread vs push operator (version: 0)

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

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

Created: 5 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 2 months ago):