Benchmark: Concat v Spread v Push

Tests:

Concat
let params = [ "hello", true, 7 ]; let other = [ 1, 2 ].concat(params);
Spread
let params = [ "hello", true, 7 ] let other = [ 1, 2, ...params ]
Push
let params = ["hello", true] let other = [1, 2] params.push.apply(other)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
Spread
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.5.1

View result in a separate tab

Test name	Executions per second
Concat	41786024.0 Ops/sec
Spread	366000736.0 Ops/sec
Push	40584416.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of three different methods for concatenating arrays in JavaScript:

1. Traditional `concat()` method
2. New ES6 spread operator (`...` syntax)
3. `push.apply()` method

**Test Case Breakdown**

Each test case consists of a brief description, a script preparation code snippet, and a test name.

* **Concat**: Tests the traditional `concat()` method.
```javascript
let params = [ "hello", true, 7 ];
let other = [ 1, 2 ].concat(params);
```
* **Spread**: Tests the new ES6 spread operator (`...` syntax).
```javascript
let params = [ "hello", true, 7 ];
let other = [ 1, 2, ...params ];
```
* **Push**: Tests the `push.apply()` method.
```javascript
let params = [ "hello", true ];
let other = [ 1, 2 ];
params.push.apply(other);
```
**Options Compared**

The benchmark compares the performance of these three methods on an array of strings (`"hello"`), a boolean value (`true`), and a number (`7`). The execution time is measured in executions per second.

**Pros and Cons of Each Approach**

* **Concat**: Pros:
	+ Widely supported by most browsers.
	+ Easy to understand and implement.
Cons:
	+ May create intermediate arrays, leading to increased memory usage.
* **Spread**: Pros:
	+ More concise and readable syntax.
	+ Creates a new array with the spread operator, reducing intermediate array creation.
Cons:
	+ May not be supported by older browsers or JavaScript engines.
* **Push**: Pros:
	+ Similar performance to `concat()` in many cases.
Cons:
	+ Requires more memory accesses due to the use of `push()`.
	+ May not be as readable or concise as `concat()` or spread.

**Library and Special JS Feature**

None of the test cases rely on any external libraries. The focus is solely on comparing the performance of these three array concatenation methods.

**Alternative Approaches**

Other alternative approaches for array concatenation include:

* Using `Array.prototype.push()` with a loop: `let other = []; while (params.length > 0) { other.push(params.shift()); }`
* Using `Array.prototype.unshift()` with an array: `let other = [1, 2]; other.unshift(...params);`

These approaches may have varying performance characteristics and are not included in the benchmark.

**Additional Considerations**

The benchmark results can be influenced by factors such as:

* Browser and JavaScript engine version.
* System architecture (e.g., mobile vs. desktop).
* Array size and complexity.

It's essential to consider these factors when interpreting the benchmark results and applying them to real-world scenarios.

Related benchmarks:

Concat v Spread v Push (version: 0)

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

Comparing performance of: Concat vs Spread vs Push

Created: one year ago by: Guest

Jump to the latest result

Concat

Spread

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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