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

Tests:

forEach concat

const a = [...Array(1000)].map(() => ({
    nested: Array.from({length: 40}, () => Math.floor(Math.random() * 40))
}));

let b = [];

a.forEach((item) => {
  b = b.concat(item.nested);
});

​x
 
const a = [...Array(1000)].map(() => ({    nested: Array.from({length: 40}, () => Math.floor(Math.random() * 40))}));​let b = [];​a.forEach((item) => {  b = b.concat(item.nested);});

Reduce push

const a = [...Array(1000)].map(() => ({
    nested: Array.from({length: 40}, () => Math.floor(Math.random() * 40))
}));

const b = a.reduce((acc, item) => {
  acc.push(...item.nested);
  
  return acc
}, []);

 
const a = [...Array(1000)].map(() => ({    nested: Array.from({length: 40}, () => Math.floor(Math.random() * 40))}));​const b = a.reduce((acc, item) => {  acc.push(...item.nested);    return acc}, []);

Reduce concat

const a = [...Array(1000)].map(() => ({
    nested: Array.from({length: 40}, () => Math.floor(Math.random() * 40))
}));

const b = a.reduce((acc, item) => {
  acc.concat(item.nested);
  
  return acc
}, []);

 
const a = [...Array(1000)].map(() => ({    nested: Array.from({length: 40}, () => Math.floor(Math.random() * 40))}));​const b = a.reduce((acc, item) => {  acc.concat(item.nested);    return acc}, []);

forEach push

const a = [...Array(1000)].map(() => ({
    nested: Array.from({length: 40}, () => Math.floor(Math.random() * 40))
}));

let b = [];

a.forEach((item) => {
  b.push(...item.nested);
});

 
const a = [...Array(1000)].map(() => ({    nested: Array.from({length: 40}, () => Math.floor(Math.random() * 40))}));​let b = [];​a.forEach((item) => {  b.push(...item.nested);});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

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

Browser/OS: Chrome 96 on Windows

View result in a separate tab

Test name	Executions per second
forEach concat	19.9 Ops/sec
Reduce push	56.2 Ops/sec
Reduce concat	56.9 Ops/sec
forEach push	52.5 Ops/sec

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

Let's break down the benchmark and its individual test cases.

Benchmark Definition

The benchmark is designed to compare the performance of different approaches for concatenating arrays in JavaScript. Specifically, it tests four different methods:

forEach concat
Reduce push
Reduce concat
forEach push

Each method is implemented slightly differently:

forEach concat: uses the concat method to concatenate the nested array of each object.
Reduce push: uses the reduce method with a custom callback function that pushes the elements of item.nested onto the accumulator using the spread operator (...).
Reduce concat: uses the reduce method and concatenates the elements of item.nested directly using the + operator.
forEach push: uses the push method to add each element of item.nested to the end of the accumulator array.

Pros and Cons

Here's a brief summary of the pros and cons of each approach:

forEach concat:
- Pros: simple, easy to read, and understand.
- Cons: can be slow due to the overhead of calling concat.
Reduce push:
- Pros: concise, efficient, and scalable.
- Cons: may require more mental effort to understand the callback function.
Reduce concat:
- Pros: concise, efficient, and scalable.
- Cons: may be slower due to the overhead of concatenation using +.
forEach push:
- Pros: simple, easy to read, and understand.
- Cons: can be slow due to the overhead of calling push for each element.

Library and Special JS Features

None of these approaches rely on any specific libraries or special JavaScript features beyond standard JavaScript syntax.

Other Considerations

When choosing an approach, consider the following factors:

Readability: if you prioritize understanding your code, forEach concat might be a better choice.
Performance: if you're looking for the most efficient solution, Reduce push or Reduce concat might be a better fit.
Scalability: if you expect large datasets, Reduce push and Reduce concat are likely to perform better.

Alternatives

Other alternatives for concatenating arrays in JavaScript include:

Using the Array.prototype.push.apply() method.
Creating a new array using Array.from() and then pushing elements onto it.
Using a library like Lodash, which provides a concat function that's optimized for performance.

Keep in mind that these alternatives might not be as concise or readable as the approaches tested in this benchmark.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its individual test cases.

**Benchmark Definition**

The benchmark is designed to compare the performance of different approaches for concatenating arrays in JavaScript. Specifically, it tests four different methods:

1. `forEach concat`
2. `Reduce push`
3. `Reduce concat`
4. `forEach push`

Each method is implemented slightly differently:

* `forEach concat`: uses the `concat` method to concatenate the `nested` array of each object.
* `Reduce push`: uses the `reduce` method with a custom callback function that pushes the elements of `item.nested` onto the accumulator using the spread operator (`...`).
* `Reduce concat`: uses the `reduce` method and concatenates the elements of `item.nested` directly using the `+` operator.
* `forEach push`: uses the `push` method to add each element of `item.nested` to the end of the accumulator array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **forEach concat**:
	* Pros: simple, easy to read, and understand.
	* Cons: can be slow due to the overhead of calling `concat`.
2. **Reduce push**:
	* Pros: concise, efficient, and scalable.
	* Cons: may require more mental effort to understand the callback function.
3. **Reduce concat**:
	* Pros: concise, efficient, and scalable.
	* Cons: may be slower due to the overhead of concatenation using `+`.
4. **forEach push**:
	* Pros: simple, easy to read, and understand.
	* Cons: can be slow due to the overhead of calling `push` for each element.

**Library and Special JS Features**

None of these approaches rely on any specific libraries or special JavaScript features beyond standard JavaScript syntax.

**Other Considerations**

When choosing an approach, consider the following factors:

1. Readability: if you prioritize understanding your code, `forEach concat` might be a better choice.
2. Performance: if you're looking for the most efficient solution, `Reduce push` or `Reduce concat` might be a better fit.
3. Scalability: if you expect large datasets, `Reduce push` and `Reduce concat` are likely to perform better.

**Alternatives**

Other alternatives for concatenating arrays in JavaScript include:

1. Using the `Array.prototype.push.apply()` method.
2. Creating a new array using `Array.from()` and then pushing elements onto it.
3. Using a library like Lodash, which provides a `concat` function that's optimized for performance.

Keep in mind that these alternatives might not be as concise or readable as the approaches tested in this benchmark.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result