Benchmark: Array concat vs spread operator vs push new

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var params2 = [ 1, 2 ] params2.concat(params);
spread operator
var params = [ "hello", true, 7 ] var params2 = [ 1, 2 ] params2 = [ ...params2, ...params ]
Push
var params = [ "hello", true, 7 ]; var params2 = [ 1, 2 ] params2.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: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.56 Safari/537.36 Edg/83.0.478.33

Browser/OS: Chrome 83 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3619795.8 Ops/sec
spread operator	11581827.0 Ops/sec
Push	12552856.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition and Purpose**

The benchmark, "Array concat vs spread operator vs push new", compares three ways to concatenate arrays in JavaScript:

1. `concat()`
2. The ES6 spread operator (`...`)
3. `push(...)` with multiple arguments

The purpose of this benchmark is to determine which method is the most efficient.

**Options Compared**

We have three options being compared:

1. **`concat()`**: A traditional method for concatenating arrays in JavaScript.
2. **Spread Operator (`...`)**: A new ES6 feature that allows you to spread an array into multiple arguments.
3. **`push(...)` with multiple arguments**: A way to push elements onto an array using the spread operator.

**Pros and Cons of Each Approach**

Here's a brief overview of each approach:

1. **`concat()`**:
	* Pros: widely supported, easy to use.
	* Cons: creates a new array object, can be slower for large arrays.
2. **Spread Operator (`...`)**:
	* Pros: efficient, modern way of concatenating arrays.
	* Cons: requires ES6 support, may have unexpected behavior if not used carefully.
3. **`push(...)` with multiple arguments**:
	* Pros: efficient, can be faster than `concat()` for large arrays.
	* Cons: requires multiple arguments (the spread operator), may have unexpected behavior if not used carefully.

**Library Used**

There is no explicit library mentioned in the benchmark definition or test cases. However, it's likely that the benchmark is running in a browser environment, which uses the V8 JavaScript engine.

**Special JS Feature or Syntax**

The ES6 spread operator (`...`) is a special feature introduced in ECMAScript 2015. It allows you to spread an array into multiple arguments, making it more concise and efficient than traditional concatenation methods.

**Benchmark Test Cases**

Each test case consists of:

1. A benchmark definition: the code snippet that performs the concatenation.
2. A `Test Name`: a descriptive name for the test case (e.g., "Array.prototype.concat").

The three test cases are:

1. **`concat()`**: Concatenates two arrays using the `concat()` method.
2. **Spread Operator (`...`)**: Concatenates two arrays using the spread operator.
3. **`push(...)` with multiple arguments**: Pushes elements onto an array using the spread operator.

**Latest Benchmark Results**

The latest benchmark results show the execution speed of each test case in Chrome 83 on a Windows desktop:

1. **`Push` (Spread Operator)**: 125,528,560 executions per second
2. **`spread operator`**: 115,818,270 executions per second
3. **`Array.prototype.concat`**: 36,197,995 executions per second

The results suggest that the `push(...)` with multiple arguments and spread operator methods are faster than the traditional `concat()` method.

**Alternatives**

Other alternatives for concatenating arrays in JavaScript include:

* Using `Array.prototype.push()` and then passing an array of elements: `arr.push(...newArr)`
* Using a library like Lodash or Ramda
* Using a custom implementation, such as using a single loop to concatenate elements

Keep in mind that these alternatives may have different performance characteristics or use cases compared to the methods being benchmarked.

Related benchmarks:

Array concat vs spread operator vs push new (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: 4 years ago by: Registered User

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