Benchmark: Large Array concat vs spread operator vs push

Tests:

Array.prototype.concat
var params = new Array(10000); var other = [ 1, 2 ].concat(params);
spread operator
var params = new Array(10000); var other = [ 1, 2, ...params ]
Push
var params = new Array(10000); var other = [ 1, 2 ].push(...params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	106096.8 Ops/sec
spread operator	22581.0 Ops/sec
Push	36017.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided JSON represents a benchmark test case on MeasureThat.net, which compares three approaches to concatenate arrays in JavaScript: `Array.prototype.concat`, the spread operator (`...`), and the `push()` method with spread syntax.

**Options Compared**

1. **Array.prototype.concat**: This is a traditional method for concatenating arrays. It creates a new array by copying elements from both arrays.
2. **Spread Operator (`...`)**: Introduced in ES6, this operator allows for more concise array creation and manipulation.
3. **Push() with spread syntax**: This approach uses the `push()` method to add elements to an existing array, followed by the spread operator (`...`) to pass additional arguments.

**Pros and Cons of Each Approach**

1. **Array.prototype.concat**:
	* Pros: Widely supported in older browsers, easy to understand.
	* Cons: Creates a new array object, can lead to performance issues if concatenating large arrays.
2. **Spread Operator (`...`)**:
	* Pros: More concise and expressive than traditional `concat()`. Supports multiple arrays and iterables.
	* Cons: Requires modern JavaScript support (ES6+), might not be familiar to older developers.
3. **Push() with spread syntax**:
	* Pros: Avoids creating a new array, modifies the original array in place, which can be more efficient for large datasets.
	* Cons: May have performance issues if concatenating very large arrays, and some older browsers might not support it.

**Library Used (if any)**

None of the benchmark test cases explicitly use any external libraries. However, some JavaScript implementations might include built-in optimizations or assumptions that could affect the results.

**Special JS Features/Syntax**

The benchmark test cases use modern JavaScript features:

* ES6 spread operator (`...`)
* ES6 arrow functions (`var params = new Array(10000);` is not used in the latest code; but in the previous benchmark the var was there)
* No explicit `const` or `let` declarations, which is a common pattern in older JavaScript implementations.

**Alternative Approaches**

Other approaches to concatenate arrays include:

1. **Array.prototype.splice()**: Modifies the original array by replacing elements with new ones.
2. **Array.prototype.set()**: A more modern approach using the `set()` method, but not widely supported.
3. **For loops or recursive functions**: Manual implementation of concatenation using loops or recursion.

Keep in mind that these alternative approaches might have different performance characteristics and requirements for browser support.

Related benchmarks:

Large Array concat vs spread operator vs push (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: Array.prototype.concat vs spread operator vs Push

Created: 3 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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