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];

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

Test name	Executions per second
Array.prototype.concat	319415.2 Ops/sec
Spread operator	178494.3 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!

Related benchmarks:

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

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

Created: 2 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

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