Benchmark: reduce vs foreach with destructuring and without

Script Preparation code:

var data = [];
for (var iterator = 0; iterator < 1000; iterator++) {
	data.push({id: iterator, name: 'Iteration ' + iterator});
}

​x
 
var data = [];for (var iterator = 0; iterator < 1000; iterator++) {    data.push({id: iterator, name: 'Iteration ' + iterator});}​

Tests:

Reduce

var flattened = data.reduce((entities, item) => {
    return {
      ...entities,
      [item.id]: item
    }
}, {});
console.log(flattened);

 
var flattened = data.reduce((entities, item) => {    return {      ...entities,      [item.id]: item    }}, {});console.log(flattened);

Foreach
var flattened = {}; data.forEach((item) => { flattened[item.id] = item; }); console.log(flattened);
var flattened = {};
data.forEach((item) => {
flattened[item.id] = item;
});
console.log(flattened);
Reduce but without destructuring
var flattened = data.reduce((entities, item) => { entities[item.id] = item; return entities; }, {}); console.log(flattened);
var flattened = data.reduce((entities, item) => {
entities[item.id] = item;
return entities;
}, {});
console.log(flattened);

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
Reduce
Foreach
Reduce but without destructuring

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36

Browser/OS: Chrome 93 on Linux

View result in a separate tab

Test name	Executions per second
Reduce	2775.0 Ops/sec
Foreach	33512.1 Ops/sec
Reduce but without destructuring	34839.9 Ops/sec

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

Let's break down the benchmark and explain what's being tested.

Benchmark Definition: The website provides a JSON representation of a JavaScript microbenchmark, which allows users to compare different approaches to achieving the same result. The benchmark is designed to test the performance of two loops: reduce and forEach.

Options Compared:

Reduce: This option uses the reduce() method to transform the array into an object with flattened properties.
Foreach: This option uses a traditional forEach loop to iterate over the array and populate the flattened object.

Pros and Cons of Each Approach:

Reduce:
- Pros:
  - Can be more memory-efficient, as it only creates a single object to store the result.
  - Often considered more concise and expressive, as it uses a single method to achieve the desired outcome.
- Cons:
  - Can be slower due to the overhead of creating an initial value for the accumulator (in this case, an empty object {}).
Foreach:
- Pros:
  - Typically faster, as it avoids the overhead of creating an accumulator object.
- Cons:
  - Often requires more code and is less concise, as you need to explicitly create and populate the flattened object.

Library Usage: There is no explicit library mentioned in this benchmark. However, the reduce() method is a built-in JavaScript function that's part of the ECMAScript standard.

Special JS Features/Syntax: This benchmark does not rely on any special JavaScript features or syntax beyond what's considered "standard" by the time of its writing (ES6+).

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition:**
The website provides a JSON representation of a JavaScript microbenchmark, which allows users to compare different approaches to achieving the same result. The benchmark is designed to test the performance of two loops: `reduce` and `forEach`.

**Options Compared:**

1. **Reduce:** This option uses the `reduce()` method to transform the array into an object with flattened properties.
2. **Foreach:** This option uses a traditional `forEach` loop to iterate over the array and populate the `flattened` object.

**Pros and Cons of Each Approach:**

1. **Reduce:**
	* Pros:
		+ Can be more memory-efficient, as it only creates a single object to store the result.
		+ Often considered more concise and expressive, as it uses a single method to achieve the desired outcome.
	* Cons:
		+ Can be slower due to the overhead of creating an initial value for the accumulator (in this case, an empty object `{}`).
2. **Foreach:**
	* Pros:
		+ Typically faster, as it avoids the overhead of creating an accumulator object.
	* Cons:
		+ Often requires more code and is less concise, as you need to explicitly create and populate the `flattened` object.

**Library Usage:**
There is no explicit library mentioned in this benchmark. However, the `reduce()` method is a built-in JavaScript function that's part of the ECMAScript standard.

**Special JS Features/Syntax:**
This benchmark does not rely on any special JavaScript features or syntax beyond what's considered "standard" by the time of its writing (ES6+).

Related benchmarks:

reduce vs foreach with destructuring and without (version: 0)

Comparing performance of: Reduce vs Foreach vs Reduce but without destructuring

Created: 4 years ago by: Guest

Jump to the latest result