Benchmark: Array spread operator vs push, large list

Script Preparation code:

window.startArray = [];
for (let i = 0; i < 100; i++) {
  startArray.push("El-" + i);
}

Tests:

spread
startArray.reduce((accumulator, currentValue) => { return [...accumulator, currentValue]; }, []);
push
startArray.reduce((accumulator, currentValue) => { accumulator.push(currentValue); return accumulator; }, []);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Windows

View result in a separate tab

Test name	Executions per second
spread	22987.2 Ops/sec
push	1321015.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is being tested.

**Benchmark Purpose**

The benchmark is designed to compare two approaches for manipulating arrays in JavaScript: using the spread operator (`[...]`) and using the `push()` method.

**Approaches Compared**

There are two test cases:

1. **Push**: This approach uses the `push()` method to add elements to an array.
2. **Spread**: This approach uses the spread operator (`[...]`) to create a new array by spreading the existing array.

**Pros and Cons of Each Approach**

* **Push**:
	+ Pros: Efficient for adding a single element to an array, as it only requires one operation.
	+ Cons: Inefficient for large arrays, as it requires multiple operations (each adding an element) and can lead to performance issues due to frequent array resizing.
* **Spread**:
	+ Pros: Efficient for large arrays, as it creates a new array by copying all elements from the original array in one operation.
	+ Cons: Less efficient for small arrays or when only adding a single element, as it involves additional overhead (creating a new array and iterating over elements).

**Library Used**

There is no explicit library mentioned in the benchmark definition. However, it's likely that a built-in JavaScript function or method is being used.

**Special JS Feature or Syntax**

The use of the spread operator (`[...]`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows for creating new arrays by spreading existing arrays or values into them.

**Other Considerations**

* The benchmark uses a large array of 100 elements to simulate real-world scenarios.
* The `reduce()` method is used as a utility function to combine the two approaches, allowing for direct comparison between them.

**Alternatives**

If alternative approaches were to be considered, some options might include:

1. Using `concat()`: Another way to create a new array by concatenating existing arrays or values into it.
2. Using a custom implementation: Writing a custom loop to iterate over the elements and add them to the array.
3. Using a different data structure: Alternatives like linked lists, trees, or other data structures that might be more efficient for certain operations.

However, these alternatives are not explicitly mentioned in the benchmark definition, and the use of `push()` and the spread operator is likely due to their simplicity, efficiency, and widespread adoption in modern JavaScript codebases.

Related benchmarks:

Array spread operator vs push, large list (version: 0)

Comparing performance of: spread vs push

Created: 2 years ago by: Guest

Jump to the latest result

spread

push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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