Benchmark: Concat vs push(...) vs. spread 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)
window.top.tests.control = [...window.top.tests.control, ...window.test] 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:

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 JSON data and explain what's being tested.

**Benchmark Definition**

The benchmark compares three different approaches to append an array:

1. **Concat**: Using the `concat` method to add elements to the end of an array.
2. **Push**: Using the `push` method to add elements to the end of an array.
3. **Spread**: Using the spread operator (`...`) to create a new array with elements appended.

**Options Compared**

Each test case compares one approach against another, creating a tripartite comparison:

* Control (for push): The baseline, using `push` for appending.
* Concat: Compared to control.
* Spread: Compared to control and concatenation.

**Pros and Cons of Each Approach**

Here's a brief summary of the advantages and disadvantages of each method:

1. **Concat**:
	* Pros: Simple to implement, widely supported.
	* Cons: Creates a new array object on each push operation, leading to memory allocation overhead.
2. **Push**:
	* Pros: Efficient use of memory, fast execution.
	* Cons: Can be less readable due to the `push` method's name, which may not convey its purpose clearly.
3. **Spread**:
	* Pros: Fast and efficient, creates a new array object only when necessary.
	* Cons: May require additional imports (e.g., ES6+ support), can lead to stack overflow if too many elements are pushed.

**Library Used**

None explicitly mentioned in the provided data.

**Special JS Feature/Syntax**

The use of spread operator (`...`) is a feature introduced in ECMAScript 2015 (ES6+). It allows for concise array creation by spreading elements from an iterable source into a new array. This syntax is not supported in older browsers or environments without ES6+ support.

**Benchmark Preparation Code**

The script preparation code initializes variables:

* `window.top.tests`: An object to store the benchmark results.
* `control`, `concat`, and `spread` arrays are initialized with length 0.
* A test array (`window.test`) is created with 10 null elements.

**Other Alternatives**

If push, concat, or spread methods were not available, other approaches could have been used:

1. Using `Array.prototype.push.apply()` to append multiple elements.
2. Creating a new array using the `Array` constructor and iterating over the source array.
3. Utilizing libraries like Lodash (e.g., `_without`) for efficient array manipulation.

However, these alternatives would likely lead to more complex code and might not be as performance-oriented as using built-in methods like push or concat.

Related benchmarks:

Concat vs push(...) vs. spread 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: 3 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

No previous run results

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