Benchmark: forEach concat vs reduce push vs forEach push vs reduce concat performance test

Tests:

forEach concat
var a = [{nested: [ "hello", true, 7 ]}, {nested: [ 1, 2 ]}]; let b = []; a.forEach((item) => { b = b.concat(item.nested); });
Reduce push
var a = [{nested: [ "hello", true, 7 ]}, {nested: [ 1, 2 ]}]; const b = a.reduce((acc, item) => { acc.push(...item.nested); return acc }, []);
Reduce concat
var a = [{nested: [ "hello", true, 7 ]}, {nested: [ 1, 2 ]}]; const b = a.reduce((acc, item) => { acc.concat(item.nested); return acc }, []);
forEach push
var a = [{nested: [ "hello", true, 7 ]}, {nested: [ 1, 2 ]}]; let b = []; a.forEach((item) => { b.push(...item.nested); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach concat
Reduce push
Reduce concat
forEach push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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 tests four different approaches to concatenate arrays in JavaScript: `forEach` with and without `concat`, and `reduce`. The goal is to determine which approach performs best in terms of execution time.

**Test Cases**

1. **forEach concat**: This test case uses the `forEach` method to iterate over an array and append its elements to another array using the `concat` method.
2. **Reduce push**: This test case uses the `reduce` method to accumulate elements from an array into a new array, effectively performing a similar operation as `forEach` with `concat`.
3. **Reduce concat**: This test case is similar to `Reduce push`, but it appends each element from the original array directly to the accumulator array using the `concat` method.
4. **forEach push**: This test case uses the `forEach` method to iterate over an array and append its elements directly to another array using the spread operator (`...`).

**Library: Lodash**

The `Reduce push` and `Reduce concat` test cases use the Lodash library, which is a popular JavaScript utility library. The `reduce` function is used to accumulate elements from the original array into a new array.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntax used in these test cases that would affect their behavior.

**Pros and Cons of Each Approach**

1. **forEach concat**:
	* Pros: Easy to read and understand, as it uses a familiar `forEach` loop.
	* Cons: Creates a new array on each iteration, leading to poor performance.
2. **Reduce push**:
	* Pros: Efficiently accumulates elements from the original array into a new array.
	* Cons: Requires knowledge of the `reduce` method and its usage.
3. **Reduce concat**:
	* Pros: Similar to `Reduce push`, but uses `concat` to append elements, which can be less efficient than using the spread operator directly.
	* Cons: Creates unnecessary intermediate arrays.
4. **forEach push**:
	* Pros: Directly appends elements from the original array without creating intermediate arrays.
	* Cons: May have performance issues due to the use of the `forEach` method and the spread operator.

**Other Alternatives**

1. **Array.prototype.reduceRight**: Instead of using `reduce`, you can also use `reduceRight` which accumulates elements in reverse order.
2. **Array.prototype.flat() / Array.prototype.flatMap()**: For concatenating arrays, you can use `flat()` or `flatMap()` which are more efficient than using the spread operator (`...`) with `concat`.
3. **Array.prototype.push.apply() / Array.prototype.unshift.apply()**: Another way to concatenate arrays is by using `push.apply` or `unshift.apply`, which avoids creating intermediate arrays.

In summary, while each approach has its pros and cons, `Reduce push` is likely the most efficient method for concatenating arrays in JavaScript.

Related benchmarks:

forEach concat vs reduce push vs forEach push vs reduce concat performance test (version: 0)

Comparing performance of: forEach concat vs Reduce push vs Reduce concat vs forEach push

Created: 4 years ago by: Guest

Jump to the latest result

forEach concat

Reduce push

Reduce concat

forEach push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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