Benchmark: javascript concat vs spread operator vs push3

Tests:

concat
var existed = Array.from({length:1000},(_,i)=>i) var params = Array.from({length:1000},(_,i)=>i) var other = existed.concat(params);
spread operator
var existed = Array.from({length:1000},(_,i)=>i) var params = Array.from({length:1000},(_,i)=>i) var other = [ ...existed, ...params ];
push
var existed = Array.from({length:1000},(_,i)=>i) var params = Array.from({length:1000},(_,i)=>i) var other = existed.push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread operator
push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Whale/3.23.214.17 Safari/537.36

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
concat	17305.5 Ops/sec
spread operator	16941.3 Ops/sec
push	17408.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Overview**

The provided JSON represents a benchmark with three test cases: `concat`, `spread operator`, and `push`. Each test case measures the performance of a specific way to concatenate or push elements onto an array. The goal is to determine which approach is the fastest for this particular scenario.

**Test Cases**

1. **`concat`**: This test case uses the traditional `concat()` method to concatenate two arrays, `existed` and `params`. The code:
```javascript
var existed =  Array.from({length:1000},(_,i)=>i)
var params =  Array.from({length:1000},(_,i)=>i)
var other = existed.concat(params);
```
2. **`spread operator`**: This test case uses the spread operator (`...`) to concatenate two arrays, `existed` and `params`. The code:
```javascript
var existed =  Array.from({length:1000},(_,i)=>i)
var params =  Array.from({length:1000},(_,i)=>i)
var other = [ ...existed, ...params ];
```
3. **`push`**: This test case uses the `push()` method to concatenate two arrays, `existed` and `params`. The code:
```javascript
var existed =  Array.from({length:1000},(_,i)=>i)
var params =  Array.from({length:1000},(_,i)=>i)
var other = existed.push(...params);
```
**Options Compared**

The three test cases compare the performance of different methods for concatenating arrays:

* `concat()`: uses the traditional method to concatenate two arrays.
* Spread operator (`...`): uses the spread operator to concatenate two arrays.
* `push()` with spread syntax (`...`): uses the `push()` method with the spread operator to concatenate two arrays.

**Pros and Cons**

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

1. **`concat()`**:
	* Pros: widely supported, easy to read and write.
	* Cons: creates a new array object, can be slower due to object creation overhead.
2. **Spread Operator (`...`)**:
	* Pros: concise, efficient, and modern.
	* Cons: requires support for spread syntax in older browsers or environments.
3. **`push()` with Spread Syntax (`...`)**:
	* Pros: efficient, concise, and compatible with older browsers and environments.
	* Cons: requires support for spread syntax and `push()` with spread syntax in older browsers or environments.

**Library/Functionality Used**

None of the test cases use any external libraries or functions beyond JavaScript's built-in `Array.from()` method and the modern spread operator (`...`).

**Special JS Features/Syntax**

No special JavaScript features or syntax are used in these test cases, as they focus on a straightforward array concatenation scenario.

**Alternatives**

Other alternatives for array concatenation include:

1. **Array.prototype.concat()**: uses the traditional `concat()` method.
2. **Array.prototype.push()**: uses the `push()` method with multiple arguments.
3. **Array.prototype splice()**: uses the `splice()` method to insert elements at a specified position.

Keep in mind that the performance differences between these alternatives may be negligible for most use cases, but MeasureThat.net aims to provide a comprehensive understanding of JavaScript's built-in methods and their trade-offs.

Related benchmarks:

javascript concat vs spread operator vs push3 (version: 0)

javascript concat vs spread operator vs push

Comparing performance of: concat vs spread operator vs push

Created: 3 years ago by: Guest

Jump to the latest result

concat

spread operator

push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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