Benchmark: concat() vs spread operator

Script Preparation code:

foo = Array.from(Array(1000).keys())
bar = Array.from(Array(1000).keys())

Tests:

concat
const result = foo.concat(bar)
spread operator
const result = [ ...foo, ...bar ]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
concat	1722031.5 Ops/sec
spread operator	289053.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 what's being tested on MeasureThat.net.

**Benchmark Overview**

The benchmark is comparing the performance of two methods for combining arrays: `concat()` and the spread operator (`...`). The test creates two large arrays, `foo` and `bar`, each with 1000 elements. It then measures the time it takes to execute these two operations using each method.

**Options Compared**

There are two options being compared:

1. **Concatenation using `.concat()`**: This is a traditional way of concatenating arrays in JavaScript. The `concat()` method returns a new array that contains all elements from both arrays.
2. **Spread Operator (`...`)**: This is a newer way of creating an array by spreading its elements into a new array. It's shorthand for `[...array1, ...array2]`.

**Pros and Cons**

**Concatenation using `.concat()`**

Pros:

* Wide support across browsers and platforms
* Easy to understand and implement

Cons:

* Creates a new array, which can lead to memory allocation overhead
* Can be slower than the spread operator for large arrays

**Spread Operator (`...`)**

Pros:

* More concise and expressive than `.concat()`
* Efficiently creates a new array without allocating extra memory
* Fast performance, even for large arrays

Cons:

* Requires modern browsers and JavaScript engines that support it (Chrome 64+, Safari 11+)
* May not work in older environments or with certain libraries that don't understand the spread operator

**Library Used**

In this benchmark, no library is explicitly mentioned. However, it's likely that MeasureThat.net uses a custom implementation of the benchmarking framework.

**Special JS Features/ Syntax**

None are explicitly used in this benchmark, as both options only require standard JavaScript features.

**Other Alternatives**

If you want to explore alternative methods for combining arrays, here are some additional options:

* **Array.prototype.push()**: You can use `push()` to add elements to an array and then return the new length using `length`.
* **Array.prototype.splice()**: Similar to `push()`, but uses `splice()` to replace or remove elements from the original array.
* **Use a third-party library**: There are libraries like Lodash (`_.concat()`) that provide optimized implementations of array concatenation and spreading.

Keep in mind that these alternatives might not be as efficient or concise as using the spread operator, and their performance may vary depending on the specific use case.

Related benchmarks:

concat() vs spread operator (version: 0)

Performance comparison of two methods of combining arrays shown here: https://twitter.com/SimonHoiberg/status/1287797397137965057

Comparing performance of: concat vs spread operator

Created: 5 years ago by: Guest

Jump to the latest result

concat

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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