Benchmark: Array concat vs spread operator vs push vs push individual

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
push individual
var params = [ "hello", true, 7 ]; var other = [1, 2]; for (param of params) { other.push(param); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
push individual

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested.

**Benchmark Overview**

The benchmark is comparing four different ways to concatenate or add elements to an array in JavaScript:

1. `Array.prototype.concat()`
2. Spread operator (`...`)
3. `Array.prototype.push()` with spread syntax (`...`)

The goal is to determine which approach is the fastest, most efficient, and most suitable for various use cases.

**Library/Function Used**

In this benchmark, no specific library or function is used beyond the standard JavaScript array methods mentioned above (concat(), push(), and spread operator).

**Special JS Feature/Syntax**

The spread operator (`...`) is a relatively recent addition to JavaScript, introduced in ES6. It allows for more concise way of expanding arrays or objects by spreading their elements into another context.

**Benchmark Test Cases**

Here's a brief explanation of each test case:

1. **`Array.prototype.concat()`**: This method concatenates two or more arrays and returns a new array.
2. **Spread operator (`...`)**: This allows you to expand an array or object by spreading its elements into another context, such as an array.
3. **`Array.prototype.push()` with spread syntax (`...`)**: This method adds one or more elements to the end of an array and returns the updated array length.
4. **Push individual**: This test case manually loops through each element in the `params` array and pushes it onto the `other` array.

**Pros and Cons**

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

1. **`Array.prototype.concat()`**:
	* Pros: Well-established, widely supported, and easy to understand.
	* Cons: Creates a new array, which can be memory-intensive for large datasets.
2. **Spread operator (`...`)**:
	* Pros: More concise, efficient, and flexible than traditional concatenation methods.
	* Cons: Only works with arrays, not objects; requires modern JavaScript version support (ES6+).
3. **`Array.prototype.push()` with spread syntax (`...`)**:
	* Pros: Efficient and memory-friendly compared to `concat()`.
	* Cons: Requires two separate operations (push and spread), which can be slower than a single operation.
4. **Push individual**:
	* Pros: Control over element order, no memory allocation for new array.
	* Cons: Less concise, less efficient than using push with spread syntax.

**Benchmark Results**

The latest benchmark results show the performance of each approach:

1. Spread operator (`...`): 9583668 executions/second
2. `Array.prototype.concat()`: 4520553 executions/second
3. Push individual: 603319 executions/second
4. `Array.prototype.push()` with spread syntax (`...`): Not shown in the results, but likely to be faster than push individual.

Overall, the spread operator and `Array.prototype.push()` with spread syntax are currently the fastest approaches for array concatenation or element addition.

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15

Browser/OS: Safari 13 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	9583668.0 Ops/sec
spread operator	38023580.0 Ops/sec
Push	4520553.5 Ops/sec
push individual	603319.4 Ops/sec

Related benchmarks:

Array concat vs spread operator vs push vs push individual (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 vs push individual

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

push individual

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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