Benchmark: Concat vs ForEach

Script Preparation code:

var selected = [];
var unselected = [];


for (var i = 0; i < 10000; i++) { selected.push(i+'selected') }
for (var j = 0; j < 10000; j++) { unselected.push(i+'unselected') }

Tests:

Concat
var concat = selected.concat(unselected)
ForEach
var concat = []; unselected.forEach((item) => { selected.push(item) });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat
ForEach

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 125 on Windows

View result in a separate tab

Test name	Executions per second
Concat	185400.4 Ops/sec
ForEach	1760.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the provided benchmark.

**Benchmark Overview**

The benchmark compares two approaches for concatenating arrays in JavaScript: using the `concat` method and using the `forEach` loop with an arrow function.

**What is tested**

The benchmark measures the execution time of each approach. The test creates two large arrays, `selected` and `unselected`, each containing 10,000 elements. Then, it executes the concatenation:

* For the "Concat" test, it uses the `concat` method to concatenate the two arrays.
* For the "ForEach" test, it uses a `forEach` loop with an arrow function to iterate over the `unselected` array and push each element onto the `selected` array.

**Options compared**

The benchmark compares two approaches:

1. **Concat**: Using the `concat` method to concatenate the arrays.
2. **ForEach**: Using a `forEach` loop with an arrow function to iterate over the `unselected` array and push each element onto the `selected` array.

**Pros and Cons of each approach**

* **Concat**:
	+ Pros: Simple, efficient, and widely supported.
	+ Cons: May not be as performant for large arrays due to the creation of a new array.
* **ForEach**:
	+ Pros: Can be more efficient for large arrays since it avoids creating a new array.
	+ Cons: Requires an arrow function and may have slightly higher overhead due to the loop.

**Library and purpose**

The `concat` method is a built-in JavaScript method that concatenates two or more arrays. It returns a new array containing all elements from the original arrays.

**Special JS feature or syntax**

There are no specific special features or syntax used in this benchmark. However, it's worth noting that arrow functions were introduced in ECMAScript 2015 (ES6) and provide a concise way to define small, single-purpose functions without the need for function declarations.

**Other alternatives**

Other approaches to concatenate arrays could include:

* Using `Spread Operator` (`...`) with destructuring: `[...selected, ...unselected]`
* Using `Array.prototype.push.apply()`: `push.apply(selected, unselected)`
* Using a `for` loop with an index variable: `var i = 0; while (i < selected.length + unselected.length) { selected[i++] = unselected[i]; }`

However, these alternatives are not tested in this benchmark.

Related benchmarks:

Concat vs ForEach (version: 0)

Comparing performance of: Concat vs ForEach

Created: 4 years ago by: Guest

Jump to the latest result

Concat

ForEach

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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