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

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 (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

Test name	Executions per second
Array.prototype.concat	4152717.5 Ops/sec
spread operator	2598967.8 Ops/sec
Push	20275772.0 Ops/sec

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

Related benchmarks:

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

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: 5 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 6 months ago):