Benchmark: Performance of JavaScript .forEach, for in v3

Script Preparation code:

function generateTestArray() {
  const result = [];
  for (let i = 0; i < 1000000; ++i) {
    result.push({
      a: i,
      b: i / 2,
      r: 0,
    });
  }
  return result;
}

AخA
 
function generateTestArray() {  const result = [];  for (let i = 0; i < 1000000; ++i) {    result.push({      a: i,      b: i / 2,      r: 0,    });  }  return result;}

Tests:

.forEach destructured
const array = generateTestArray(); const newMap = new Map(); array.forEach(({a, b}) => { newMap.set(a, b); }); const foo = [...newMap.entries()];
const array = generateTestArray();
const newMap = new Map();
array.forEach(({a, b}) => {
newMap.set(a, b);
});
const foo = [...newMap.entries()];
for..of destructured
const array = generateTestArray(); const newMap = new Map(); for(const {a, b} of array) { newMap.set(a, b); } const foo = [...newMap.entries()];
const array = generateTestArray();
const newMap = new Map();
for(const {a, b} of array) {
newMap.set(a, b);
}
const foo = [...newMap.entries()];

.forEach

const array = generateTestArray();
const newMap = new Map();
array.forEach((x) => {
  const {a, b} = x;
  newMap.set(a, b);
});
const foo = [...newMap.entries()];

 
const array = generateTestArray();const newMap = new Map();array.forEach((x) => {  const {a, b} = x;  newMap.set(a, b);});const foo = [...newMap.entries()];

for..of

const array = generateTestArray();
const newMap = new Map();
for(const x of array) {
    const {a, b} = x;
    newMap.set(a, b);
}
const foo = [...newMap.entries()];

 
const array = generateTestArray();const newMap = new Map();for(const x of array) {    const {a, b} = x;    newMap.set(a, b);}const foo = [...newMap.entries()];

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 destructured
for..of destructured
.forEach
for..of

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Browser/OS: Firefox 128 on Linux

View result in a separate tab

Test name	Executions per second
.forEach destructured	5.9 Ops/sec
for..of destructured	6.1 Ops/sec
.forEach	6.3 Ops/sec
for..of	6.0 Ops/sec

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

Overview of the Benchmark

The provided JSON represents a JavaScript microbenchmark test case created using MeasureThat.net. The benchmark compares the performance of three different approaches for iterating over an array and mapping its elements to a new Map.

Options Compared

The options compared in this benchmark are:

.forEach with destructuring (.forEach destructured)
for...of with destructuring ( for..of destructured )
.forEach without destructuring (.forEach)

Pros and Cons of Each Approach

.forEach with destructuring:
- Pros: Easy to use, no need for explicit array indices or type checking.
- Cons: Can be slower than other approaches due to the creation of an intermediate object with const {a, b} = x;.
for...of with destructuring:
- Pros: Fast and efficient, as it uses the optimized for-of loop in modern JavaScript engines.
- Cons: May require more explicit type checking or array indices if not used carefully.
.forEach without destructuring:
- Pros: Simple and straightforward, with no need for explicit array indices or type checking.
- Cons: Can be slower than other approaches due to the use of newMap.set(a, b) inside the callback function.

Library and Purpose

In this benchmark, a Map object is used as the target data structure. A Map is a built-in JavaScript object that stores key-value pairs in a way similar to an object. In this case, it's used to store the mapped elements from the array.

Special JS Features or Syntax

None of the tested approaches explicitly use any special JavaScript features or syntax beyond what's standard in modern JavaScript.

Other Considerations

When running this benchmark, consider the following factors:

The size and structure of the input array (in this case, 1 million elements).
The specific hardware and software configuration used by the test device.
Any potential caching or optimization effects that might influence the results.

Alternatives

If you were to modify or extend this benchmark, some alternatives to consider include:

Comparing other data structures, such as ArrayBuffer or Set.
Using different iteration methods, like .map() or reduce().
Increasing or decreasing the size of the input array.
Adding additional overhead (e.g., by using a more complex map function).

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

**Options Compared**

The options compared in this benchmark are:

1. `.forEach` with destructuring (`.forEach destructured`)
2. `for...of` with destructuring ( `for..of destructured` )
3. `.forEach` without destructuring (`.forEach`)

**Pros and Cons of Each Approach**

1. `.forEach` with destructuring:
	* Pros: Easy to use, no need for explicit array indices or type checking.
	* Cons: Can be slower than other approaches due to the creation of an intermediate object with `const {a, b} = x;`.
2. `for...of` with destructuring:
	* Pros: Fast and efficient, as it uses the optimized for-of loop in modern JavaScript engines.
	* Cons: May require more explicit type checking or array indices if not used carefully.
3. `.forEach` without destructuring:
	* Pros: Simple and straightforward, with no need for explicit array indices or type checking.
	* Cons: Can be slower than other approaches due to the use of `newMap.set(a, b)` inside the callback function.

**Library and Purpose**

In this benchmark, a `Map` object is used as the target data structure. A `Map` is a built-in JavaScript object that stores key-value pairs in a way similar to an object. In this case, it's used to store the mapped elements from the array.

**Special JS Features or Syntax**

None of the tested approaches explicitly use any special JavaScript features or syntax beyond what's standard in modern JavaScript.

**Other Considerations**

When running this benchmark, consider the following factors:

* The size and structure of the input array (in this case, 1 million elements).
* The specific hardware and software configuration used by the test device.
* Any potential caching or optimization effects that might influence the results.

**Alternatives**

If you were to modify or extend this benchmark, some alternatives to consider include:

* Comparing other data structures, such as `ArrayBuffer` or `Set`.
* Using different iteration methods, like `.map()` or `reduce()`.
* Increasing or decreasing the size of the input array.
* Adding additional overhead (e.g., by using a more complex map function).

Related benchmarks:

Performance of JavaScript .forEach, for in v3 (version: 2)

Comparing performance of: .forEach destructured vs for..of destructured vs .forEach vs for..of

Created: 2 years ago by: Registered User

Jump to the latest result

.forEach destructured

for..of destructured