Benchmark: Array.prototype.concat vs spread operator 2023

Tests:

Array.prototype.concat
const a = Array(1000).fill('a'); const b = Array(1000).fill('b'); const ab = a.concat(b);
Spread operator
const a = Array(1000).fill('a'); const b = Array(1000).fill('b'); const ab = [...a, ...b];

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 runs

Array.prototype.concat

249K/s

Spread operator

115K/s

Fastest: Array.prototype.concat (2.2x faster)

View exact numbers

✓ Array.prototype.concat: 248,740 ops/sec
• Spread operator: 115,261 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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Linux

View result in a separate tab

Array.prototype.concat

319K/s

Spread operator

178K/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat	319,415 Ops/sec
Spread operator	178,494 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 on MeasureThat.net.

The provided benchmark measures the performance difference between two approaches to concatenate arrays in JavaScript: using `Array.prototype.concat()` and the spread operator (`...`).

**What is tested?**

The benchmark tests how fast each approach can concatenate two large arrays (1000 elements) created with `Array(1000).fill('a')` and `Array(1000).fill('b')`.

**Options compared:**

1. **`Array.prototype.concat()`:**
	* This method takes two or more arrays as arguments and returns a new array containing all the elements from each input array.
	* It's a built-in method in JavaScript, making it widely supported across different browsers and environments.
2. **Spread operator (`...`):**
	* This syntax was introduced in ECMAScript 2015 (ES6) and allows you to expand an iterable (like an array) into individual elements.
	* It's a concise way to create a new array with elements from multiple sources.

**Pros and cons:**

1. **`Array.prototype.concat()`:**
	* Pros:
		+ Widely supported across different browsers and environments.
		+ Can handle large arrays efficiently.
	* Cons:
		+ Creates a new array, which can lead to increased memory usage for large input sizes.
		+ May not be as performant as other approaches (see below).
2. **Spread operator (`...`):**
	* Pros:
		+ More concise and readable than `concat()`.
		+ Reduces memory usage compared to creating a new array with `Array.prototype.concat()`.

**Library/dependencies:**

None mentioned in the benchmark definition or test cases.

**Special JavaScript features/syntax:**

The spread operator (`...`) is a relatively recent feature introduced in ECMAScript 2015 (ES6). It's widely supported across modern browsers, but may not work in older versions.

**Other alternatives:**

1. **`Array.prototype.push()` and `Array.prototype.length`:**
	* You could concatenate two arrays by pushing elements from one array into another using `push()`.
2. **`Array.prototype.forEach()` or `Array.prototype.map()`:**
	* These methods can be used to concatenate two arrays, but might be less efficient due to their side effects (e.g., modifying the original array).

Keep in mind that these alternatives may have varying degrees of performance and readability compared to the spread operator.

Now, if you're curious about how MeasureThat.net generates benchmark results or what else is tested on the website, feel free to ask!

Array.prototype.concat vs spread operator 2023 (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat

Spread operator

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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.prototype.concat vs spread operator 2023 (version: 0)

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

Created: 2 years ago by: Guest

Go to the latest result

Array.prototype.concat

Spread operator

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Chrome 8 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`