Benchmark: [js] forEach, map, filter

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/cjs/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

var array = [1,2,3,4,5];
var template = [];

Tests:

forEach
array.forEach(v => { if (v % 2 === 0) { // 짝수만 도출하여 template 배열에 넣는다. template.push(v) } })
filter + map
template = array.filter(v => v % 2 === 0).map(v => v);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach
filter + map

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/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

filter + map

9.4M/s

forEach

7.5M/s

View exact numbers

Test name	Executions per second
✓ filter + map	9,372,004 Ops/sec
forEach	7,495,916 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

The provided JSON represents a benchmark test for two different approaches to iterate over an array: `forEach` and `filter + map`. The test is designed to measure the performance of these approaches in a ReactJS application, with the help of the Lodash library.

**Options Compared**

Two options are being compared:

1. **forEach**: This approach uses the built-in `forEach` method of JavaScript arrays. It iterates over each element in the array and executes a block of code for each one.
2. **filter + map**: This approach uses the `filter` method to create a new array with only the elements that pass a test, and then uses the `map` method to create a new array with the results.

**Pros and Cons**

Here are some pros and cons of each approach:

*   **forEach**:
    *   Pros:
        *   Simple and concise
        *   Easy to read and understand
    *   Cons:
        *   Can be slower due to function call overhead (the `forEach` method calls the callback function for each element, which can lead to additional function calls)
*   **filter + map**:
    *   Pros:
        *   Often faster than `forEach` since it avoids the function call overhead
        *   More flexible and powerful (can be used to transform arrays in a more complex way)
    *   Cons:
        *   Can be less readable due to the additional method calls

In general, if you need to perform a simple iteration over an array with no side effects, `forEach` might be sufficient. However, if you need more control over the transformation process or want to avoid function call overhead, `filter + map` is likely a better choice.

**Library: Lodash**

The provided benchmark test uses the Lodash library for its `filter` and `map` functions. Lodash is a popular utility library for JavaScript that provides a wide range of functional programming helpers, including array manipulation methods like `filter` and `map`.

**Special JS Feature/Syntax**

None of the individual test cases use any special JavaScript features or syntax.

**Other Alternatives**

If you're looking for alternative approaches to iterate over an array, here are some options:

*   **for...of loop**: This is a modern way of iterating over arrays in ECMAScript 2015 and later versions. It provides better support for iteration than the traditional `forEach` method.
*   **Array.prototype.forEach` with arrow functions: You can also use an arrow function as the callback function when using the `forEach` method.
*   **Closures**: In some cases, you might be able to optimize your code by avoiding function call overhead using closures.

However, for most cases, the choice between `forEach`, `filter + map`, and other alternatives will come down to personal preference, readability concerns, or specific requirements of your project.

[js] forEach, map, filter (version: 0) Benchmark.js

Comparing performance of: `forEach vs filter + map`

Created: 3 years ago by: Guest

Go to the latest result

forEach

filter + map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

[js] forEach, map, filter (version: 0) Benchmark.js

Comparing performance of: forEach vs filter + map

Created: 3 years ago by: Guest

Go to the latest result

forEach

filter + map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `forEach vs filter + map`