Benchmark: Array concat vs spread operator vs push with short arrays

Script Preparation code:

const ARRAY_LEN = 100;
var array1 = Array(ARRAY_LEN, 'fill');
var array2 = Array(ARRAY_LEN, 'fill');

Tests:

Array.prototype.concat
array1 = array1.concat(array2);
Array.prototype.push
array1.push(...array2);
spread operator
array1 = [ ...array1, ...array2 ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Array.prototype.push
spread operator

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; rv:121.0) Gecko/20100101 Firefox/121.0

Browser/OS: Firefox 121 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4375.9 Ops/sec
Array.prototype.push	9298736.0 Ops/sec
spread operator	0.4 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!

The provided JSON represents a benchmark test case on MeasureThat.net, where users can compare the performance of different approaches to concatenate or append arrays in JavaScript.

**Benchmark Definition**

The benchmark is defined by two scripts:

1. Script Preparation Code:
```javascript
const ARRAY_LEN = 100;
var array1 = Array(ARRAY_LEN, 'fill');
var array2 = Array(ARRAY_LEN, 'fill');
```
This script creates two short arrays (`array1` and `array2`) with a length of 100 elements, filled with the value `'fill'`.

2. Html Preparation Code: None

There is no HTML preparation code provided.

**Individual Test Cases**

The benchmark consists of three test cases:

### Array.prototype.concat

```javascript
array1 = array1.concat(array2);
```
This test case uses the `concat` method to concatenate (`join`) two arrays together.

Pros:

* Simple and intuitive
* Widely supported in modern browsers

Cons:

* May incur additional overhead due to function call and intermediate result creation

### Array.prototype.push

```javascript
array1.push(...array2);
```
This test case uses the spread operator (`...`) to append an array to another array.

Pros:

* More concise and expressive than `concat`
* Often considered faster due to optimized implementation in modern browsers

Cons:

* May not work as expected if used with older browsers or specific edge cases
* Requires understanding of spread syntax (introduced in ECMAScript 2015)

### Spread Operator (`...`)

```javascript
array1 = [...array1, ...array2];
```
This test case uses the spread operator to create a new array that combines elements from two arrays.

Pros:

* Modern and concise syntax
* Often considered faster due to optimized implementation in modern browsers

Cons:

* Requires understanding of spread syntax (introduced in ECMAScript 2015)
* May not work as expected if used with older browsers or specific edge cases

**Library Used**

None, the benchmark only uses built-in JavaScript features.

**Special JS Features/Syntax**

The benchmark uses the spread operator (`...`), which is a relatively recent feature introduced in ECMAScript 2015. While it's widely supported in modern browsers and Node.js, older browsers may not support it or behave unexpectedly.

**Other Alternatives**

For concatenating arrays, some alternative approaches include:

* Using `Array.prototype.reduce()` to concatenate arrays
* Using `String.prototype.concat()` with an array of strings
* Using a custom implementation using loops

However, these alternatives are less commonly used and may not be as efficient or concise as the built-in `concat` method or spread operator.

In summary, the benchmark provides a simple yet informative comparison of different approaches to concatenate arrays in JavaScript. While the spread operator is considered faster by some, it's essential to consider older browser support and edge cases when using this syntax.

Related benchmarks:

Array concat vs spread operator vs push with short arrays (version: 0)

See also https://www.measurethat.net/Benchmarks/Show/29250

Comparing performance of: Array.prototype.concat vs Array.prototype.push vs spread operator

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Array.prototype.push

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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