Benchmark: Array 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 ]; var other = [ 1, 2 ].push(...params);

Historical Performance Data aggregated from 956 community runs

Desktop Results:

Chrome 726 runs

Push

60.6M/s

spread operator

55.0M/s

Array.prototype.concat

14.6M/s

Fastest: Push (4.1x faster)

View exact numbers

✓ Push: 60,612,160 ops/sec
• spread operator: 55,029,212 ops/sec
• Array.prototype.concat: 14,640,609 ops/sec

Firefox 139 runs

Push

32.7M/s

spread operator

25.4M/s

Array.prototype.concat

23.2M/s

Fastest: Push (1.4x faster)

View exact numbers

✓ Push: 32,728,982 ops/sec
• spread operator: 25,361,522 ops/sec
• Array.prototype.concat: 23,217,342 ops/sec

Safari 24 runs

spread operator

497.2M/s

Array.prototype.concat

45.5M/s

Push

16.3M/s

Fastest: spread operator (30.6x faster)

View exact numbers

✓ spread operator: 497,237,760 ops/sec
• Array.prototype.concat: 45,534,408 ops/sec
• Push: 16,261,352 ops/sec

Other 11 runs

Push

31.7M/s

spread operator

30.5M/s

Array.prototype.concat

7.4M/s

Fastest: Push (4.3x faster)

View exact numbers

✓ Push: 31,749,528 ops/sec
• spread operator: 30,531,756 ops/sec
• Array.prototype.concat: 7,367,906 ops/sec

Mobile Results:

Chrome 37 runs

spread operator

24.0M/s

Push

19.1M/s

Array.prototype.concat

6.3M/s

Fastest: spread operator (3.8x faster)

View exact numbers

✓ spread operator: 24,047,476 ops/sec
• Push: 19,050,474 ops/sec
• Array.prototype.concat: 6,289,086 ops/sec

Safari 19 runs

spread operator

420.1M/s

Array.prototype.concat

38.1M/s

Push

13.7M/s

Fastest: spread operator (30.7x faster)

View exact numbers

✓ spread operator: 420,119,520 ops/sec
• Array.prototype.concat: 38,096,616 ops/sec
• Push: 13,699,221 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
Array.prototype.concat
spread operator
Push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 12; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.196 Mobile Safari/537.36

Browser/OS: Chrome Mobile 114 on Android

View result in a separate tab

Push

25.2M/s

spread operator

20.5M/s

Array.prototype.concat

6.3M/s

View exact numbers

Test name	Executions per second
✓ Push	25,213,782 Ops/sec
spread operator	20,521,524 Ops/sec
Array.prototype.concat	6,289,086 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.

**What is being tested?**

The provided benchmark compares three different ways to concatenate or push elements onto an array in JavaScript:

1. **`Array.prototype.concat()`**: The traditional way to concatenate two arrays using the `concat()` method.
2. **Spread Operator (`...`)**: The new ES6 spread operator, introduced in ECMAScript 2015, which allows for more concise and expressive array creation.
3. **`Array.prototype.push()` with spread syntax (`...`)**: A way to push elements onto an array using the `push()` method with the spread operator.

**Options being compared**

The benchmark is comparing these three options on the same input data:

* `params`: An array containing a string, a boolean, and a number.
* The arrays `other` are created by concatenating or pushing `params` onto them.

**Pros and Cons of each approach:**

1. **`Array.prototype.concat()`**:
	* Pros: Well-established, widely supported, and easy to understand.
	* Cons: Can be less efficient than other methods, as it creates a new array object.
2. **Spread Operator (`...`)**:
	* Pros: More concise, expressive, and efficient than `concat()`, especially for large arrays.
	* Cons: Introduced in ES6, may not be supported by older browsers or versions of Node.js.
3. **`Array.prototype.push()` with spread syntax (`...`)**:
	* Pros: Similar to the spread operator, but with a more traditional approach to array manipulation.
	* Cons: Requires an additional step (using `push()`) and may not be as efficient as the spread operator.

**Other considerations**

* The benchmark results are likely influenced by the specific JavaScript engine and platform used (e.g., Chrome 129 on Linux).
* Other factors, such as input data size and complexity, can impact the performance of these methods.
* Modern JavaScript engines often have optimizations for array operations, which may affect the results.

**Library and special JS features**

None are mentioned in this specific benchmark. However, it's worth noting that other libraries or frameworks might use different approaches to array manipulation or provide additional features that could impact performance.

Now, if you'd like to know about some alternative ways to concatenate arrays in JavaScript, here are a few:

* **`Array.prototype.reduce()`**: Can be used to concatenate arrays by defining a custom reduce function.
* **`Array.prototype.map()` with `...`**: Can be used to push elements onto an array using the spread operator.

These alternatives might be worth exploring in different scenarios or for specific use cases.

Array 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: 7 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Historical Performance Data aggregated from 956 community runs

Desktop Results:

Chrome 726 runs

Firefox 139 runs

Safari 24 runs

Other 11 runs

Mobile Results:

Chrome 37 runs

Safari 19 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array 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: 7 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Historical Performance Data aggregated from 956 community runs

Desktop Results:

Chrome 726 runs

Firefox 139 runs

Safari 24 runs

Other 11 runs

Mobile Results:

Chrome 37 runs

Safari 19 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: `Array.prototype.concat vs spread operator vs Push`