Benchmark: Array.concat vs native array spread

Tests:

Array spread (small arrays)
const a = [1, 2]; const b = [true, 'hello', 7]; const c = [...a, ...b];
Array spread (big arrays)
const a = (new Array(1000)).fill(0); const b = (new Array(1000)).fill(1); const c = [...a, ...b];
Array.concat (small arrays)
const a = [1, 2]; const b = [true, 'hello', 7]; const c = a.concat(b);
Array.concat (big arrays)
const a = (new Array(1000)).fill(0); const b = (new Array(1000)).fill(1); const c = a.concat(b);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array spread (small arrays)
Array spread (big arrays)
Array.concat (small arrays)
Array.concat (big arrays)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark measures the performance of two JavaScript array methods: `Array.prototype.concat()` and the spread operator (`...`).

**Options Compared**

There are four test cases:

1. **Small arrays**: The first two test cases use small arrays with a fixed length ( `[1, 2]`, `[true, 'hello', 7]`) to create two separate arrays and then concatenate them using both methods.
	* `Array.prototype.concat()`
	* Spread operator (`...`)
2. **Big arrays**: The last two test cases use large arrays filled with zeros or ones ( `(new Array(1000)).fill(0)`, `(new Array(1000)).fill(1)` ) to create two separate arrays and then concatenate them using both methods.

**Pros and Cons**

* **Array.prototype.concat()**:
	+ Pros: More predictable behavior, better support for older browsers.
	+ Cons: May be slower due to the need to create a new array and perform additional checks.
* **Spread operator (`...`)**:
	+ Pros: Faster, more efficient, and easier to read. It also creates a new array without modifying the original arrays.
	+ Cons: Requires JavaScript 7+, may not work in older browsers.

**Library/Functionality Used**

The `concat()` method is a native JavaScript function that concatenates two or more arrays.

The spread operator (`...`) is a feature introduced in ECMAScript 2015 (ES6) to create a new array by spreading the elements of an existing array.

**Special JS Feature/Syntax**

* The spread operator (`...`), as mentioned earlier, was introduced in ES6 and is not supported in older browsers.

**Other Alternatives**

If you need to concatenate arrays, you can also use other methods like `Array.prototype.push()` or libraries like Lodash. However, the spread operator is generally considered a more efficient and concise solution.

Keep in mind that the choice of method depends on your specific use case, performance requirements, and target browser support.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.79 Safari/537.36

Browser/OS: Chrome 100 on Windows

View result in a separate tab

Test name	Executions per second
Array spread (small arrays)	27296830.0 Ops/sec
Array spread (big arrays)	99875.7 Ops/sec
Array.concat (small arrays)	8892511.0 Ops/sec
Array.concat (big arrays)	206911.2 Ops/sec

Related benchmarks:

Array.concat vs native array spread (version: 0)

Comparing performance of: Array spread (small arrays) vs Array spread (big arrays) vs Array.concat (small arrays) vs Array.concat (big arrays)

Created: 2 years ago by: Guest

Jump to the latest result

Array spread (small arrays)

Array spread (big arrays)

Array.concat (small arrays)

Array.concat (big arrays)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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