Benchmark: Concat vs push vs spread for large arrays 2

Script Preparation code:

window.top.tests = {control:[], concat:[], spread:[]};
window.test = (new Array(10)).fill(null);
window.cutoff = 5000;

Tests:

Control (for push)
for (let element of window.test) window.top.tests.control.push(element); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Concat
window.top.tests.concat = window.top.tests.concat.concat(window.test); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
Spread
window.top.tests.spread = [...window.top.tests.spread, ...window.test]; if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Control (for push)
Concat
Spread

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/124.0.0.0 Safari/537.36

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
Control (for push)	317087.5 Ops/sec
Concat	492558.5 Ops/sec
Spread	333998.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 the test cases and explain what is being tested.

**What is being tested?**

The test case measures how different approaches perform when appending to a large array in JavaScript:

1. **Control (for push)**: Using the `push()` method on an array to append new elements.
2. **Concat**: Using the `concat()` method on an array to append new elements.
3. **Spread**: Using the spread operator (`...`) to create a new array by appending existing elements.

**Options compared**

The test case is comparing three options:

* `control` (using `push()`)
* `concat` (using `concat()`)
* `spread` (using the spread operator)

**Pros and Cons of each approach:**

1. **Control (for push)**:
	* Pros:
		+ Fast and efficient, as it modifies the original array.
		+ Can be more intuitive for developers familiar with the `push()` method.
	* Cons:
		+ May cause performance issues if the array is very large, as it involves modifying the original array.
2. **Concat**:
	* Pros:
		+ Creates a new array each time, which can be beneficial for large datasets to avoid modifying the original array.
		+ Can be more predictable and easier to debug.
	* Cons:
		+ May be slower than `push()` due to the overhead of creating a new array.
3. **Spread**:
	* Pros:
		+ Creates a new array by appending elements, which can help avoid performance issues with large datasets.
		+ Can be more concise and expressive for developers familiar with the spread operator.
	* Cons:
		+ May require more memory to create a new array each time.

**Library: None**

There is no library used in this test case. The functionality is built-in to JavaScript.

**Special JS feature or syntax: Spread operator (`...`)**

The spread operator is a relatively recent addition to JavaScript, introduced in ECMAScript 2015 (ES6). It allows you to create a new array by spreading elements from an existing array.

Other alternatives:

* Using `Array.prototype.push()` with `array.length` as the second argument (e.g., `array.push(...newArray)`) could be another approach.
* Using `Array.prototype.concat()` with no arguments (e.g., `array = array.concat(newArray)`) could also be an alternative. However, this approach would create a new array and modify the original one, similar to the `concat` test case.

In summary, the test case measures the performance differences between three approaches for appending elements to a large array in JavaScript: using `push()`, `concat()`, or the spread operator (`...`). The results can help developers make informed decisions about which approach to use depending on their specific requirements and performance considerations.

Related benchmarks:

Concat vs push vs spread for large arrays 2 (version: 0)

Comparing the various ways to append to a large array

Comparing performance of: Control (for push) vs Concat vs Spread

Created: one year ago by: Guest

Jump to the latest result

Control (for push)

Concat

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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