Benchmark: concat vs spread operator vs push

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

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

Browser/OS: Chrome 98 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	7993637.0 Ops/sec
spread operator	35844440.0 Ops/sec
Push	52250540.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, "concat vs spread operator vs push", compares the performance of three different methods for concatenating arrays in JavaScript: the traditional `concat()` method, the new ES6 spread operator (`...`), and the `push()` method.

**Test Cases**

There are three individual test cases:

1. **Array.prototype.concat**: This test case uses the `concat()` method to concatenate an array with a variable-length array (`params`) containing strings, booleans, and numbers.
2. **Spread Operator**: This test case uses the spread operator (`...`) to concatenate an array with a variable-length array (`params`) containing strings, booleans, and numbers.
3. **Push**: This test case uses the `push()` method to concatenate an array with a variable-length array (`params`) containing strings, booleans, and numbers.

**Options Compared**

The benchmark compares the performance of three different approaches:

* `concat()`: The traditional method for concatenating arrays in JavaScript. It creates a new array by copying elements from both input arrays.
* Spread Operator (`...`): A new feature introduced in ES6 that allows concatenation by spreading elements into a new array.
* `push()`: The `push()` method modifies the existing array and appends elements to it.

**Pros and Cons of Each Approach**

Here's a brief summary of the pros and cons of each approach:

* `concat()`:
	+ Pros: Widely supported, easy to use, and has been around for a long time.
	+ Cons: Creates a new array, which can lead to performance issues when dealing with large arrays.
* Spread Operator (`...`):
	+ Pros: More concise and expressive than `concat()`, creates a new array in a more efficient way (by using a single array literal).
	+ Cons: Requires modern JavaScript engines to support it, may not work as expected in older browsers.
* `push()`:
	+ Pros: Modifies the existing array, can be faster for large arrays since only one array is created.
	+ Cons: May require additional memory allocation and copying, can lead to slower performance if done excessively.

**Library Usage**

None of the test cases use a library, as they are purely JavaScript methods implemented by the browser engine.

**Special JS Features or Syntax**

The spread operator (`...`) is a special feature introduced in ES6. It's not supported in older browsers, which explains why Chrome 98 has significantly faster execution times for this benchmark compared to lower versions of Chrome.

**Other Alternatives**

For concatenating arrays, other alternatives could include:

* `Array.prototype.reduce()`: Can be used to concatenate arrays by reducing them into a single array.
* `Array.prototype.flat()`: May be used in the future as an alternative for concatenation.
* Custom implementation using loops or recursion: Could also be used as an alternative, but would likely be slower and more verbose.

Overall, the benchmark highlights the importance of considering performance when choosing methods for array concatenation in JavaScript. The spread operator has become a popular choice due to its conciseness and efficiency, while `concat()` remains widely supported but less efficient.

Related benchmarks:

concat vs spread operator vs push (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 6 months ago):