Benchmark: Performance of JavaScript .forEach, .map and .reduce vs for and for..ofdasdadadasd ca2qdd

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

const array = generateTestArray();
array.forEach((x) => {
   x.r = x.a + x.b;
});

 
const array = generateTestArray();array.forEach((x) => {   x.r = x.a + x.b;});

for..of

const array = generateTestArray();
for(const x of array) {
	x.r = x.a + x.b;
}

 
const array = generateTestArray();for(const x of array) {    x.r = x.a + x.b;}

.map

const array = generateTestArray();
array.map(x => x.a + x.b)

 
const array = generateTestArray();array.map(x => x.a + x.b)

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
for..of
.map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.forEach	11.9 Ops/sec
for..of	15.1 Ops/sec
.map	9.0 Ops/sec

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

I'll break down the benchmark and explain what's being tested, compared options, pros and cons, and other considerations.

Benchmark Definition The benchmark is designed to compare the performance of three JavaScript iteration methods:

.forEach
for..of
.map

These methods are used to iterate over an array and perform some operation on each element.

Script Preparation Code The script preparation code generates a large test array with 1,000,000 elements, where each element is an object with three properties: a, b, and r. The purpose of this array is to serve as the input for the iteration methods being tested.

Html Preparation Code There is no HTML preparation code provided, which means that only JavaScript execution time is measured.

Individual Test Cases Each test case represents a single iteration method:

.forEach: Uses the .forEach method to iterate over the array and update each element's r property by adding its a and b properties.
for..of: Uses the for..of loop syntax to iterate over the array and update each element's r property by adding its a and b properties.
.map: Uses the .map method to create a new array with updated elements, where each element is an object with three properties: a, b, and r.

Library Used None of the test cases use any external libraries.

Special JS Feature/Syntax The benchmark uses modern JavaScript features:

Arrow functions (=>) are used in .forEach and .map.
The for..of loop syntax is used.
Object literals ({ ... }) are used to create objects with multiple properties.

Comparison Options

Method	Description
`.forEach`	Iterates over the array using a callback function. Each element's `r` property is updated individually.
`for..of`	Iterates over the array using a loop that yields each element. Each element's `r` property is updated individually.
`.map`	Creates a new array with updated elements, where each element has three properties: `a`, `b`, and `r`.

Pros and Cons

.forEach: Easy to read and maintain, but can be slower than other methods due to the callback function overhead.
for..of: More efficient than .forEach and .map, but its syntax is less readable. Can be a good choice for performance-critical code.
.map: Creates a new array with updated elements, which can lead to more memory usage compared to other methods.

Other Considerations

The benchmark generates a very large test array, which may not accurately represent typical use cases.
The execution time measurements are sensitive to the JavaScript engine's performance and optimization techniques.

Alternatives If you want to explore alternative iteration methods or compare their performance, you can consider:

Using Array.prototype.forEach.call() instead of .forEach
Using for loops with traditional indexing (i) instead of for..of
Using reduce() or other array methods like filter() and every()

Note that these alternatives may not be as efficient as the tested methods, but can provide alternative perspectives on iteration in JavaScript.

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Definition**
The benchmark is designed to compare the performance of three JavaScript iteration methods:

1. `.forEach`
2. `for..of`
3. `.map`

These methods are used to iterate over an array and perform some operation on each element.

**Script Preparation Code**
The script preparation code generates a large test array with 1,000,000 elements, where each element is an object with three properties: `a`, `b`, and `r`. The purpose of this array is to serve as the input for the iteration methods being tested.

**Html Preparation Code**
There is no HTML preparation code provided, which means that only JavaScript execution time is measured.

**Individual Test Cases**
Each test case represents a single iteration method:

1. `.forEach`: Uses the `.forEach` method to iterate over the array and update each element's `r` property by adding its `a` and `b` properties.
2. `for..of`: Uses the `for..of` loop syntax to iterate over the array and update each element's `r` property by adding its `a` and `b` properties.
3. `.map`: Uses the `.map` method to create a new array with updated elements, where each element is an object with three properties: `a`, `b`, and `r`.

**Library Used**
None of the test cases use any external libraries.

**Special JS Feature/Syntax**
The benchmark uses modern JavaScript features:

* Arrow functions (`=>`) are used in `.forEach` and `.map`.
* The `for..of` loop syntax is used.
* Object literals (`{ ... }`) are used to create objects with multiple properties.

**Comparison Options**

| Method | Description |
| --- | --- |
| `.forEach` | Iterates over the array using a callback function. Each element's `r` property is updated individually. |
| `for..of` | Iterates over the array using a loop that yields each element. Each element's `r` property is updated individually. |
| `.map` | Creates a new array with updated elements, where each element has three properties: `a`, `b`, and `r`. |

**Pros and Cons**

* `.forEach`: Easy to read and maintain, but can be slower than other methods due to the callback function overhead.
* `for..of`: More efficient than `.forEach` and `.map`, but its syntax is less readable. Can be a good choice for performance-critical code.
* `.map`: Creates a new array with updated elements, which can lead to more memory usage compared to other methods.

**Other Considerations**

* The benchmark generates a very large test array, which may not accurately represent typical use cases.
* The execution time measurements are sensitive to the JavaScript engine's performance and optimization techniques.

**Alternatives**
If you want to explore alternative iteration methods or compare their performance, you can consider:

* Using `Array.prototype.forEach.call()` instead of `.forEach`
* Using `for` loops with traditional indexing (`i`) instead of `for..of`
* Using `reduce()` or other array methods like `filter()` and `every()`

Note that these alternatives may not be as efficient as the tested methods, but can provide alternative perspectives on iteration in JavaScript.

Related benchmarks:

Performance of JavaScript .forEach, .map and .reduce vs for and for..ofdasdadadasd ca2qdd (version: 0)

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

Created: 2 years ago by: Guest

Jump to the latest result