Benchmark: Push or Map - MeasureThat.net

HTML Preparation code:

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

Script Preparation code:

var strs = Array.from(new Array(10000)).map(() => 'String concat. ');

Tests:

Map
var result = strs.map(value => value + " OK");
Push
var result = []; strs.forEach(value => result.push(value + " OK"));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map
Push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
Map	15495.3 Ops/sec
Push	6903.6 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

In this benchmark test defined by the JSON provided, the focus is on evaluating the performance of two different array manipulation approaches in JavaScript: using the `map` method versus the combination of `forEach` and `push` to create a new array.

### Comparison of Options

1. **Map Approach**: 
   - **Test Case**: `var result = strs.map(value => value + " OK");`
   - This test employs the `map` method, which is designed to transform each element of an array and return a new array consisting of the results of applying a function to each original element. In this case, it appends the string " OK" to each element of the original `strs` array.
   - **Pros**:
     - Declarative and concise syntax, which can be more readable.
     - Built-in method that optimizes performance for mapping over arrays.
   - **Cons**:
     - The overhead of creating a new array can be slightly more significant compared to in-place modifications in certain contexts, but this is often negligible.

2. **Push Approach**: 
   - **Test Case**: `var result = [];\r\nstrs.forEach(value => result.push(value + " OK"));`
   - Here, `forEach` is used to iterate over the `strs` array, and the results are manually pushed into a new array called `result`.
   - **Pros**:
     - Flexibility in the iteration logic and potential for doing additional modifications during the loop if needed.
   - **Cons**:
     - More verbose and possibly less readable compared to `map`.
     - Slightly less efficient due to the repeated `push` operation, which involves modifying the array separately rather than transforming it in a single pass.

### Results and Performance Analysis

Based on the test results:
- The `Map` approach achieved **17375.65 executions per second**.
- The `Push` approach had a performance of **7374.83 executions per second**.

These results clearly indicate that the `map` method is significantly faster in this context compared to using `forEach` with `push`. This aligns with the general performance characteristics of these methods in JavaScript, where built-in array methods like `map` can take advantage of optimizations at the engine level.

### Alternative Considerations

Apart from `map` and `forEach`, there are other alternatives for array manipulation in JavaScript:
- **For Loop**: A traditional `for` loop can also be used to iterate over arrays and build new ones. It can sometimes outperform both `map` and `forEach` if written efficiently, especially for larger data sets. 
  ```javascript
  var result = [];
  for (let i = 0; i < strs.length; i++) {
      result[i] = strs[i] + " OK";
  }
  ```
  
- **Reduce Method**: The `reduce` method can also create a new array by accumulating results, but it is more complex and typically used for transforming data in more complex ways and not solely for mapping operations. 
  ```javascript
  var result = strs.reduce((acc, value) => {
      acc.push(value + " OK");
      return acc;
  }, []);
  ```

### Conclusion

In summary, this benchmark test illustrates the performance differences between using `map` and a combination of `forEach` with `push` for creating new arrays in JavaScript. The `map` method is shown to be more efficient in the context of this test, while the `forEach/push` approach, though flexible, is less performant. Other alternatives exist, each with its trade-offs in terms of readability, verbosity, and performance, and engineers should choose the best approach based on the specific needs of their code.

Related benchmarks:

Push or Map (version: 1)

Push or Map to create a new array

Comparing performance of: Map vs Push

Created: one year ago by: Guest

Jump to the latest result

Map

Push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):