Benchmark: javascript concat vs spread operator vs push

Tests:

concat
var existed = [ 1, 2, 3 ]; var params = [ "hello", true, 7 ]; var other = existed.concat(params);
spread operator
var existed = [ 1, 2, 3 ]; var params = [ "hello", true, 7 ]; var other = [ ...existed, ...params ];
push
var existed = [ 1, 2, 3 ]; var params = [ "hello", true, 7 ]; var other = existed.push(...params);

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

push

36.4M/s

spread operator

25.3M/s

concat

8.6M/s

Fastest: push (4.2x faster)

View exact numbers

✓ push: 36,375,512 ops/sec
• spread operator: 25,297,140 ops/sec
• concat: 8,609,101 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

push

79.0M/s

spread operator

47.6M/s

concat

23.1M/s

View exact numbers

Test name	Executions per second
✓ push	79,012,560 Ops/sec
spread operator	47,582,336 Ops/sec
concat	23,105,816 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its results.

**Benchmark Overview**

The benchmark compares three different ways to concatenate an array in JavaScript: using the `concat()` method, the spread operator (`...`), and the `push()` method with the spread operator. The goal is to determine which approach performs best in terms of execution speed.

**Options Compared**

1. **`concat()` method**: This is a traditional way to concatenate arrays in JavaScript. It creates a new array by copying elements from both arrays.
2. **Spread Operator (`...`)**: Introduced in ECMAScript 2015, this operator allows you to expand an array or object into individual elements. In the context of concatenation, it spreads the elements of one array and appends them to another.
3. **`push()` method with Spread Operator**: This approach uses the `push()` method to add elements to an array from a new source (e.g., another array). The spread operator (`...`) is used to provide the elements to be added.

**Pros and Cons**

* **`concat()` method**:
	+ Pros: Simple, widely supported, and easy to understand.
	+ Cons: Creates a new array, which can lead to increased memory usage.
* **Spread Operator (`...`)**:
	+ Pros: More concise and efficient than `concat()`, creates a new array with minimal overhead.
	+ Cons: Less intuitive for beginners, requires knowledge of the spread operator syntax.
* **`push()` method with Spread Operator**:
	+ Pros: Similar to the spread operator approach but provides more control over insertion order.
	+ Cons: Requires using both `push()` and the spread operator in a single statement.

**Library/Function Used**

None are explicitly mentioned in the provided benchmark definition or test cases. However, the use of modern JavaScript features like the spread operator (`...`) is an indication that the benchmark aims to assess performance on relatively recent browsers.

**Special JS Features/Syntax**

The only notable feature used in this benchmark is the spread operator (`...`), which was introduced in ECMAScript 2015. This syntax allows for more concise and expressive array manipulation, but it may not be supported by older browsers or JavaScript environments.

**Alternatives**

Other approaches to concatenate arrays include:

* Using `Array.prototype.push()` with a loop: `existed.push(...params);`
* Using `Array.prototype.concat()` with a loop (not shown in the provided benchmark definition)
* Using other libraries or frameworks that provide optimized array concatenation methods (e.g., React's `concat` function)

In conclusion, this benchmark aims to compare the performance of three different approaches to concatenate arrays in JavaScript: using the `concat()` method, the spread operator (`...`), and the `push()` method with the spread operator. The results suggest that the spread operator approach is likely the fastest, followed by the `concat()` method. However, the choice of approach ultimately depends on the specific use case, personal preference, and compatibility requirements.

javascript concat vs spread operator vs push (version: 0) Benchmark.js

javascript concat vs spread operator vs push

Comparing performance of: `concat vs spread operator vs push`

Created: 5 years ago by: Guest

Go to the latest result

concat

spread operator

push

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

javascript concat vs spread operator vs push (version: 0) Benchmark.js

javascript concat vs spread operator vs push

Comparing performance of: concat vs spread operator vs push

Created: 5 years ago by: Guest

Go to the latest result

concat

spread operator

push

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `concat vs spread operator vs push`