Benchmark: Array.concat vs Array.prototype.concat.apply

Array.concat vs Array.prototype.concat.apply (version: 0) Benchmark.js

Compare direct concat call with apply for multiple arrays concatenation

Comparing performance of: `Array.concat vs Array.prototype.concat.apply vs Array.prototype.concat.apply short form vs Array.prototype.concat.apply short form without new empty array instance in apply vs Array.prototype.concat.apply short form without new empty array at all`

Created: 6 years ago by: Guest

Go to the latest result

Script Preparation code:

var array1 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array2 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array3 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array4 = Array(400).fill().map(() => Math.round(Math.random() * 40));
var array5 = Array(400).fill().map(() => Math.round(Math.random() * 40));

Tests:

Array.concat
var others = array1.concat(array2, array3, array4, array5);
Array.prototype.concat.apply
var others = Array.prototype.concat.apply([], [array1, array2, array3, array4, array5]);
Array.prototype.concat.apply short form
var others = [].concat.apply([], [array1, array2, array3, array4, array5]);
Array.prototype.concat.apply short form without new empty array instance in apply
var others = [].concat.apply(array1, [array2, array3, array4, array5]);
Array.prototype.concat.apply short form without new empty array at all
var others = array1.concat.apply(array1, [array2, array3, array4, array5]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.concat
Array.prototype.concat.apply
Array.prototype.concat.apply short form
Array.prototype.concat.apply short form without new empty array instance in apply
Array.prototype.concat.apply short form without new empty array at all

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; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Mac OS X 10.15

View result in a separate tab

Array.prototype.concat.apply

722K/s

Array.prototype.concat.apply short form

717K/s

Array.prototype.concat.apply short form without new empty array at all

696K/s

Array.prototype.concat.apply short form without new empty array instance in apply

692K/s

Array.concat

634K/s

View exact numbers

Test name	Executions per second
✓ Array.prototype.concat.apply	722,030 Ops/sec
Array.prototype.concat.apply short form	716,587 Ops/sec
Array.prototype.concat.apply short form without new empty array at all	695,576 Ops/sec
Array.prototype.concat.apply short form without new empty array instance in apply	692,073 Ops/sec
Array.concat	633,760 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 Definition:**
The benchmark tests the performance of different approaches for concatenating multiple arrays in JavaScript. Specifically, it compares:

1. `Array.concat()` with multiple arguments
2. `Array.prototype.concat.apply()` with an empty array as the first argument
3. `Array.prototype.concat.apply()` without creating a new empty array instance
4. `Array.prototype.concat.apply()` without any arguments (i.e., just applying the arrays directly)

**Options Compared:**

1. **Direct concat call**: `array1.concat(array2, array3, array4, array5)`
	* Pros: easy to read and write, well-documented behavior.
	* Cons: creates multiple temporary arrays, which can lead to performance issues for large datasets.
2. **`Array.prototype.concat.apply()` with an empty array**: `Array.prototype.concat.apply([], [array1, array2, array3, array4, array5])`
	* Pros: avoids creating intermediate arrays, reduces memory allocation and deallocation overhead.
	* Cons: less intuitive than the direct concat call, requires understanding of `apply` method.
3. **`Array.prototype.concat.apply()` without new empty array instance**: `Array.prototype.concat.apply(array1, [array2, array3, array4, array5])`
	* Pros: avoids creating an intermediate array, reduces memory allocation and deallocation overhead.
	* Cons: may lead to issues with array indexing and bounds checking if not used carefully.
4. **`Array.prototype.concat.apply()` without arguments**: `Array.prototype.concat.apply(array1, [array2, array3, array4, array5])`
	* Pros: concise and easy to read, avoids creating intermediate arrays.
	* Cons: may lead to issues with array indexing and bounds checking if not used carefully.

**Library Used:**
None of the test cases use any external libraries.

**Special JS Feature/Syntax:**
There are no special JavaScript features or syntaxes being tested in this benchmark.

**Other Alternatives:**
For concatenating arrays, other alternatives could be using `Array.prototype.reduce()` or a library like Lodash's `concat` function. However, these approaches may not be suitable for all use cases and may have different performance characteristics compared to the methods tested on MeasureThat.net.

It's worth noting that the benchmark is focused on understanding the trade-offs between different array concatenation approaches in JavaScript. The results can help developers make informed decisions about which approach to use depending on their specific requirements and performance constraints.