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

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 ] subarrs.forEach((subArr) => { other = other.concat(subArr); }); return other;
spread operator
var other = [ 1, 2, 3 ]; subarrs.forEach((subArr) => { other = [ ...other, ...subArr ]; }); return other;
Push Spread
var other = [ 1, 2, 3 ] subarrs.forEach((subArr) => { other.push(...subArr); }); return other;
Push Apply
var other = [ 1, 2, 3 ] subarrs.forEach((subArr) => { other.push.apply(other, subArr); }); return other;
Push Loop
var other = [ 1, 2, 3 ] subarrs.forEach((subArr) => { subArr.forEach((item) => { other.push(item); }); }); 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: 3 years ago)

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

Browser/OS: Chrome 96 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	1721013.8 Ops/sec
spread operator	3223286.0 Ops/sec
Push Spread	4650943.0 Ops/sec
Push Apply	4471642.0 Ops/sec
Push Loop	6208555.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

The provided benchmark measures the performance of different approaches for concatenating arrays in JavaScript. The test cases compare the use of:

1. `concat()`: The traditional method of concatenating arrays using the `concat()` function.
2. Spread operator (`...`): A new feature introduced in ES6 that allows for more concise array manipulation.
3. `push` with spread: Using the `push()` method to add elements to an array, followed by spreading an array into the `push()` call.
4. `apply()` with `forEach`: Using the `forEach()` function to iterate over an array and apply the `push()` method to each element.

Now, let's discuss the pros and cons of each approach:

**1. concat()**

Pros:

* Widely supported across different browsers and versions.
* Simple and straightforward syntax.

Cons:

* Can be slower than other methods due to the overhead of creating a new array.

**2. Spread operator (`...`)**

Pros:

* More concise and expressive syntax compared to `concat()`.
* Can improve performance by reducing the number of operations needed to create a new array.

Cons:

* Requires modern browsers that support the ES6 spread operator.
* May have slightly higher overhead due to the creation of intermediate arrays.

**3. push` with spread**

Pros:

* Combines the benefits of `push()` and the spread operator, allowing for more efficient concatenation.

Cons:

* Requires modern browsers that support the ES6 spread operator.
* Can still incur some overhead due to the use of `push()`.

**4. apply()` with `forEach`

Pros:

* Allows for a flexible and customizable approach to array iteration.

Cons:

* Can be slower than other methods due to the overhead of applying the `apply()` function.
* May require more code and iterations, leading to performance degradation.

Other considerations:

* In modern JavaScript, the spread operator (`...`) is generally considered the most efficient way to concatenate arrays, followed by using `push` with spread. The `concat()` method is still widely supported but may be slower due to its overhead.
* Browsers like Chrome 96 have shown relatively consistent performance across all test cases, suggesting that the differences are largely browser-agnostic.
* It's essential to consider not only the execution speed of each approach but also factors like code readability and maintainability when choosing a method for array concatenation.

Alternatives:

* If you need to support older browsers or environments without modern JavaScript features, you may want to use a different approach, such as using `Array.prototype.concat()` or iterating over the arrays manually.
* For more complex array manipulation tasks, consider using libraries like Lodash or Ramda, which provide optimized functions for common operations.

In summary, the spread operator (`...`) is currently the most efficient way to concatenate arrays in JavaScript. However, it's essential to consider factors like browser support, code readability, and maintainability when choosing a method for array concatenation.

Related benchmarks:

Array concat vs spread vs push spread, loop, apply using forEach (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: 3 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 6 months ago):