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

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;
}

Tests:

for..of
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)
.for (init array)
const array = generateTestArray(); const r = new Array(array.length); for (let i = 0; i < array.length; ++i) { r[i] = array[i].a + array[i].b; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for..of
.map
.for (init array)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year 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
for..of	6.4 Ops/sec
.map	7.2 Ops/sec
.for (init array)	8.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided JSON represents three test cases that compare the performance of different approaches to iterate over an array in JavaScript:

1.  **`for..of`**: This is a modern JavaScript syntax introduced in ECMAScript 2015 (ES6). It allows iterating over arrays using a `for...of` loop, which is more concise and expressive than traditional loops.
2.  **`.map()`**: The `.map()` method applies a transformation function to every element of an array and returns a new array with the results. This approach can be useful when you need to perform an operation on each element without modifying the original array.
3.  **`for (init array)`**: This is a traditional loop syntax that uses a variable to keep track of the current index in the array.

Now, let's discuss the pros and cons of each approach:

*   **`for..of`**:
    *   Pros: More concise, readable, and maintainable. It also avoids the need for manual indexing.
    *   Cons: May be slower due to its syntactic sugar, which can lead to overhead from parsing and execution.
*   `.map()`**:
    *   Pros: Encapsulates the iteration logic within a single method call, making it easy to reuse and compose. It also returns a new array, leaving the original unchanged.
    *   Cons: May be slower due to its function invocation and array creation overhead. Additionally, it can lead to increased memory usage if the resulting array is large.
*   `for (init array)`**:
    *   Pros: Allows for fine-grained control over iteration and indexing. It's often faster than the other two approaches since it avoids syntactic sugar and function calls.
    *   Cons: Can be verbose, especially when dealing with complex iteration logic.

Other considerations:

*   The test cases use a large array of 1 million elements to simulate a performance-intensive scenario. This helps to expose any significant differences between the three approaches.
*   The `generateTestArray()` function is used to create a sample array for each test case, ensuring that all implementations are working with identical data.

Some notable libraries and features used in these tests include:

*   None

Special JavaScript features or syntax used in these tests include:

*   ECMAScript 2015 (ES6) `for...of` loop
*   Array methods like `.map()`

Other alternatives to consider:

*   Other iteration patterns, such as using `while` loops or recursive functions.
*   Using libraries or frameworks that provide optimized iteration algorithms, like `lodash.each()` or `ramda.iterate()`.
*   Considering parallelization or multi-threading for performance-critical code.

Keep in mind that the performance differences between these approaches can vary depending on specific use cases and environments. MeasureThat.net's benchmarking framework helps to identify which approach is fastest under different conditions.

Related benchmarks:

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

Comparing performance of: for..of vs .map vs .for (init array)

Created: one year ago by: Guest

Jump to the latest result

for..of

.map

.for (init array)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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