Benchmark: compare .map with for...of

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

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

Tests:

.map
const array = generateTestArray(); const result = array.map(x => x.a + x.b);
.map (destructured)
const array = generateTestArray(); const result = array.map(({a,b}) => a + b);
for...of
const array = generateTestArray(); const result = []; for (const x of array) { result.push(x.a + x.b); }
for...of (destructured)
const array = generateTestArray(); const result = []; for (const {a,b} of array) { result.push(a + b); }
for...of [fixedLengthResult]
const array = generateTestArray(); const result = new Array(array.length); for (const x of array) { result.push(x.a + x.b); };
for...of (destructured) [fixedLengthResult]
const array = generateTestArray(); const result = new Array(array.length); for (const {a,b} of array) { result.push(a + b); };

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.map
.map (destructured)
for...of
for...of (destructured)
for...of [fixedLengthResult]
for...of (destructured) [fixedLengthResult]

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/60.5 Safari/605.1.15

Browser/OS: Safari 60 on Linux

View result in a separate tab

Test name	Executions per second
.map	59376.1 Ops/sec
.map (destructured)	58838.7 Ops/sec
for...of	58506.7 Ops/sec
for...of (destructured)	60801.2 Ops/sec
for...of [fixedLengthResult]	57419.4 Ops/sec
for...of (destructured) [fixedLengthResult]	55498.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 7 months ago):

LLMs can make mistakes. Check important info.

The provided benchmark evaluates the performance of different approaches for iterating over an array and performing operations on its elements in JavaScript. The focus is on comparing the use of the `.map()` method against the `for...of` loop, with variations including destructuring and using a preallocated result array.

### Benchmark Options Tested
1. **Using `.map()`**:
   - **Standard**: `array.map(x => x.a + x.b);`
   - **Destructured**: `array.map(({a,b}) => a + b);`

2. **Using `for...of`**:
   - **Standard**: `for (const x of array) { result.push(x.a + x.b); }`
   - **Destructured**: `for (const {a,b} of array) { result.push(a + b); }`
   - **Fixed Length Result**: `new Array(array.length);` used before the loop to optimize memory allocation.
   - **Destructured with Fixed Length**: Similar but with destructuring.

### Pros and Cons of Each Approach
#### 1. `.map()`
- **Pros**:
  - **Declarative Syntax**: Easier to understand and read, as it directly expresses the intention to transform an array.
  - **Immutability**: Does not mutate the original array, which can help avoid side effects.
- **Cons**:
  - **Performance**: May be slower than `for...of` in some cases due to the overhead of function calls and array management.
  - **Memory Usage**: Creates a new array, which may lead to memory overhead if not handled carefully.

#### 2. `for...of`
- **Pros**:
  - **Performance**: Generally faster for operations that require manual control over the iteration process and result array. Can benefit from optimizations like preallocating the result array.
  - **Flexibility**: Allows more complex operations and side effects if needed.
- **Cons**:
  - **Verbosity**: More boilerplate code is often required compared to `.map()`.
  - **Mutability**: Directly mutates the result array, which may lead to side effects if not managed properly.

#### 3. Destructuring in Loops
- All `for...of` tests include destructured parameters, which provide clearer access to properties but can introduce minor performance overhead. This is generally considered a trade-off between readability and potential speed.

### Benchmark Results Summary
The results show that the best performing option was the `for...of` with destructuring, achieving around 60,801 executions per second, followed by `.map()` with a standard function at approximately 59,376 executions per second. This suggests that in this particular test, the `for...of` approach was the most efficient.

### Alternatives Not Addressed Directly
Other alternatives for iterating over arrays in JavaScript include:
- **`forEach()`**: Similar to `.map()` but does not return a new array. This can be slower and less preferable when the goal is to create a new transformed array.
- **Classic `for` Loops**: Offers potentially greater control and performance but sacrifices readability.
- **Functional programming methods**: Methods like `.reduce()` can also be used to achieve similar outcomes, but they can be less intuitive for straightforward transformations.

### Conclusion
Each approach has its use cases, and the choice between them should be informed by the specific requirements of the task at hand, including considerations for performance, readability, and maintainability. When performance is critical, as shown in this benchmark, the `for...of` loop with preallocation can provide significant advantages. However, for cleaner and more readable code, `.map()` remains a strong contender when dealing with transformations.

Related benchmarks:

compare .map with for...of (version: 1)

Comparing performance of: .map vs .map (destructured) vs for...of vs for...of (destructured) vs for...of [fixedLengthResult] vs for...of (destructured) [fixedLengthResult]

Created: 7 months ago by: Guest

Jump to the latest result

.map

.map (destructured)

for...of

for...of (destructured)

for...of [fixedLengthResult]

for...of (destructured) [fixedLengthResult]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 7 months ago):