Benchmark: javascript loops with reduce 4

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; const newArray = []; for (let i in items) { newArray.push(i); }
for-of
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); let index = 0; const newArray = []; for (let i of items) { newArray.push(i); }
for
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); let index = 0; const newArray = []; for(let i = 0; i < items.length; ++i) { newArray.push(items[i]); }
optimized-for
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); let index = 0; const newArray = []; for(let i = items.length; i > 0; --i) { newArray.push(items[i]); }
reduce
const items = Array.from({length: 1000}, () => Math.floor(Math.random() * 40)); items.reduce((acc,value) => { acc.push(value); return acc; }, new Array());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
foreach
for-in
for-of
for
optimized-for
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/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
foreach	3391.0 Ops/sec
for-in	3349.0 Ops/sec
for-of	3502.1 Ops/sec
for	3526.9 Ops/sec
optimized-for	3528.1 Ops/sec
reduce	3433.5 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!

**What is being tested?**

The provided JSON benchmark represents six different ways to iterate over an array in JavaScript: `foreach`, `for-in`, `for-of`, `for`, `optimized-for`, and `reduce`. The benchmark tests how fast each iteration method can push elements into a new array.

**Options compared:**

Here's a brief overview of each option:

1. **`foreach`**: Uses the `Array.prototype.forEach()` method to iterate over the array.
2. **`for-in`**: Iterates over the array using a traditional `for` loop with an `in` keyword.
3. **`for-of`**: Iterates over the array using a traditional `for` loop with a `of` keyword (introduced in ECMAScript 2015).
4. **`for`**: Uses a traditional `for` loop to iterate over the array, manually incrementing the index.
5. **`optimized-for`**: This option is not explicitly mentioned in the benchmark definition, but based on the test case name, it seems to be an optimized version of the `for` loop that avoids unnecessary iterations.
6. **`reduce`**: Uses the `Array.prototype.reduce()` method to accumulate elements into a new array.

**Pros and Cons:**

*   **`foreach`**: Fast and easy to read, but may not be as efficient as other options due to its use of function calls.
    *   Pros: Easy to implement, high-level API.
    *   Cons: May incur function call overhead.
*   **`for-in`**: Manual iteration can lead to performance issues if the loop condition is incorrect or the array is modified during iteration. However, it's a straightforward way to iterate over an array.
    *   Pros: Low-overhead, easy to understand.
    *   Cons: Prone to errors due to manual indexing.
*   **`for-of`**: Introduced in ECMAScript 2015, this option provides a concise and readable way to iterate over arrays. It's gaining popularity but may not be supported by older browsers or engines.
    *   Pros: Easy to read, modern syntax.
    *   Cons: Limited support for older browsers/engine.
*   **`for`**: Requires manual indexing, which can lead to performance issues if not implemented correctly.
    *   Pros: Control over iteration flow.
    *   Cons: More error-prone due to manual indexing.
*   **`optimized-for`**: This option is likely an optimized version of the `for` loop that avoids unnecessary iterations. Its implementation details are not provided in the benchmark definition.
    *   Pros: May offer performance benefits over traditional `for` loops.
    *   Cons: Not explicitly defined in the benchmark, so its performance characteristics are unknown.
*   **`reduce`**: Accumulates elements into a new array using a single pass. It's often used for aggregating data or transforming arrays.
    *   Pros: Efficient and concise.
    *   Cons: May require additional memory allocation.

**Library and syntax:**

None of the options rely on external libraries, but they do utilize JavaScript's built-in API.

**Special JS feature or syntax:**

The `for-of` loop is a relatively new feature introduced in ECMAScript 2015. It's not widely supported by older browsers or engines, so it might require additional setup for compatibility.

Overall, the choice of iteration method depends on your specific use case, personal preference, and the required level of performance. These benchmarks can help you determine which option best suits your needs.

Related benchmarks:

javascript loops with reduce 4 (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

foreach

for-in

for-of

for

optimized-for

reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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