Benchmark: Array concat vs spread operator vs push with spread operator

Script Preparation code:

var numbers = [...Array(1000).keys()]
var arr = [numbers, numbers, numbers, numbers, numbers]

Tests:

concat
var results = arr.reduce((acc, cur) => acc.concat(cur), []);
spread operator
var results = arr.reduce((acc, cur) => [...acc, ...cur], []);
push with spread operator
var results = arr.reduce((acc, cur) => { acc.push(cur); return acc; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread operator
push with spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, the pros and cons of each approach, and other considerations.

**Benchmark Description**

The benchmark compares three ways to concatenate arrays in JavaScript:

1. `Array.prototype.concat()`
2. The spread operator (`...`)
3. Using the `push()` method with the spread operator (`...`)

The test case uses an array of 1000 numbers as input data.

**Options Compared**

* **Concatenation using Array.prototype.concat()**: This is a traditional way to concatenate arrays in JavaScript.
* **Spread Operator (`...`)**: This is a new feature introduced in ECMAScript 2015, which allows for more concise and expressive array operations. It works by spreading the contents of an array into a new array.
* **Push with Spread Operator (`...`)**: This approach uses the `push()` method to add elements to an array while also using the spread operator to provide initial values.

**Pros and Cons**

1. **Array.prototype.concat()**:
	* Pros: Widely supported across browsers, easy to understand, and well-documented.
	* Cons: Can be slower than other methods due to the overhead of calling a method on an array.
2. **Spread Operator (`...`)**:
	* Pros: More concise and expressive than traditional concatenation methods, can lead to more efficient code.
	* Cons: Not supported in older browsers or versions of JavaScript (e.g., older Edge, Safari).
3. **Push with Spread Operator (`...`)**:
	* Pros: Combines the benefits of both `concat()` and the spread operator, potentially leading to better performance.
	* Cons: Can be less readable than traditional concatenation methods, as it requires a bit more mental effort to understand.

**Library Used**

None. This benchmark only uses built-in JavaScript features.

**Special JS Feature or Syntax**

The spread operator (`...`) is a new feature introduced in ECMAScript 2015. It's used extensively in modern JavaScript code and has become a standard part of the language.

**Other Considerations**

* **Browser Support**: The benchmark measures performance across different browsers (in this case, Chrome 86 on Windows). Different browsers may have varying levels of support for new features like the spread operator.
* **Code Readability**: While push with spread operator might lead to better performance, it can also make code less readable. Code readability is an important aspect of software development, and benchmarking should consider this factor.

**Alternatives**

Other alternatives for array concatenation in JavaScript include:

1. Using `Array.prototype.reduce()` with the initial value set to an empty array.
2. Using a loop to iterate over each element in the first array and push it onto a new array.
3. Using a library like Lodash, which provides a more concise way to concatenate arrays using its `concat` function.

However, these alternatives may not be as efficient or expressive as the spread operator (`...`) when used correctly.

Related benchmarks:

Array concat vs spread operator vs push with spread operator (version: 0)

Comparing performance of: concat vs spread operator vs push with spread operator

Created: 5 years ago by: Guest

Jump to the latest result

concat

spread operator

push with spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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