Benchmark: Array.prototype.concat vs spread operator vs push with spread

Script Preparation code:

var array1 = [];
var array2 = [];
var limit = 100000;

for(i = 0; i < limit; i++) {
  array1.push(i);
  array2.push(limit - i);
}

Tests:

Array.prototype.concat
array1.concat(array2);
spread operator
[...array1, ...array2]
Spread operator with push
var array3 = []; array3.push(...array1); array3.push(...array2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Spread operator with push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Array.prototype.concat

16K/s

spread operator

3K/s

Spread operator with push

789/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat	15,766 Ops/sec
spread operator	2,593 Ops/sec
Spread operator with push	789 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark definition and test cases to understand what's being tested.

**Benchmark Definition**

The benchmark is designed to compare three approaches for concatenating arrays: `Array.prototype.concat()`, the spread operator (`[...array1, ...array2]`), and a variation of the spread operator using the `push()` method (`var array3 = []; array3.push(...array1); array3.push(...array2);`).

**Test Cases**

There are three test cases:

1. **Array.prototype.concat()**: This test case uses the traditional `concat()` method to concatenate two arrays.
2. **Spread Operator**: This test case uses the spread operator (`[...array1, ...array2]`) to concatenate two arrays.
3. **Spread Operator with Push**: This test case is similar to the previous one but uses the `push()` method to add elements to an array instead of concatenating it.

**Library**

The benchmark uses a library called "console" which is not explicitly mentioned in the provided JSON, however console has been used throughout the script.

**Special JS Feature/Syntax**

None of the tests use any special JavaScript features or syntax beyond what's necessary for the comparison.

Now, let's discuss the pros and cons of each approach:

1. **Array.prototype.concat()**:
	* Pros: Widely supported, simple to implement.
	* Cons: Creates a new array object, which can lead to memory overhead.
2. **Spread Operator ([...array1, ...array2])**:
	* Pros: More efficient than `concat()` since it only creates a new array object with references to the original elements.
	* Cons: Requires modern browsers (Chrome 105 is a good starting point) and JavaScript engines that support it.
3. **Spread Operator with Push (var array3 = []; array3.push(...array1); array3.push(...array2))**:
	* Pros: Similar efficiency benefits as the spread operator, but also avoids creating an intermediate array object.
	* Cons: Still requires modern browsers and JavaScript engines that support it.

The benchmark result shows that the spread operator with `push()` is the fastest execution, followed by the spread operator, and then `concat()`. This suggests that modern JavaScript engines are optimized for these new syntaxes.

**Other Alternatives**

If you wanted to test alternative approaches, you could consider:

* Using `Array.prototype.push.apply()` instead of `push()`.
* Comparing the performance of `concat()` with other array methods like `slice()` or `set()`.
* Testing the performance of different data structures, such as arrays vs. objects vs. linked lists.

Keep in mind that these alternatives might not be as efficient or relevant to modern JavaScript applications, but they could provide interesting insights for certain use cases.

Array.prototype.concat vs spread operator vs push with spread (version: 0)

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

Comparing performance of: `Array.prototype.concat vs spread operator vs Spread operator with push`

Created: 3 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Spread operator with push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.prototype.concat vs spread operator vs push with spread (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Spread operator with push

Created: 3 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Spread operator with push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array.prototype.concat vs spread operator vs Spread operator with push`