Benchmark: Concat vs push(...) for large arrays

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.push(...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: 11 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Linux

View result in a separate tab

Test name	Executions per second
Control (for push)	269374.0 Ops/sec
Concat	245921.0 Ops/sec
Spread	927466.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 provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares three approaches to appending to a large array in JavaScript:

1. Using `push()` method (Control)
2. Using `concat()` method (Concat)
3. Using spread syntax (`...`) (Spread)

These tests aim to determine which approach is the fastest and most efficient for large arrays.

**Library and Purpose**

In this benchmark, two libraries/libraries are used:

* **Array.prototype.push()**: This is a built-in JavaScript function that appends an element to the end of an array.
* **Array.prototype.concat()**: This is also a built-in JavaScript function that returns a new array containing all elements from the original array and any additional arrays provided as arguments.

**Special JS Feature/Syntax**

The benchmark uses the spread syntax (`...`) to append elements to an array. The spread syntax was introduced in ECMAScript 2015 (ES6) and allows for creating a new array by spreading the elements of an existing array or an array-like object.

**Benchmark Test Cases**

Each test case is defined as follows:

* `window.top.tests.control.push(element);`: This line appends an element to the end of the `control` array using the `push()` method.
* `window.top.tests.concat = window.top.tests.concat.concat(window.test);`: This line appends all elements from the `test` array to the end of the `concat` array using the `concat()` method.
* `window.top.tests.spread.push(...window.test);`: This line appends all elements from the `test` array to the end of the `spread` array using the spread syntax (`...`).

**Options Being Compared**

The benchmark compares the performance of each approach for large arrays:

* Control (push():)
* Concat (concat():)
* Spread (...)

**Pros and Cons of Each Approach**

Here's a brief overview of the pros and cons of each approach:

1. **Control (push()):**
	* Pros: Efficient, widely supported, and easy to use.
	* Cons: May be slower for very large arrays due to the overhead of function calls.
2. **Concat (concat():**
	* Pros: Can be efficient for large arrays when used correctly (e.g., using `concat()` with an array-like object).
	* Cons: May be slower than push() due to the overhead of creating a new array and iterating over its elements.
3. **Spread (...):**
	* Pros: Efficient, concise, and easy to use.
	* Cons: May not work correctly in older browsers or environments that don't support the spread syntax.

**Other Considerations**

When choosing an approach, consider the following factors:

* Performance: For very large arrays, push() may be faster due to its simplicity and reduced overhead. However, for smaller arrays, the difference between approaches is likely negligible.
* Code readability and maintainability: Spread syntax can make code more concise and readable, but it's essential to ensure that it's used correctly to avoid errors or performance issues.
* Browser support: Make sure that the approach you choose works in the target browsers or environments.

**Alternatives**

Other alternatives for appending elements to an array include:

* `unshift()`: Adds an element to the beginning of an array, which can be useful for inserting new elements at a specific position.
* `splice()`: Removes and replaces elements in an array, which can be useful for inserting or removing elements at specific positions.

However, these alternatives may not offer the same level of efficiency or convenience as push(), concat(), or spread().

Related benchmarks:

Concat vs push(...) for large arrays (version: 0)

Comparing the various ways to append to a large array

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

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