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

Script Preparation code:

var subarrsBase = [
 [ "hello", true, 7 ],
 [ "yes", "no", "maybe", false, 27 ],
 [ 16, "I", "wonder", "what", "will", "be", "fastest"]
];

var subarrs = subarrsBase.map(arr => {
  let newArr = [...arr];
  for(let i = 0; i < 10; i++) {
    newArr = [...newArr, ...newArr];
  }
  return newArr;
})

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

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	5577.1 Ops/sec
spread operator	3334.4 Ops/sec
Push Spread	18581.5 Ops/sec
Push Apply	19248.6 Ops/sec
Push Loop	12875.4 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 benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing four different ways to concatenate arrays in JavaScript:

1. `Array.prototype.concat()`
2. Spread operator (`...`)
3. Push spread (`push(...)` on an array)
4. Push apply (`apply()` method with multiple arguments)

The goal is to determine which approach is the fastest.

**Options Compared**

Each option has its pros and cons:

* **`Array.prototype.concat()`**: This is a built-in method that concatenates arrays. It's a simple and straightforward way to achieve the result, but it may incur some overhead due to the creation of a new array object.
* **Spread Operator (`...`)**: The spread operator is a new feature introduced in ES6 that allows you to create a new array by spreading an existing array or other iterable. It's generally faster and more memory-efficient than using `concat()`, but it may not work as expected if the input array is large.
* **Push Spread (`push(...)` on an array)**: This approach uses the `push()` method to add elements to an array, followed by the spread operator to create a new array. It's similar to the previous option, but with less overhead due to the use of `push()`.
* **Push Apply (`apply()` method with multiple arguments)**: This approach uses the `apply()` method to call a function (in this case, `push()`) on an object (the array), passing in multiple arguments. It's an older way to achieve the result, but it can be less efficient due to the use of `apply()`.

**Library and Purpose**

There are no specific libraries being used in this benchmark. However, some browsers may have additional features or optimizations that could affect the results.

**Special JS Features/Syntax**

The benchmark uses several features:

* ES6 spread operator (`...`): This is a new feature introduced in ES6 that allows you to create a new array by spreading an existing array or other iterable.
* Push spread (`push(...)` on an array): This is a newer syntax for the push method, which was introduced in ECMAScript 2015 (ES6).

**Other Alternatives**

Some alternative approaches could be:

* Using `Array.prototype.push()` and creating a new array using `Object.assign()`
* Using a library like Lodash or Ramda to handle array concatenation
* Using a different programming language, such as C++ or Java, for the benchmark

However, these alternatives are not being tested in this specific benchmark.

In summary, the benchmark is comparing four different ways to concatenate arrays in JavaScript: `Array.prototype.concat()`, spread operator (`...`), push spread (`push(...)` on an array), and push apply (`apply()` method with multiple arguments). The goal is to determine which approach is the fastest.

Related benchmarks:

Array concat vs spread vs push spread, loop, apply long arrays (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: one year 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):