Benchmark: Array.prototype.concat vs spread operator vs flat2

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var params2 = [ "hello", true, 7 ]; var other = params.concat(params2);
spread operator
var params = [ "hello", true, 7 ]; var params2 = [ "hello", true, 7 ]; var other = [ ...params, ...params2 ]
Array.prototype.flat
var params = [ "hello", true, 7 ]; var params2 = [ "hello", true, 7 ]; var other = [params, params2].flat()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Array.prototype.flat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 119 on Android

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	6041433.0 Ops/sec
spread operator	23887200.0 Ops/sec
Array.prototype.flat	1143756.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is tested in each test case.

**Benchmark Definition**

The benchmark compares three approaches to concatenate two arrays in JavaScript:

1. `Array.prototype.concat()`
2. The spread operator (`...`)
3. `Array.prototype.flat()` (specifically, the `.flat(Infinity)` method)

These three approaches are compared for their performance, efficiency, and consistency.

**Pros and Cons of Each Approach**

* **`Array.prototype.concat()`**: This is a traditional method that creates a new array by concatenating two arrays using the spread operator. It can be slower than other methods because it involves creating a new array object.
* **Spread Operator (`...`)**: The spread operator allows you to create a new array by spreading elements from existing arrays. It is generally faster than `concat()` because it avoids creating a new array object.
* **`Array.prototype.flat()` (`.flat(Infinity)`)**: This method flattens an array of arrays into a single array, removing any nested arrays. The `.flat(Infinity)` method ensures that the original array structure is preserved. It can be slower than other methods because it involves recursive calls.

**Library and Purpose**

None of the test cases use any external libraries or frameworks.

**Special JS Feature or Syntax**

The spread operator (`...`) is a new feature introduced in ECMAScript 2015 (ES6). It allows you to create a new array by spreading elements from existing arrays. This syntax is supported in modern browsers and JavaScript engines.

**Other Alternatives**

In addition to the three approaches tested, other alternatives for concatenating arrays include:

* `Array.prototype.push()`: You can push all elements from one array into another using `push()`. However, this method modifies the original array.
* `Array.prototype.set()`: Some older browsers and JavaScript engines support `set()` as an alternative to `concat()`. However, this method is not widely supported.

In summary, the benchmark tests three approaches for concatenating arrays in JavaScript: `Array.prototype.concat()`, the spread operator (`...`), and `Array.prototype.flat() (`.flat(Infinity)`). Each approach has its pros and cons, and the test results provide insight into their relative performance on mobile devices running Chrome browser.

Related benchmarks:

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

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: Array.prototype.concat vs spread operator vs Array.prototype.flat

Created: 2 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Array.prototype.flat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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