Benchmark: Array.prototype.concat vs Spread speedtest

Script Preparation code:

function generateRandomNumbers(m) {
  const array = new Uint32Array(m);
  window.crypto.getRandomValues(array);
  return Array.prototype.map.call(array, val => val);
}

function generateRandomArrays(n, m) {
  const array = [];
  for (let i = 0; i < n; i++) {
	array.push(generateRandomNumbers(m))
  }
  return array;
}


var array = generateRandomArrays(1e4, 1e1);

Tests:

Array.prototype.concat
const b = array.reduce((accumulator, value) => accumulator.concat(value));
Spread operator
const c = array.reduce((accumulator, value) => [...accumulator, ...value]);

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:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chrome 87 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	0.7 Ops/sec
Spread operator	0.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON benchmark definition and its test cases.

**What is tested?**

The benchmark tests two different ways to concatenate arrays in JavaScript: using `Array.prototype.concat()` and using the spread operator (`...`).

**Options compared**

There are two options being compared:

1. **`Array.prototype.concat()`**: This method creates a new array by copying elements from an existing array.
2. **Spread operator (`...`)**: This syntax creates a new array by spreading elements from an existing array.

**Pros and Cons of each approach**

* **`Array.prototype.concat()`**:
	+ Pros:
		- More explicit and readable code
		- Can be more efficient for large arrays, as it avoids creating temporary arrays
	+ Cons:
		- Creates a new array, which can lead to higher memory usage
		- Can be slower than the spread operator for small arrays
* **Spread operator (`...`)**:
	+ Pros:
		- More concise and readable code
		- Avoids creating temporary arrays, making it more memory-efficient
	+ Cons:
		- Less explicit than `concat()`, which can make it harder to understand
		- Can be slower than `concat()` for large arrays

**Library used**

The benchmark uses the `reduce()` method of arrays, which is a common way to concatenate arrays in JavaScript. The `reduce()` method applies a function to each element in an array and returns a single value.

No external libraries are required for this benchmark.

**Special JS feature or syntax**

The spread operator (`...`) is a relatively recent addition to the JavaScript language, introduced in ECMAScript 2015 (ES6). It allows you to create a new array by spreading elements from an existing array.

**Benchmark preparation code**

The provided `generateRandomNumbers` and `generateRandomArrays` functions are used to generate random arrays for testing. These functions use the `window.crypto.getRandomValues()` method to generate random numbers, which is a widely supported feature in modern browsers.

**Other alternatives**

For concatenating arrays, you can also use other methods like:

* Using the `Array.prototype.push()` method and setting `length` property manually
* Creating an intermediate array using `Array.from()` or `new Array()`, and then pushing elements to it

However, these approaches may be less efficient or more verbose than using `concat()` or the spread operator.

**Test case interpretation**

The test cases are designed to measure the performance of concatenating arrays in two different ways. The raw UA string data provides information about the browser, device platform, and operating system being used for each test run. The `ExecutionsPerSecond` value indicates how many iterations of the benchmark were completed per second on the given hardware.

The benchmark results show that Chrome 87 is faster at concatenating arrays using the spread operator than using `concat()`. This may be due to various factors, such as the language implementation, browser optimizations, or even hardware-specific differences.

Related benchmarks:

Array.prototype.concat vs Spread speedtest (version: 2)

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

Created: 6 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

Spread operator

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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