Benchmark: Array testing - prototype.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 ]; params.push(1); params.push(2);

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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36

Browser/OS: Chrome 81 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4966318.5 Ops/sec
spread operator	29742858.0 Ops/sec
Push	44927764.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the provided benchmark.

**Benchmark Definition:**
The benchmark is designed to compare three approaches for adding elements to an array in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. The `push()` method

**Options Compared:**

* `Array.prototype.concat()`: This is the traditional way of concatenating arrays using the `concat()` method.
* Spread Operator (`...`): Introduced in ES6, this allows you to expand an array by spreading its elements into another array.
* `push()`: This method adds one or more elements to the end of an array.

**Pros and Cons:**

* `Array.prototype.concat()`:
	+ Pros: Widely supported and well-documented.
	+ Cons: Can be slow for large arrays, as it creates a new array and copies the elements.
* Spread Operator (`...`):
	+ Pros: Efficient and concise way to add elements to an array. Introduced in ES6, making it more modern and future-proof.
	+ Cons: Requires ECMAScript 2018 or later support, which might not be available on older browsers.
* `push()`: 
	+ Pros: Fast and efficient way to add one or more elements to the end of an array.
	+ Cons: Can lead to unexpected behavior if not used correctly (e.g., adding elements to an existing array instead of creating a new one).

**Library Usage:**
None of the benchmark tests use any libraries, as they are focused solely on comparing the performance of these three approaches.

**Special JS Features or Syntax:**
None of the benchmark tests use any special JavaScript features or syntax that might require additional context. The code snippets provided are straightforward and easy to understand.

**Other Alternatives:**

* `Array.prototype.splice()`: This method can also be used to add elements to an array, but it's generally considered less efficient than `push()` due to its overhead.
* `set()` method for `Uint8Array` or `Int32Array`: For large arrays, using a typed array and the `set()` method might provide better performance compared to `push()`.
* Other array concatenation methods, such as `slice().concat()` or `join().split()`, are not tested in this benchmark.

In summary, this benchmark provides an excellent comparison of three common approaches for adding elements to an array in JavaScript. It highlights the pros and cons of each approach and allows users to see which one performs best in different scenarios.

Related benchmarks:

Array testing - prototype.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 one month ago):