Benchmark: Array concat vs spread vs push spread, loop, for of loop

Script Preparation code:

var subarrs = [
 [ "hello", true, 7 ],
 [ "yes", "no", "maybe", false, 27 ],
 [ 16, "I", "wonder", "what", "will", "be", "fastest"]
];

Tests:

Array.prototype.concat
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = other.concat(subarrs[i]); } return other;
spread operator
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = [ ...other, ...subarrs[i] ] } return other;
Push Spread
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push(...subarrs[i]); } return other;
Push Loop for of
let other = [ 1, 2, 3 ] for (const sub of subarrs){ for (const item of sub){ other.push(item) } } return other;
Push Loop for
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ for (var jarr = subarrs[i], jen = jarr.length, j = 0; j < jen; j++){ other.push(jarr[j]); } } return other;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push Spread
Push Loop for of
Push Loop for

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/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3191705.5 Ops/sec
spread operator	4681709.5 Ops/sec
Push Spread	4855430.0 Ops/sec
Push Loop for of	13863733.0 Ops/sec
Push Loop for	6137513.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 benchmark and explain what's being tested, compared, and their pros/cons.

**Benchmark Purpose**

The test case aims to compare the performance of three different methods for concatenating arrays in JavaScript:

1. Using the `concat()` method
2. Using the spread operator (`...`)
3. Using the `push()` method with the spread operator

The benchmark is designed to measure the execution time and number of executions per second for each method.

**Comparison**

Here's a brief overview of each approach:

* **Array.prototype.concat**: This method creates a new array by concatenating two or more arrays. It's a traditional way of merging arrays in JavaScript.
	+ Pros: Simple, widely supported, and relatively fast.
	+ Cons: Creates a new array object, which can lead to memory allocation overhead.
* **Spread Operator (`...`)**: This method uses the spread operator to merge arrays by spreading their elements into a new array.
	+ Pros: Efficient, concise, and easy to read. It creates a new array without modifying the original one.
	+ Cons: Requires modern JavaScript features (ES6+) and might not be supported in older browsers or environments.
* **Push Spread**: This method uses the `push()` method with the spread operator (`...`) to append elements to an existing array.
	+ Pros: Efficient, concise, and easy to read. It's a good alternative when you need to modify an existing array.
	+ Cons: Requires modern JavaScript features (ES6+) and might not be supported in older browsers or environments.

**Other Considerations**

* **Looping through subarrays**: All three methods involve looping through the subarrays in `subarrs`. The loop logic is similar, but it's worth noting that some versions of these loops have minor differences.
* **Browser support**: Since the benchmark uses modern JavaScript features (ES6+), the results might not be applicable to older browsers or environments.

**Alternative Methods**

If you're interested in exploring alternative methods, here are a few:

* **Array.prototype.push() and unshift()**: These methods can be used instead of `concat()` by pushing or unshifting elements onto an array.
* **Array.prototype.reduce() and spread operator**: This method combines two arrays using the `reduce()` function and the spread operator (`...`).
* **For...of loop with push()**: Instead of using a traditional for loop, you can use a for...of loop to iterate through subarrays and append elements to an existing array.

Keep in mind that these alternative methods might have different performance characteristics or require different handling for edge cases.

Related benchmarks:

Array concat vs spread vs push spread, loop, for of loop (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 Spread vs Push Loop for of vs Push Loop for

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push Spread

Push Loop for of

Push Loop for

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