Benchmark: Array concat vs spread vs push spread, loop, apply, assign

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]); }
spread operator
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other = [ ...other, ...subarrs[i] ] }
Push Spread
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push(...subarrs[i]); }
Push Apply
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push.apply(other, subarrs[i]); }
Push Loop
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]); } }
Assign length loop
var other = [1, 2, 3]; for (var i = 0, j, m, a, n = subarrs.length; i < n; ++i) for (j = 0, a = subarrs[i], m = a.length; j < m; ++j) other[other.length] = a[j];
minified assign loop
for(var r,s,a,e=[1,2,3],g=0,h=subarrs.length;g<h;++g)for(r=0,s=(a=subarrs[g]).length;r<s;++r)e[e.length]=a[r];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push Spread
Push Apply
Push Loop
Assign length loop
minified assign loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4461665.5 Ops/sec
spread operator	10300961.0 Ops/sec
Push Spread	16740816.0 Ops/sec
Push Apply	16423918.0 Ops/sec
Push Loop	24262436.0 Ops/sec
Assign length loop	22736912.0 Ops/sec
minified assign loop	22748166.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to compare the performance of different ways to concatenate an array in JavaScript. The test cases are:

1. `Array.prototype.concat`
2. Spread operator (`[...arr, ...other]`)
3. Push spread (`arr.push(...other)`)
4. Push apply (`arr.push.apply(arr, other)`)
5. Loop with push (`for (var i = 0; i < arr.length; i++) { arr[i] = other[i]; }`)
6. Minified assign loop (`for (var r = 0; r < arr.length; r++) { arr[r] = other[r]; }`)

**What's being tested**

Each test case is trying to determine which method is the fastest in terms of executions per second.

**Options compared**

The benchmark is comparing six different approaches:

1. Using the `concat()` method on the `Array.prototype`.
2. Using the spread operator (`[...arr, ...other]`).
3. Using the push spread syntax (`arr.push(...other)`).
4. Using the `push.apply()` method.
5. A loop with a push statement (`for (var i = 0; i < arr.length; i++) { arr[i] = other[i]; }`)
6. A minified assign loop (`for (var r = 0; r < arr.length; r++) { arr[r] = other[r]; }`)

**Pros and cons of each approach**

Here's a brief summary:

1. `Array.prototype.concat`: This is the traditional way to concatenate arrays in JavaScript. It creates a new array and copies the elements from both arrays into it.
	* Pros: Easy to use, well-supported by most browsers.
	* Cons: Can be slow for large arrays due to the overhead of creating a new array.
2. Spread operator (`[...arr, ...other]`): This is a relatively new feature in JavaScript that allows you to spread an array into another array.
	* Pros: Fast, efficient, and concise.
	* Cons: Not supported by older browsers, may require explicit checks for compatibility.
3. Push spread (`arr.push(...other)`): This is similar to the spread operator but uses the `push()` method instead of creating a new array.
	* Pros: Fast, efficient, and concise.
	* Cons: May not be as clear or intuitive to some developers.
4. Push apply (`arr.push.apply(arr, other)`) : Similar to the push spread syntax but uses a different method call.
	* Pros: Fast, efficient, and concise.
	* Cons: Less clear than spread operator for most developers.
5. Loop with push (`for (var i = 0; i < arr.length; i++) { arr[i] = other[i]; }`): This is an older approach that uses a loop to assign elements from one array to another.
	* Pros: Easy to understand, well-supported by most browsers.
	* Cons: Can be slower than the other approaches due to the overhead of the loop.
6. Minified assign loop (`for (var r = 0; r < arr.length; r++) { arr[r] = other[r]; }`): This is a compact version of the loop with push approach.
	* Pros: Fast, efficient, and concise.
	* Cons: Less clear than spread operator or push spread for most developers.

**Results**

The benchmark results show that the fastest approaches are:

1. Spread operator (`[...arr, ...other]`)
2. Push spread (`arr.push(...other)`)
3. Push apply (`arr.push.apply(arr, other)`)
4. Minified assign loop (`for (var r = 0; r < arr.length; r++) { arr[r] = other[r]; }`)

The slower approaches are:

1. Loop with push (`for (var i = 0; i < arr.length; i++) { arr[i] = other[i]; }`)
2. `Array.prototype.concat`

Keep in mind that the results may vary depending on the specific use case, array size, and browser version.

**Conclusion**

The benchmark highlights the importance of choosing the right approach for concatenating arrays in JavaScript. The spread operator and push spread syntax are generally faster and more efficient than the other approaches, while also being more concise and easier to read.

Related benchmarks:

Array concat vs spread vs push spread, loop, apply, assign (version: 4)

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 Apply vs Push Loop vs Assign length loop vs minified assign loop

Created: 4 years ago by: Registered User

Jump to the latest result

Array.prototype.concat

spread operator

Push Spread

Push Apply

Push Loop

Assign length loop

minified assign loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):