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);

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Array.prototype.concat

169K/s

Push

50K/s

spread operator

31K/s

Fastest: Array.prototype.concat (5.5x faster)

View exact numbers

✓ Array.prototype.concat: 169,309 ops/sec
• Push: 49,906 ops/sec
• spread operator: 30,861 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: one year ago)

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

Browser/OS: Firefox 135 on Ubuntu

View result in a separate tab

Array.prototype.concat

750K/s

spread operator

15K/s

Push

4K/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat	749,581 Ops/sec
spread operator	15,126 Ops/sec
Push	4,078 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 5 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 5 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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