Benchmark: Javascript: Array concat vs spread operator vs push speed test

Tests:

Array.prototype.concat
var newValue = { foo: 'baz', bar: 'biz' }; var existingArray = []; var i = 0; while(i++ < 10) { existingArray.concat([newValue]); };
spread operator
var newValue = { foo: 'baz', bar: 'biz' }; var existingArray = []; var i = 0; while(i++ < 10) { existingArray = [...existingArray, newValue]; };
Push
var newValue = { foo: 'baz', bar: 'biz' }; var existingArray = []; var i = 0; while(i++ < 10) { existingArray.push(newValue); };

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Push

35.6M/s

Array.prototype.concat

5.3M/s

spread operator

3.2M/s

Fastest: Push (11.2x faster)

View exact numbers

✓ Push: 35,591,768 ops/sec
• Array.prototype.concat: 5,316,764 ops/sec
• spread operator: 3,184,983 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 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 133 on Android

View result in a separate tab

Push

20.3M/s

Array.prototype.concat

4.2M/s

spread operator

2.6M/s

View exact numbers

Test name	Executions per second
✓ Push	20,275,772 Ops/sec
Array.prototype.concat	4,152,718 Ops/sec
spread operator	2,598,968 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 benchmark and its test cases.

**Benchmark Overview**

The benchmark compares the performance of three different ways to add elements to an array: using the `concat()` method, the spread operator (`...`), and the `push()` method.

**Test Cases**

Each test case represents a different way to achieve the same goal:

1. **Array.prototype.concat**: This test case uses the `concat()` method to append new elements to the existing array.
2. **Spread Operator**: This test case uses the spread operator (`...`) to create a new array by spreading the existing array and appending new elements.
3. **Push**: This test case uses the `push()` method to add one or more elements to the end of an array.

**Pros and Cons**

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

* **Array.prototype.concat**:
	+ Pros: Simple, widely supported, and well-documented.
	+ Cons: Can be slow for large arrays due to the overhead of creating a new array object.
* **Spread Operator (`...`)**:
	+ Pros: Efficient, concise, and modern. Creates a new array object without the overhead of concatenation.
	+ Cons: Requires ES6 support, may not work in older browsers or environments.
* **Push**:
	+ Pros: Fast, efficient, and widely supported.
	+ Cons: Can be less intuitive than `concat()` for some developers.

**Library Usage**

None of the test cases use a specific library. However, it's worth noting that the benchmark assumes that the arrays are created using JavaScript's built-in array data structure (e.g., `[1, 2, 3]`).

**Special JS Features or Syntax**

The spread operator (`...`) is a new syntax introduced in ES6, which allows for more concise array creation and manipulation. The test cases use this feature to create a new array by spreading the existing array.

**Alternatives**

If you're looking for alternative ways to add elements to an array, consider the following options:

* Using `Array.prototype.push()` with multiple arguments (e.g., `array.push(1, 2, 3)`).
* Using `Array.prototype.unshift()` to add elements to the beginning of the array.
* Using a library like Lodash or Underscore.js, which provide additional utility functions for working with arrays.

In summary, the benchmark provides a simple and informative way to compare the performance of different ways to add elements to an array in JavaScript. The spread operator is shown to be efficient and concise, but may require ES6 support.

Javascript: Array concat vs spread operator vs push speed test (version: 0) Benchmark.js

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

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

Created: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Javascript: Array concat vs spread operator vs push speed test (version: 0) Benchmark.js

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

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

Created: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Historical Performance Data aggregated from 9 community runs

Desktop Results:

Chrome 9 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`