Benchmark: Array.prototype.concat vs spread operator (large, small diff

Script Preparation code:

// preparation
var a = Array.from({length: 1000}).map((_, i)=>`${i}`);
var b = Array.from({length: 2000}).map((_, i)=>`${i}`);
var aSmall = ['a', 'b', 'c', 'd'];
var bSmall = ['e', 'f', 'g', 'h', 'i'];

Tests:

Array.prototype.concat small
aSmall.concat(bSmall);
spread operator (small)
[...aSmall, ...bSmall]
Array.prototype.concat (large)
a.concat(b);
spread operator (large)
[...a, ...b]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat small
spread operator (small)
Array.prototype.concat (large)
spread operator (large)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome Mobile 128 on Android

View result in a separate tab

Test name	Executions per second
Array.prototype.concat small	3713005.8 Ops/sec
spread operator (small)	6207353.5 Ops/sec
Array.prototype.concat (large)	378036.7 Ops/sec
spread operator (large)	73231.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The MeasureThat.net website allows users to create and run JavaScript microbenchmarks. The provided benchmark compares the performance of two approaches for concatenating arrays: the traditional `Array.prototype.concat()` method and the new ES6 spread operator (`...`). The benchmark is designed to measure the execution speed of these methods on large and small datasets.

**Test Cases**

The benchmark consists of four test cases:

1. **`aSmall.concat(bSmall)`**: This test case concatenates two small arrays, `aSmall` and `bSmall`, using the traditional `concat()` method.
2. **`[...aSmall, ...bSmall]`**: This test case uses the spread operator to concatenate the same two small arrays as in the previous test case.
3. **`a.concat(b)`**: This test case concatenates two large arrays, `a` and `b`, using the traditional `concat()` method.
4. **`[...a, ...b]`**: This test case uses the spread operator to concatenate the same two large arrays as in the previous test case.

**Options Compared**

The benchmark compares the performance of two approaches:

* Traditional `Array.prototype.concat()` method
* New ES6 spread operator (`...`)

**Pros and Cons of Each Approach**

* **Traditional `Array.prototype.concat()` method**:
	+ Pros: Well-established, widely supported, and easy to understand.
	+ Cons: Can be slower than the spread operator for large arrays due to the overhead of calling a method.
* **New ES6 spread operator (`...`)**:
	+ Pros: Faster than the traditional `concat()` method for large arrays, as it avoids the overhead of calling a method.
	+ Cons: May require more modern browsers and environments to work correctly.

**Library and Special JS Features**

The benchmark uses no external libraries. It also does not utilize any special JavaScript features or syntax beyond what is standard in modern JavaScript (ES6 and later).

**Other Alternatives**

If you're looking for alternative approaches to concatenating arrays, consider the following:

* Using `Array.prototype.push()`: Instead of concatenating two arrays and then pushing elements onto one of them, use `push()` to add elements to the end of an array. This can be more efficient than concatenation.
* Using `Array.prototype.reduce()` or `Array.prototype.forEach()`: These methods can be used to concatenate arrays by accumulating elements in a reduction function.

Keep in mind that these alternatives may have different performance characteristics and use cases, so it's essential to consider the specific requirements of your project when choosing an approach.

Related benchmarks:

Array.prototype.concat vs spread operator (large, small diff (version: 0)

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

Comparing performance of: Array.prototype.concat small vs spread operator (small) vs Array.prototype.concat (large) vs spread operator (large)

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat small

spread operator (small)

Array.prototype.concat (large)

spread operator (large)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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