Benchmark: Array.prototype.concat vs spread operator (Updated Oct 2020)

Tests:

Array.prototype.concat
var params = [ "hello", true, { 'five': 5 } ]; var other = [ { 'one': 1 }, { 'two': 2 } ].concat(params);
spread operator (spread at head)
var params = [ "hello", true, { 'five': 5 } ] var other = [ ...params, { 'one': 1 }, { 'two': 2 } ]
spread operator (spread at tail)
var params = [ "hello", true, { '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: 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	9369497.0 Ops/sec
spread operator (spread at head)	19395658.0 Ops/sec
spread operator (spread at tail)	19075528.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 the provided JSON data and explain what is being tested.

**Benchmark Overview**

The benchmark compares the performance of two approaches for concatenating arrays: `Array.prototype.concat` (a traditional method) and the spread operator (`...`). The test aims to determine which approach is faster, taking into account the order in which elements are appended to the array.

**Options Compared**

There are three options being compared:

1. **Array.prototype.concat**: A traditional method for concatenating arrays.
2. **Spread Operator (spread at head)**: Using the spread operator (`...`) with the first element at the head of the new array.
3. **Spread Operator (spread at tail)**: Using the spread operator (`...`) with the elements at the end of the original array.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Array.prototype.concat**:
	* Pros: Simple, widely supported, and has been part of the JavaScript standard library since ES5.
	* Cons: May be slower than spread operators due to the overhead of function calls and array resizing.
2. **Spread Operator (spread at head)**:
	* Pros: Allows for more concise code and potentially faster execution when elements are appended at the beginning of the new array.
	* Cons: Less widely supported in older browsers, and some developers might find it less intuitive.
3. **Spread Operator (spread at tail)**:
	* Pros: Similar benefits to spread at head, but with the added benefit of being able to use `concat()` or other array methods on the resulting array.
	* Cons: May be slower than spread at head due to the overhead of iterating over elements in reverse order.

**Library and Syntax**

In this benchmark, the following library is used:

1. **None**: This benchmark does not rely on any external libraries; it only uses built-in JavaScript features.

No special JavaScript features or syntax are being tested in this benchmark.

**Other Alternatives**

If you're interested in exploring alternative approaches to concatenating arrays, here are a few options:

1. **Array.prototype.push() and spread operator**: Instead of using `concat()` or the spread operator, you can use `push()` to add elements to an array and then pass the resulting array as an argument to another function.
2. **Array.prototype.slice() and spread operator**: You can create a new array by using `slice()` on the original array and passing in a range of indices. Then, you can use the spread operator to concatenate the resulting slice with other arrays.

These alternatives might be useful in specific situations or for educational purposes, but they are not typically used in production code due to their performance overhead.

I hope this explanation helps!

Related benchmarks:

Array.prototype.concat vs spread operator (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):