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()

Historical Performance Data aggregated from 70 community runs

Desktop Results:

Chrome 55 runs

spread operator

56.6M/s

Array.prototype.concat

16.0M/s

Array.prototype.flat

7.5M/s

Fastest: spread operator (7.5x faster)

View exact numbers

✓ spread operator: 56,612,732 ops/sec
• Array.prototype.concat: 15,991,792 ops/sec
• Array.prototype.flat: 7,539,446 ops/sec

Firefox 9 runs

spread operator

23.6M/s

Array.prototype.concat

23.5M/s

Array.prototype.flat

17.9M/s

Fastest: spread operator (1.3x faster)

View exact numbers

✓ spread operator: 23,603,946 ops/sec
• Array.prototype.concat: 23,528,842 ops/sec
• Array.prototype.flat: 17,909,150 ops/sec

Mobile Results:

Chrome 6 runs

spread operator

27.6M/s

Array.prototype.concat

5.8M/s

Array.prototype.flat

2.6M/s

Fastest: spread operator (10.8x faster)

View exact numbers

✓ spread operator: 27,564,902 ops/sec
• Array.prototype.concat: 5,832,357 ops/sec
• Array.prototype.flat: 2,563,411 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year 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

spread operator

56.1M/s

Array.prototype.concat

16.9M/s

Array.prototype.flat

8.3M/s

View exact numbers

Test name	Executions per second
✓ spread operator	56,119,664 Ops/sec
Array.prototype.concat	16,904,514 Ops/sec
Array.prototype.flat	8,331,996 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.

Array.prototype.concat vs spread operator vs flat (version: 0) Benchmark.js

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

Go to the latest result

Array.prototype.concat

spread operator

Array.prototype.flat

Historical Performance Data aggregated from 70 community runs

Desktop Results:

Chrome 55 runs

Firefox 9 runs

Mobile Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.prototype.concat vs spread operator vs flat (version: 0) Benchmark.js

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

Go to the latest result

Array.prototype.concat

spread operator

Array.prototype.flat

Historical Performance Data aggregated from 70 community runs

Desktop Results:

Chrome 55 runs

Firefox 9 runs

Mobile Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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