Benchmark: Array.prototype.concat vs spread operator - merging two Objects Arrays (Updated Oct 2020)

Tests:

Array.prototype.concat
const response = [ { 'hundo': 100 }, { 'nine': 9 }, {'nested': { 'twos': 22 }} ]; const state = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ].concat(response);
spread operator (spread at head)
const response = [ { 'hundo': 100 }, { 'nine': 9 }, {'nested': { 'twos': 22 }} ]; const state = [ ...response, { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ];
spread operator x2 (head and tail)
const prevState = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ]; const newItems = [ { 'hundo': 100 }, { 'nine': 9 }, {'nested': { 'twos': 22 }} ]; const state = [ ...prevState, ...newItems ];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator (spread at head)
spread operator x2 (head and tail)

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Safari 14 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	6621629.0 Ops/sec
spread operator (spread at head)	10978518.0 Ops/sec
spread operator x2 (head and tail)	9088666.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Overview**

The benchmark compares two approaches for merging two object arrays: `Array.prototype.concat` and the new ES6 spread operator (`...`). The test aims to determine which approach is faster.

**Options compared**

There are three test cases:

1. **Array.prototype.concat**: This method takes an array as an argument and returns a new array that contains all elements from both arrays.
2. **Spread operator (spread at head)**: This syntax uses the spread operator (`...`) to create a new array by copying elements from one or more source arrays. In this test case, the spread operator is used with `response` as the first argument and `state` as the second argument.
3. **Spread operator x2 (head and tail)**: This variant of the spread operator uses it twice, once to combine the two input arrays (`prevState` and `newItems`) at the head and once to merge the resulting array with another array (`state`).

**Pros and cons**

1. **Array.prototype.concat**:
	* Pros: Widely supported, easy to understand, and well-documented.
	* Cons: Can be slower due to the overhead of creating a new array.
2. **Spread operator (spread at head)**:
	* Pros: Modern, efficient, and often preferred by developers due to its simplicity and expressiveness.
	* Cons: May not be supported in older browsers or environments that don't have ES6 support.
3. **Spread operator x2 (head and tail)**:
	* Pros: Can take advantage of the fact that arrays are mutable, allowing for more efficient merging operations.
	* Cons: Less intuitive than other approaches, and its usage may require careful consideration to avoid unexpected behavior.

**Library and purpose**

None mentioned in the benchmark definition. However, both `Array.prototype.concat` and the spread operator use native JavaScript functionality.

**Special JS feature or syntax**

The spread operator (`...`) is a modern JavaScript feature introduced in ES6 (ECMAScript 2015). It allows you to create new arrays by copying elements from existing arrays.

**Other alternatives**

Before the spread operator, developers often used `Array.prototype.push` and `Array.prototype.concat`, which also merge arrays. However, these approaches can be less efficient due to the overhead of modifying original arrays.

The benchmark results show that the **spread operator (spread at head)** is currently the fastest approach on this platform, followed by the **spread operator x2 (head and tail)** variant, and then **Array.prototype.concat**.

Related benchmarks:

Array.prototype.concat vs spread operator - merging two Objects Arrays (Updated Oct 2020) (version: 0)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: Array.prototype.concat vs spread operator (spread at head) vs spread operator x2 (head and tail)

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator (spread at head)

spread operator x2 (head and tail)

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