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

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 Apply
var other = [ 1, 2, 3 ] for (var len = subarrs.length, i = 0; i < len; i++){ other.push.apply(other, subarrs[i]); } return other;
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]); } } 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 Apply
Push Loop

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark compares four different approaches to concatenate arrays:

1. `Array.prototype.concat()`
2. Spread operator (`...`)
3. `push()` with spread syntax (`...` and `apply()`)
4. Manual loop-based concatenation

**Options Compared**

Each test case uses a similar setup: an initial array `[ 1, 2, 3 ]`, and then iterates over a subarray of increasing length using a loop. The differences lie in the approach used to concatenate the arrays:

* `Array.prototype.concat()`: Uses the traditional `concat()` method.
* Spread operator (`...`): Uses the new ES6 spread operator to concatenate arrays.
* `push()` with spread syntax (`...` and `apply()`): Uses `push()` with both spread syntax and `apply()` to concatenate arrays.
* Manual loop-based concatenation: Manually iterates over each subarray and pushes elements onto the main array.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **Array.prototype.concat()**:
	* Pros: Simple, widely supported, and well-documented.
	* Cons: Can be slow for large arrays due to the overhead of creating new arrays.
2. **Spread operator (`...`)**:
	* Pros: Fast, modern, and concise.
	* Cons: May not work as expected with older browsers or versions of JavaScript.
3. **`push()` with spread syntax (`...`) and `apply()`**:
	* Pros: Combines the best of both worlds: speed and conciseness.
	* Cons: Can be slower than pure spread operator usage due to the `apply()` method overhead.
4. **Manual loop-based concatenation**:
	* Pros: Fast, as it avoids creating new arrays.
	* Cons: Error-prone, verbose, and may not be as modern or readable.

**Library Usage**

There is no explicit library used in this benchmark, but some older browsers might require additional libraries for compatibility.

**Special JS Features/Syntax**

The spread operator (`...`) is a relatively recent addition to JavaScript (introduced in ECMAScript 2015). It allows for more concise and expressive array concatenation.

**Alternatives**

Other alternatives for array concatenation include:

* `Array.prototype.push()` alone: This method modifies the original array and can be slower than other approaches.
* `Array.prototype.splice()` with negative indices: This method also modifies the original array and is not typically used for concatenation.
* Native array methods like `at()` or `fill()`: These methods are not suitable for simple concatenation.

Keep in mind that this benchmark focuses on performance, so the results might not accurately reflect real-world usage scenarios. Additionally, modern JavaScript engines often optimize these operations, making the differences smaller than expected.

Latest run results:

Run details: (Test run date: yesterday)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	3088275.0 Ops/sec
spread operator	4219754.0 Ops/sec
Push Spread	4590077.0 Ops/sec
Push Apply	4536374.5 Ops/sec
Push Loop	4985618.5 Ops/sec

Related benchmarks:

Array concat vs spread vs push spread, loop, apply (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 Apply vs Push Loop

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push Spread

Push Apply

Push Loop

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