Benchmark: array spread vs concat vs push in reduce

Tests:

spread
range = (min, max) => { const output = [] for(let x = min; x < max; x++){ output.push(x) } return output } range(0, 15000).reduce((acc, num) => [...acc, num], [])
concat
range = (min, max) => { const output = [] for(let x = min; x < max; x++){ output.push(x) } return output } range(0, 15000).reduce((acc, num) => acc.concat(num), [])
push
range = (min, max) => { const output = [] for(let x = min; x < max; x++){ output.push(x) } return output } range(0, 15000).reduce((acc, num) => { acc.push(num); return acc; }, [])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat
push

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, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares three ways to create an array in JavaScript: using the spread operator (`[...]`), `concat()` method, and pushing elements to an existing array. The test case generates a large array of numbers from 0 to 15,000 using a custom `range()` function, which is then reduced to return a new array.

**Test Cases**

There are three test cases:

1. **Spread**: Uses the spread operator to create a new array and push elements into it.
2. **Concat**: Uses the `concat()` method to merge arrays and push elements into it.
3. **Push**: Pushes elements directly onto an existing empty array.

**Library Used**

None, this is a basic JavaScript benchmark without any external libraries or dependencies.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in these test cases.

**Options Compared**

The three options being compared are:

* **Spread**: Creates a new array using the spread operator (`[...]`) and pushes elements into it.
	+ Pros: Efficient way to create a new array and push elements, as it avoids mutating the original array.
	+ Cons: Can be slower for large arrays due to the creation of a new array object.
* **Concat**: Uses the `concat()` method to merge arrays and push elements into it.
	+ Pros: Fast and efficient way to merge arrays, but may mutate the original array.
	+ Cons: May not be suitable when preserving the original order of elements.
* **Push**: Pushes elements directly onto an existing empty array.
	+ Pros: Fast and efficient way to add elements to an array, without creating a new array object.
	+ Cons: Mutates the original array, which may not be desirable in some cases.

**Benchmark Results**

The latest benchmark results show that the **Push** approach is the fastest, followed by **Concat**, and then **Spread**. This suggests that pushing elements onto an existing array is the most efficient way to create a new array with a large number of elements.

**Alternatives**

Other alternatives for creating arrays in JavaScript include:

* Using `Array.from()` method: Creates a new array from an iterable object.
	+ Pros: Can be more memory-efficient than creating a new array using the spread operator or pushing elements onto an existing array.
	+ Cons: May not be suitable when working with large datasets.
* Using a loop to create an array from scratch: Can be faster for very large arrays, but may require more memory and CPU resources.

Overall, this benchmark helps to highlight the importance of considering the trade-offs between creating new arrays and mutating existing ones in JavaScript.

Related benchmarks:

array spread vs concat vs push in reduce (version: 0)

Comparing performance of: spread vs concat vs push

Created: 7 years ago by: Registered User

Jump to the latest result

spread

concat

push

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