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;

Historical Performance Data aggregated from 162 community runs

Desktop Results:

Chrome 121 runs

Push Loop

6.0M/s

Push Spread

4.9M/s

Push Apply

4.8M/s

spread operator

4.6M/s

Array.prototype.concat

3.0M/s

Fastest: Push Loop (2.0x faster)

View exact numbers

✓ Push Loop: 5,997,214 ops/sec
• Push Spread: 4,891,612 ops/sec
• Push Apply: 4,803,800 ops/sec
• spread operator: 4,591,722 ops/sec
• Array.prototype.concat: 3,032,768 ops/sec

Firefox 25 runs

Push Loop

14.2M/s

Push Apply

6.8M/s

Array.prototype.concat

6.7M/s

Push Spread

6.5M/s

spread operator

3.3M/s

Fastest: Push Loop (4.3x faster)

View exact numbers

✓ Push Loop: 14,233,791 ops/sec
• Push Apply: 6,840,387 ops/sec
• Array.prototype.concat: 6,696,434 ops/sec
• Push Spread: 6,531,420 ops/sec
• spread operator: 3,312,764 ops/sec

Other 5 runs

Push Loop

7.0M/s

Push Spread

6.4M/s

Push Apply

6.4M/s

spread operator

5.0M/s

Array.prototype.concat

1.7M/s

Fastest: Push Loop (4.0x faster)

View exact numbers

✓ Push Loop: 7,028,604 ops/sec
• Push Spread: 6,393,014 ops/sec
• Push Apply: 6,361,276 ops/sec
• spread operator: 4,953,740 ops/sec
• Array.prototype.concat: 1,745,334 ops/sec

Mobile Results:

Safari 6 runs

Array.prototype.concat

2.8M/s

spread operator

2.5M/s

Push Loop

2.5M/s

Push Apply

2.0M/s

Push Spread

1.8M/s

Fastest: Array.prototype.concat (1.6x faster)

View exact numbers

✓ Array.prototype.concat: 2,830,497 ops/sec
• spread operator: 2,533,777 ops/sec
• Push Loop: 2,453,180 ops/sec
• Push Apply: 2,025,691 ops/sec
• Push Spread: 1,794,900 ops/sec

Chrome 5 runs

Push Loop

3.0M/s

Push Spread

2.6M/s

Push Apply

2.4M/s

spread operator

1.6M/s

Array.prototype.concat

1.2M/s

Fastest: Push Loop (2.5x faster)

View exact numbers

✓ Push Loop: 3,007,518 ops/sec
• Push Spread: 2,561,331 ops/sec
• Push Apply: 2,410,088 ops/sec
• spread operator: 1,576,678 ops/sec
• Array.prototype.concat: 1,202,235 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Latest run results:

Run details: (Test run date: 6 months ago)

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

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

Push Loop

25.7M/s

Push Spread

16.1M/s

Push Apply

16.0M/s

spread operator

10.7M/s

Array.prototype.concat

5.7M/s

View exact numbers

Test name	Executions per second
✓ Push Loop	25,692,128 Ops/sec
Push Spread	16,123,592 Ops/sec
Push Apply	15,993,000 Ops/sec
spread operator	10,703,835 Ops/sec
Array.prototype.concat	5,736,924 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push Spread

Push Apply

Push Loop

Historical Performance Data aggregated from 162 community runs

Desktop Results:

Chrome 121 runs

Firefox 25 runs

Other 5 runs

Mobile Results:

Safari 6 runs

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push Spread

Push Apply

Push Loop

Historical Performance Data aggregated from 162 community runs

Desktop Results:

Chrome 121 runs

Firefox 25 runs

Other 5 runs

Mobile Results:

Safari 6 runs

Chrome 5 runs

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 Push Spread vs Push Apply vs Push Loop`