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

Tests:

Array.prototype.concat
var params = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ]; var other = [ { 'one': 1 }, { 'two': 2 } ].concat(params);
spread operator (spread at head)
var params = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ]; var other = [ ...params, { 'one': 1 }, { 'two': 2 } ];
spread operator (spread at tail)
var params = [ { 'ten': 10 }, { 'six': 6 }, {'nested': { 'five': 5 }} ]; var other = [ { 'one': 1 }, { 'two': 2 }, ...params ];

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 (spread at tail)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 15_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/102.0.5005.87 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 102 on iOS 15.5

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	17643870.0 Ops/sec
spread operator (spread at head)	23375752.0 Ops/sec
spread operator (spread at tail)	23330750.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, including the provided benchmark: "Array.prototype.concat vs spread operator - with Arrays of Objects" (Updated Oct 2020).

**Tested Options**

The benchmark compares three different approaches for concatenating two arrays in JavaScript:

1. **`Array.prototype.concat()`**: The traditional method using the `concat()` method.
2. **Spread Operator at Head (`...params`)**: Using the spread operator to add elements to the beginning of the array.
3. **Spread Operator at Tail (`...params`)**: Using the spread operator to add elements to the end of the array.

**Pros and Cons of Each Approach**

1. **`Array.prototype.concat()`**:
	* Pros:
		+ Most widely supported and well-documented method.
		+ Can be used with arrays of any type, not just objects.
	* Cons:
		+ Less efficient than spread operators in modern browsers.
2. **Spread Operator at Head (`...params`)**:
	* Pros:
		+ Can be faster than `concat()` when the spread operator is implemented efficiently by the browser engine.
	* Cons:
		+ Less widely supported and less well-documented than `concat()`.
3. **Spread Operator at Tail (`...params`)**:
	* Pros:
		+ Also can be faster than `concat()` under similar circumstances as spread at head.
	* Cons:
		+ Similar to spread at head, less widely supported and less well-documented.

**Libraries Used**

None of the benchmark definitions explicitly use any external libraries. However, it's worth noting that modern browsers have built-in support for the spread operator, which was introduced in ECMAScript 2018 (ES2018).

**Special JavaScript Features/Syntax**

* The spread operator (`...`), introduced in ECMAScript 2015 (ES2015), allows elements to be added to an array or object without using `concat()` or other methods.
* Modern browsers, including Chrome Mobile iOS 102, have implemented the spread operator efficiently, making it a viable alternative to `concat()`.

**Other Alternatives**

In addition to the three approaches tested in this benchmark:

1. **`Array.prototype.push()`**: Adding elements to the end of an array using `push()`.
2. **`Array.prototype.unshift()`**: Adding elements to the beginning of an array using `unshift()`.
3. **Other library functions**, such as Lodash's `concat()` or Immutable.js's `concat()`, may also be used for concatenating arrays.

Keep in mind that these alternatives are not part of the standard JavaScript API and may have different performance characteristics compared to the tested options.

Related benchmarks:

Array.prototype.concat vs spread operator - with Arrays of Objects (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 (spread at tail)

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator (spread at head)

spread operator (spread at 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):