Benchmark: Array loop vs foreach vs map vs filter vs reduce

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))
reduce
arr.reduce(item => someFn(item))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for
map
filter
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months 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

Test name	Executions per second
foreach	35315.5 Ops/sec
for	17518.3 Ops/sec
map	32603.6 Ops/sec
filter	32271.5 Ops/sec
reduce	34583.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what is tested on the website, along with the pros and cons of different approaches.

**Benchmark Definition**

The benchmark definition is a set of JavaScript functions that are executed repeatedly to measure their performance. In this case, there are four functions:

1. `for` loop: A traditional loop that iterates over an array using a counter variable.
2. `forEach`: A function that calls a provided callback function for each element in the array.
3. `map`: A function that creates a new array by applying a provided transformation function to each element in the original array.
4. `filter`: A function that creates a new array with only the elements that pass a provided test.

The `someFn` function is a helper function that multiplies its input by 3 and then by 8, which is used as a simple transformation or test function for these functions.

**Options Compared**

These four options are compared to measure their performance:

* **Traditional `for` loop**: A straightforward, manual iteration over the array using a counter variable.
* **`forEach`**: A function that calls a callback function for each element in the array, which can be useful when you need to perform an operation on each element without modifying the original array.
* **`map`**: A function that creates a new array by applying a transformation function to each element in the original array. This can be useful when you need to create a new array with transformed data.
* **`filter`**: A function that creates a new array with only the elements that pass a test, which can be useful when you need to select a subset of data.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Traditional `for` loop**:
	+ Pros: Simple, efficient, and easy to understand.
	+ Cons: Requires manual iteration, can be verbose, and may not be suitable for large datasets.
* **`forEach`**:
	+ Pros: Easy to use, doesn't require manual iteration, and is often preferred when working with modern JavaScript versions.
	+ Cons: May have performance overhead due to the function call, especially for large arrays.
* **`map`**:
	+ Pros: Creates a new array with transformed data, can be more efficient than `forEach`, and is often used in conjunction with other functions (e.g., `filter`).
	+ Cons: Requires creating a new array, which may consume additional memory.
* **`filter`**:
	+ Pros: Selects only the elements that pass a test, can be useful when working with large datasets.
	+ Cons: May have performance overhead due to the filtering operation.

**Libraries and Special Features**

None of the provided functions use any external libraries. However, they do utilize some modern JavaScript features:

* **Arrow functions**: Used in `map` and `filter` definitions (e.g., `item => someFn(item)`).
* **Template literals**: Used in the `for` loop preparation code (e.g., `\r\n arr[i] = i;\r\n`).

**Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

* **Loops with iterators**: Instead of using a traditional `for` loop, you can use an iterator (e.g., `Array.prototype.keys()`) to iterate over the array.
* **Higher-order functions**: You can use higher-order functions like `Array.prototype.every()` or `Array.prototype.some()` instead of `forEach`, which may provide better performance in certain cases.
* **Async iteration**: If you're working with large datasets, you might consider using async iteration (e.g., `async/await`) to improve performance.

Overall, the choice of approach depends on your specific use case, personal preference, and performance requirements.

Related benchmarks:

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

Comparing performance of: foreach vs for vs map vs filter vs reduce

Created: 4 years ago by: Guest

Jump to the latest result

foreach

for

map

filter

reduce

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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