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

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Array.prototype.flat
var params = [ "hello", true, 7 ]; var other = [1, 2, params].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: 11 months ago)

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

Browser/OS: Chrome 137 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	16904514.0 Ops/sec
spread operator	56119664.0 Ops/sec
Array.prototype.flat	8331996.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, the different approaches compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark compares the performance of three ways to concatenate or manipulate arrays in JavaScript:

1. `Array.prototype.concat()`
2. The new ES6 spread operator (`...`)
3. `Array.prototype.flat()` (with the `flat()` method)

**Approaches Compared**

Here's a brief overview of each approach:

### 1. `Array.prototype.concat()`

`concat()` is a traditional way to concatenate two or more arrays in JavaScript. It creates a new array and copies elements from both arrays into it.

Pros: Well-established, widely supported, easy to understand.
Cons: Creates a new array, can be slower than other methods due to the overhead of creating a new object.

### 2. Spread Operator (`...`)

The spread operator is a new way to concatenate arrays introduced in ES6. It allows you to use the `...` syntax to expand an array and include its elements as separate arguments.

Pros: Efficient, creates a new array with minimal overhead.
Cons: Only supported in modern browsers, requires JavaScript 6+ for compatibility.

### 3. `Array.prototype.flat()`

`flat()` is a method introduced in ES6 that flattens arrays of arrays into a single-level array. It's used here to flatten the spread operator's result.

Pros: Efficient, creates a new array with minimal overhead.
Cons: Only supported in modern browsers, requires JavaScript 6+ for compatibility.

**Library and Syntax**

None of these approaches rely on external libraries or special JavaScript features (like async/await, Promises, etc.). However, it's worth noting that the benchmark is designed to test browser performance, which means it may not be representative of Node.js performance.

**Considerations**

When choosing between these approaches, consider the trade-offs:

* If you need to concatenate arrays frequently and don't mind creating a new array, `concat()` might be sufficient.
* For more efficient and modern ways to manipulate arrays, use the spread operator (`...`) or `flat()`.
* Keep in mind that this benchmark is designed for browser performance, so if you're targeting Node.js or another environment, you may want to consider alternative approaches.

**Other Alternatives**

If you need even more efficiency or flexibility when working with arrays, consider these alternatives:

* `Array.prototype.push()` and `Array.prototype.unshift()`: While not as efficient as the spread operator or `flat()`, these methods can be used for array concatenation.
* Native WebAssembly: For very low-level, highly optimized array manipulation, consider using WebAssembly.

Related benchmarks:

Array.prototype.concat vs spread operator vs flat (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: 7 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):