Benchmark: concat vs spread vs push vs push fn

Tests:

concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
push fn
const push = (arr, items) => { arr.push(...items); return arr } var params = [ "hello", true, 7 ]; var other = push([1,2], params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread
push
push fn

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 95 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
concat	6254846.0 Ops/sec
spread	6322554.0 Ops/sec
push	43190208.0 Ops/sec
push fn	40187500.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark compares the performance of three different approaches to concatenate arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. Using the `push()` method with multiple arguments (spread syntax: `arr.push(...items)`)

**Options Compared**

We have four test cases:

* `concat`: uses the traditional `concat()` method
* `spread`: uses the spread operator to concatenate arrays
* `push`: uses the `push()` method with multiple arguments
* `push fn`: uses a custom function (`push`) that concatenates arrays

**Pros and Cons of Each Approach**

1. **`Array.prototype.concat()`**:
	* Pros: widely supported, easy to read
	* Cons: slower than other approaches, creates new array
2. **Spread Operator (`...`)**:
	* Pros: concise, fast, creates a new array with spread elements
	* Cons: not supported in older browsers, may be less readable for some developers
3. **`push()` method with multiple arguments (spread syntax)`:
	* Pros: concise, fast, modifies the original array
	* Cons: may not work as expected if `push()` is called on a non-array object

**Library/Functionality Used**

None of the test cases use any external libraries or functions beyond what's built into JavaScript.

**Special JS Features/Syntax**

The test cases do not rely on any special JavaScript features or syntax beyond what's introduced in ES6 (the spread operator).

**Other Alternatives**

If you needed to concatenate arrays, other alternatives might include:

* Using `Array.prototype.slice()` and concatenating with `+` operator
* Using a custom function like `concatArrays()`
* Using a library like Lodash

However, the spread operator has become a widely accepted and efficient way to concatenate arrays in modern JavaScript.

In summary, this benchmark tests the performance of four different approaches to concatenate arrays in JavaScript: traditional `concat()` method, spread operator, `push()` method with multiple arguments, and a custom function.

Related benchmarks:

concat vs spread vs push vs push fn (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

Comparing performance of: concat vs spread vs push vs push fn

Created: 3 years ago by: Guest

Jump to the latest result

concat

spread

push

push fn

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