Benchmark: Array.prototype.concat vs spread operator on small batches

Tests:

Array.prototype.concat - few iterations
const obj = { a: 'string', b: 99 }; const a = Array(50).fill(obj); let b = []; for (let i = 0; i < 20; i++) { b = b.concat(a); }
Spread operator - few iterations
const obj = { a: 'string', b: 99 }; const a = Array(50).fill(obj); let b = []; for (let i = 0; i < 20; i++) { b = [...b, ...a]; }
Array.prototype.concat - many iterations
const obj = { a: 'string', b: 99 }; const a = Array(50).fill(obj); let b = []; for (let i = 0; i < 200; i++) { b = b.concat(a); }
Spread operator - many iterations
const obj = { a: 'string', b: 99 }; const a = Array(50).fill(obj); let b = []; for (let i = 0; i < 200; i++) { b = [...b, ...a]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat - few iterations
Spread operator - few iterations
Array.prototype.concat - many iterations
Spread operator - many iterations

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat - few iterations	125065.8 Ops/sec
Spread operator - few iterations	43610.0 Ops/sec
Array.prototype.concat - many iterations	1794.2 Ops/sec
Spread operator - many iterations	429.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark measures the performance difference between using `Array.prototype.concat()` and the spread operator (`...`) when concatenating arrays in JavaScript.

**Options compared**

Two options are being compared:

1. **`Array.prototype.concat()`**: A method that concatenates two or more arrays, returning a new array with all elements from the original arrays.
2. **Spread operator (`...`)**: A syntax feature introduced in ECMAScript 2015 (ES6) that allows you to expand an array or object into individual arguments.

**Pros and cons of each approach**

* **`Array.prototype.concat()`**:
	+ Pros: Simple, widely supported, and well-documented.
	+ Cons: Can be slower for large arrays due to the overhead of creating a new array and copying elements.
* **Spread operator (`...`)**:
	+ Pros: More concise and expressive, especially when concatenating small arrays.
	+ Cons: Not as well-supported in older browsers or versions of JavaScript.

**Library usage**

None of the benchmark test cases use any external libraries.

**Special JS feature/syntax**

The spread operator (`. ...`)) is a special syntax feature introduced in ECMAScript 2015 (ES6). It allows you to expand an array or object into individual arguments, making it more concise and expressive.

**Other alternatives**

* **Array.prototype.push()**: Another method for concatenating arrays, which can be faster than `concat()` but requires more memory.
* **`let result = []` followed by `result.push(...array)`**: A manual approach to concatenating arrays using the push method. While not as concise as spread operator, it provides more control.

**Benchmark context**

The benchmark measures the performance of each approach on different iterations (small vs. large) and browsers (Safari 17 on a Macintosh with Intel Mac OS X 10.15.7). The results provide insight into how these approaches perform in various scenarios.

Keep in mind that the actual performance difference between `concat()` and spread operator may vary depending on your specific use case, array size, and other factors.

Related benchmarks:

Array.prototype.concat vs spread operator on small batches (version: 0)

Comparing performance of: Array.prototype.concat - few iterations vs Spread operator - few iterations vs Array.prototype.concat - many iterations vs Spread operator - many iterations

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat - few iterations

Spread operator - few iterations

Array.prototype.concat - many iterations

Spread operator - many iterations

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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