Benchmark: ForOf vs Map - MeasureThat.net

Script Preparation code:

var arr = Array(10_000).fill({apple:55})

Tests:

ForOf
const newArr = [] for(const el of arr){ el.apple = 4 newArr.push(el) }
Map
const newArr = arr.map(el => el.apple = 4)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ForOf
Map

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 27 days ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares two approaches for manipulating an array of objects in JavaScript: the `for...of` loop and the `Array.prototype.map()` method. Both approaches aim to modify the `apple` property of each object in the array and collect the results into a new array.

### Test Cases Explained

1. **ForOf**
   - **Benchmark Code**: 
     ```javascript
     const newArr = []
     for (const el of arr) {
         el.apple = 4
         newArr.push(el)
     }
     ```
   - **Description**: This test case uses a `for...of` loop to iterate through the array `arr`. For each object, it sets the property `apple` to `4` and pushes the modified object into a new array `newArr`. 
   - **Pros**: 
     - More straightforward and easier to read for those familiar with traditional looping constructs.
     - Allows for more complex logic within the loop if required, such as conditionals.
   - **Cons**: 
     - Slightly less performant than `Array.prototype.map()`, especially for larger arrays, as it requires explicit allocation of the new array and manual pushing of elements.
     - Does not inherently return a new array unless explicitly done by pushing elements, which could lead to errors if not managed correctly.

2. **Map**
   - **Benchmark Code**:
     ```javascript
     const newArr = arr.map(el => el.apple = 4);
     ```
   - **Description**: This test case uses the `.map()` method, which is a higher-order function. It takes a callback function that sets `el.apple` to `4` for each element in `arr` and returns a new array of the results.
   - **Pros**: 
     - More concise and elegant, which can lead to improved readability and reduced boilerplate code.
     - Automatically creates a new array without needing to push elements one by one.
     - Potentially optimized in some JavaScript engines for better performance.
   - **Cons**: 
     - The method can be less intuitive for developers not used to functional programming patterns.
     - Since `.map()` is intended for transforming data, using it just for side effects (like modifying the original objects in place) goes against the intended use case. This could lead to confusion or misuse.

### Results Summary
From the benchmark results, it appears that:
- **Map** performed better, achieving 42,730.86 executions per second compared to the `for...of` implementation, which achieved 37,752.45 executions per second. This suggests that for this specific task, the `Array.prototype.map()` method is more efficient.

### Other Considerations & Alternatives
When deciding between these two methods, several factors should be considered:
- **Readability**: If the team prefers functional programming paradigms, `map` could be the preferred choice.
- **Performance**: Benchmarks might vary across different contexts; hence, performance should be tested in the application's specific environment.
- **Side Effects**: If modifying the original array is unintended, care should be taken when using `map`, as it alters the objects directly in the provided examples.

Other alternatives to consider for similar tasks might include:
- **`forEach`**: If you are only interested in executing a side effect (like modifying each element) without needing a return array, `arr.forEach(el => el.apple = 4);` could be utilized. However, this doesn't return a new array, which could be a limitation based on requirements.
- **Traditional `for` loop**: Offers maximum control over index access and performance but can be more verbose and less readable compared to the other methods.

This benchmark is a useful exercise in understanding both performance and methodology when working with arrays in JavaScript, particularly when considering readability and functional programming practices.

Latest run results:

Run details: (Test run date: 27 days ago)

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

Browser/OS: Chrome 129 on Linux

View result in a separate tab

Test name	Executions per second
ForOf	37752.5 Ops/sec
Map	42730.9 Ops/sec

Related benchmarks:

ForOf vs Map (version: 0)

Comparing performance of: ForOf vs Map

Created: 27 days ago by: Guest

Jump to the latest result

ForOf

Map

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 27 days ago):