Benchmark: javascript loops (foreach, for-in, for-of, for, map, reduce) 1000 items

Tests:

foreach
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); let index = 0; items.forEach(i => index++);
for-in
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); let index = 0; for (let i in items) { index++; }
for-of
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); let index = 0; for (let i of items) { index++; }
for
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); let index = 0; for(let i = 0; i < items.length; ++i) { index++; }
optimized-for
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); let index = 0; for(let i = items.length; i > 0; --i) { index++; }
map
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); items.map((_, i)=> i++);
reduce
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); items.reduce((acc, curr)=> acc++, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for-in
for-of
for
optimized-for
map
reduce

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

for-of

7K/s

for

7K/s

optimized-for

7K/s

reduce

7K/s

map

7K/s

for-in

6K/s

foreach

6K/s

View exact numbers

Test name	Executions per second
✓ for-of	6,797 Ops/sec
for	6,741 Ops/sec
optimized-for	6,730 Ops/sec
reduce	6,725 Ops/sec
map	6,687 Ops/sec
for-in	6,301 Ops/sec
foreach	6,291 Ops/sec

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

LLMs can make mistakes. Check important info.

I'm ready to dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark measures the performance of six different looping constructs in JavaScript: `forEach`, `for-in`, `for-of`, `for`, and two optimized versions (`optimized-for` and an unspecified variant). The test case generates an array of 1000 random numbers and iterates over it using each looping construct.

**Looping Constructs Compared**

Here's a brief overview of the loop constructs compared in the benchmark:

1. **`forEach`**: Iterates over an array using the `forEach` method, which calls the provided callback function for each element in the array.
2. **`for-in`**: Iterates over an array-like object (in this case, the generated array) using a traditional `for` loop with `in` syntax.
3. **`for-of`**: Iterates over an array using the `for...of` loop syntax, which is a more modern and concise way of iterating over arrays.
4. **`for`**: Similar to `for-in`, but uses a traditional `for` loop without `in` syntax.
5. **`optimized-for`**: This variant uses a manual index variable to iterate over the array, bypassing the need for `forEach` or `map`.
6. **(Unspecified variant)**: This option is skipped in the benchmark.

**Pros and Cons of Each Approach**

Here are some general pros and cons of each looping construct:

* **`forEach`**: Pros: concise, easy to read; Cons: can be slower due to function call overhead.
* **`for-in`**: Pros: widely supported, but can lead to issues with array-like objects; Cons: less readable than other options.
* **`for-of`**: Pros: modern, concise syntax; Cons: may not work as expected in older browsers or environments.
* **`for`**: Pros: simple, easy to understand; Cons: less readable than `forEach` or `for-of`.
* **`optimized-for`**: Pros: can be faster due to manual index variable; Cons: more error-prone and less readable.

**Library Used**

None of the benchmark tests use any external libraries. The loops are executed directly within the JavaScript interpreter.

**Performance Results**

The benchmark results show that:

* `forEach` is slower than all other options.
* `for-in` and `for-of` have similar performance, with slight variations depending on the browser.
* `for` is faster than both `foreach` and `for-in`.
* `optimized-for` is the fastest option, followed closely by an unspecified variant (which was skipped in this benchmark).

Overall, the results suggest that the choice of looping construct can impact performance, but also consider readability and maintainability.

javascript loops (foreach, for-in, for-of, for, map, reduce) 1000 items (version: 0)

Comparing performance of: `foreach vs for-in vs for-of vs for vs optimized-for vs map vs reduce`

Created: 2 years ago by: Guest

Go to the latest result

foreach

for-in

for-of

for

optimized-for

map

reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

javascript loops (foreach, for-in, for-of, for, map, reduce) 1000 items (version: 0)

Comparing performance of: foreach vs for-in vs for-of vs for vs optimized-for vs map vs reduce

Created: 2 years ago by: Guest

Go to the latest result

foreach

for-in

for-of

for

optimized-for

map

reduce

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 for-in vs for-of vs for vs optimized-for vs map vs reduce`