Benchmark: Array loop vs foreach vs map vs filter

Script Preparation code:

   var arr = [];
    for (var i = 0; i < 1000; i++) {
      arr[i] = i;
    }
  
    function someFn(i) {
      return i * 3 * 8;
    }

Tests:

foreach
arr.forEach(function (item){ someFn(item); })
for
for (var i = 0, len = arr.length; i < len; i++) { someFn(arr[i]); }
map
arr.map(item => someFn(item))
filter
arr.filter(item => someFn(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
map
filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 147 on Linux

View result in a separate tab

Test name	Executions per second
foreach	1099569.2 Ops/sec
for	266164.2 Ops/sec
map	212698.8 Ops/sec
filter	86391.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark compares the performance of different JavaScript loops and array methods: `for`, `forEach`, `map`, and `filter`. The goal is to determine which approach yields the best performance.

**Script Preparation Code**

The script preparation code creates an empty array `arr` with 1000 elements, then defines a function `someFn(i)` that takes an input `i` and returns its product (3 × i) multiplied by 8. This function will be used in all test cases.

**Test Cases**

There are four individual test cases:

1. **foreach**: Uses the `forEach` method to iterate over the array, calling `someFn(item)` for each element.
2. **for**: Uses a traditional `for` loop to iterate over the array, calling `someFn(arr[i])` for each element.
3. **map**: Uses the `map` method to create a new array with transformed elements, applying `someFn(item)` to each element.
4. **filter**: Uses the `filter` method to create a new array with elements that pass a test (in this case, calling `someFn(item)`), discarding others.

**Options Comparison**

Here's a brief summary of each option:

* **foreach**: Iterates over the array using the `forEach` method, which provides a more concise and readable way to iterate over arrays.
	+ Pros: More concise and readable; doesn't require explicit indexing or looping variables.
	+ Cons: May incur additional overhead due to the method call.
* **for**: Uses a traditional `for` loop to iterate over the array, providing fine-grained control over the iteration process.
	+ Pros: Provides direct access to array elements and indices; allows for manual optimization and iteration logic.
	+ Cons: More verbose and error-prone compared to `forEach`.
* **map**: Transforms an array by applying a function to each element, creating a new array with transformed values.
	+ Pros: Creates a new array with the desired output format; can be used for more complex transformations.
	+ Cons: May incur additional overhead due to the method call and memory allocation.
* **filter**: Creates a new array with elements that pass a test, discarding others.
	+ Pros: Efficiently filters out unwanted elements; can be combined with `map` for more complex logic.
	+ Cons: May incur additional overhead due to the method call and memory allocation.

**Library Usage**

None of the test cases use an external library. However, it's worth noting that some JavaScript engines or browsers may optimize certain methods (e.g., `forEach`) using internal libraries or caching mechanisms, which can affect benchmark results.

**Special JS Features/ Syntax**

This benchmark does not utilize any special JavaScript features or syntax, such as async/await, generators, or arrow functions (beyond the example `map` usage). The focus is on comparing the performance of different loop and array method approaches.

**Other Alternatives**

If you'd like to explore alternative approaches or variations:

* Consider using other iteration methods, such as `reduce()` or `every()`.
* Examine how the benchmark results change when increasing or decreasing the input size (e.g., from 1000 to 10,000 elements).
* Investigate how different JavaScript engines or browsers optimize array and loop operations.
* Experiment with adding noise or variations to the benchmark test cases to simulate real-world scenarios.

Keep in mind that these alternatives may not be directly relevant to the original benchmark, but they can provide additional insights into performance characteristics of JavaScript code.

Related benchmarks:

Array loop vs foreach vs map vs filter (version: 0)

Comparing performance of: foreach vs for vs map vs filter

Created: 7 years ago by: Registered User

Jump to the latest result

foreach

for

map

filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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