Benchmark: Array.prototype.concat vs spread operator for joining arrays incrementally

Script Preparation code:

var arrays = [
	Array(100).fill(1),
	Array(100).fill(2),
	Array(100).fill(3),
	Array(100).fill(4),
	Array(100).fill(5),
];

Tests:

Array.prototype.concat
let combinedArray = []; arrays.forEach((array) => { combinedArray = combinedArray.concat(array) })
spread operator
let combinedArray = []; arrays.forEach((array) => { combinedArray = [ ...combinedArray, ...array, ] })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark measures the performance difference between two approaches for joining arrays incrementally:

1. `Array.prototype.concat()`: This method concatenates two or more arrays and returns a new array.
2. Spread operator (`...`): This syntax spreads the elements of an array into a new array.

**Options compared**

Two options are being compared:

* `Array.prototype.concat()`
* Spread operator (`...`)

These two approaches have different performance characteristics, which is what this benchmark aims to measure.

**Pros and Cons**

Here's a brief summary of each approach:

1. `Array.prototype.concat()`:
	* Pros: This method is widely supported across browsers and is well-documented.
	* Cons: It creates a new array for each concatenation operation, leading to memory allocation overhead.
2. Spread operator (`...`):
	* Pros: This syntax creates a new array in a single step, reducing memory allocation overhead.
	* Cons: Not all browsers support this syntax (e.g., older versions of Chrome).

**Library and purpose**

The `Array.prototype.concat()` method is part of the JavaScript API, which is implemented by web browsers. The spread operator (`...`) is also a part of the JavaScript API.

**Special JS feature or syntax**

Note that there's no special JavaScript feature or syntax being tested in this benchmark. Both approaches are standard methods and syntax in JavaScript.

**Other alternatives**

If you were to implement array concatenation incrementally, other alternative approaches might include:

* Using a buffer or array chunking mechanism to avoid creating new arrays at each step.
* Using a more complex data structure, like a linked list, to concatenate arrays.

However, these alternatives are not being tested in this benchmark.

**Benchmark preparation code**

The script preparation code is provided as:
```javascript
var arrays = [
  Array(100).fill(1),
  Array(100).fill(2),
  Array(100).fill(3),
  Array(100).fill(4),
  Array(100).fill(5),
  Array(100).fill(6)
];
```
This code creates six arrays with a length of 100, filling each array with consecutive integers.

**Individual test cases**

The benchmark consists of two individual test cases:

1. `Array.prototype.concat()`: This test case uses the `concat()` method to concatenate the six arrays.
2. Spread operator (`...`): This test case uses the spread operator syntax to concatenate the six arrays.

These test cases measure the performance difference between these two approaches in joining arrays incrementally.

**Latest benchmark result**

The latest benchmark result is provided as:
```json
[
  {
    "RawUAString": "...",
    "Browser": "Safari 12",
    "DevicePlatform": "Desktop",
    "OperatingSystem": "Mac OS X 10.14.1",
    "ExecutionsPerSecond": 357272.0625,
    "TestName": "Array.prototype.concat"
  },
  {
    "RawUAString": "...",
    "Browser": "Safari 12",
    "DevicePlatform": "Desktop",
    "OperatingSystem": "Mac OS X 10.14.1",
    "ExecutionsPerSecond": 117853.265625,
    "TestName": "spread operator"
  }
]
```
This result shows the execution time per second for each browser, platform, and operating system on a Mac with Safari 12.

I hope this explanation helps software engineers understand what's being tested in this benchmark!

Related benchmarks:

Array.prototype.concat vs spread operator for joining arrays incrementally (version: 0)

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

Created: 7 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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